- Flip

Question

Ho bisogno di creare un'animazione: capovolgi una vista e mostrane un'altra.

La larghezza della vista attualmente visualizzata viene ridotta lentamente a zero e successivamente la larghezza della vista da mostrare deve essere aumentata da zero.

Durante questo periodo, l'altezza passa dall'altezza attualmente visualizzata a un'altezza leggermente ridotta e viceversa.

Come posso ottenere questo ... utilizzando un ViewFlipper.

Answer 1

È possibile farlo con ScaleAnimations impostato su ViewFlipper. Faccio una cosa simile senza la seconda scala. Ho due animazioni, una per la vista in uscita e una per la vista in arrivo. Le posterò qui come punto di partenza per te.

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> 

Poi in app li ho impostato il ViewFlipper in questo modo:

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

Come ho detto, questo non è esattamente quello che hai descritto, ma è molto vicino e ti consentirà di iniziare.

--EDIT--

Ecco il codice utilizzando il pivotX e pivotY (beh, basta pivotY nel mio 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 per segnalare che ho sviluppato una nuova libreria FlipView che include ed estende questa animazione specifica (flip) descritta da CaseyB. Intendo una libreria completamente personalizzabile in cui potrai scambiare qualsiasi tipo di visualizzazione e layout con qualsiasi tipo di animazione e forma desideri, incluso il lancio delle immagini di Gmail.

Si prega di dare un'occhiata.

Answer 3

Utilizzando l'animazione della scala dalla risposta di CaseyB con objectAnimator. Se non hai la cartella animator sotto res, creane una, richiede che il layout objectAnimator risieda in questo animatore.

res/animatore/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/animatore/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> 

Il codice:

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();