animate - image animation android

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

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 échale un vistazo.

Answer 2

Usando 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 / animator / 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 / animator / 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();

Answer 3

Puede hacer eso con ScaleAnimations configurado 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, los configuré en ViewFlipper la ViewFlipper manera:

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

Como dije, esto no es exactamente lo que describiste, pero está bastante cerca y te ayudará a empezar.

--EDITAR--

Aquí está el código que usa pivotX y pivotY (bueno, solo 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" />