Android Animation - Flip

Question

Necesito crear una animación: voltear una vista y mostrar otra.

El ancho de la vista que se muestra actualmente se reduce lentamente a cero y, a continuación, el ancho de la vista que se debe mostrar se debe aumentar desde cero.

Durante este tiempo, la altura va desde la altura mostrada actualmente hasta la altura ligeramente decreciente y viceversa.

¿Cómo puedo lograr esto ... usando un ViewFlipper.

Answer 1

Puede hacerlo con ScaleAnimations en un ViewFlipper. Hago algo similar sin la segunda escala. Tengo dos animaciones, una para que salga la vista y otra para que entre la vista. Las publicaré aquí como punto de partida para ti.

shrink_to_middle.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale 
     android:interpolator="@android:anim/linear_interpolator" 
     android:fromXScale="1.0" 
     android:toXScale="1.0" 
     android:fromYScale="1.0" 
     android:toYScale="0.0" 
     android:fillAfter="false" 
     android:duration="200" /> 
    <translate 
     android:fromYDelta="0" 
     android:toYDelta="50%" 
     android:duration="200"/> 
</set> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale 
     android:interpolator="@android:anim/linear_interpolator" 
     android:fromXScale="1.0" 
     android:toXScale="1.0" 
     android:fromYScale="0.0" 
     android:toYScale="1.0" 
     android:fillAfter="false" 
     android:startOffset="200" 
     android:duration="200" /> 
    <translate 
     android:fromYDelta="50%" 
     android:toYDelta="0" 
     android:startOffset="200" 
     android:duration="200"/> 
</set> 

Luego, en la aplicación que les establece en el ViewFlipper así:

mViewFlipper.setInAnimation(context, R.anim.grow_from_middle); 
mViewFlipper.setOutAnimation(context, R.anim.shrink_to_middle); 

Como dije, esto no es exactamente lo que usted describió, pero es bastante cercano y lo ayudará a comenzar.

--EDIT--

Este es el código utilizando el PivotX y pivotY (bueno, sólo pivotY en mi caso):

shrink_to_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<scale 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator" 
    android:fromXScale="1.0" 
    android:toXScale="1.0" 
    android:fromYScale="1.0" 
    android:toYScale="0.0" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:duration="200" /> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<scale 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/linear_interpolator" 
    android:fromXScale="1.0" 
    android:toXScale="1.0" 
    android:fromYScale="0.0" 
    android:toYScale="1.0" 
    android:pivotY="50%" 
    android:fillAfter="false" 
    android:startOffset="200" 
    android:duration="200" /> 

Answer 2

Solo para notificar que he desarrollado una nueva biblioteca FlipView que incluye y amplía esta animación específica (tapa) descrita por CaseyB. Me refiero a una biblioteca totalmente personalizable en la que podrás intercambiar cualquier tipo de vistas y diseños con cualquier tipo de animación y formas que desees, incluido el giro de la imagen de Gmail.

Por favor, eche un vistazo.

Answer 3

Utilizando la animación de escala de la respuesta de CaseyB con objectAnimator. Si no tiene la carpeta del animador debajo de res, cree una, requiere que el diseño objectAnimator resida en este animador foler.

res/animador/shrink_to_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:valueFrom="1.0" 
     android:valueTo="0.0" 
     android:propertyName="scaleX" 
     android:duration="200"/> 
</set> 

res/animador/grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:valueFrom="0.0" 
     android:valueTo="1.0" 
     android:propertyName="scaleX" 
     android:duration="200" 
     android:startOffset="200"/> 
</set> 

El código:

ImageView iv = (ImageView) findViewById(R.id.my_image); 
AnimatorSet shrinkSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.shrink_to_middle); 
shrinkSet.setTarget(iv); 
shrinkSet.start(); 

iv.setImageResource(R.drawable.another_image); 

AnimatorSet growSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.grow_from_middle); 
growSet.setTarget(iv); 
growSet.start();