Android Animation - Flip

Question

Ich muss eine Animation erstellen - Flip eine Ansicht und eine andere anzeigen.

Die Breite der aktuell angezeigten Ansicht wird langsam auf Null verringert und danach muss die Breite der anzuzeigenden Ansicht von Null an vergrößert werden.

Während dieser Zeit geht die Höhe von der aktuell angezeigten Höhe zu einer leicht abnehmenden Höhe und wieder zurück.

Wie kann ich dies erreichen ... mit einem ViewFlipper.

Answer 1

Sie können das mit ScaleAnimations auf einem ViewFlipper setzen. Ich mache eine ähnliche Sache ohne die zweite Skala. Ich habe zwei Animationen, eine für den Ausblick und eine für den Ausblick. Ich poste sie hier als Ausgangspunkt für Sie.

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> 

Dann in der App Ich habe sie auf die ViewFlipper wie folgt aus:

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

Wie ich schon sagte, das ist nicht genau das, was Sie beschrieben haben, aber es ist ziemlich nah und wird Ihnen den Anfang machen.

--EDIT--

Hier ist der Code der pivotX und pivotY mit (gut, pivotY nur in meinem Fall):

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

Nur um zu benachrichtigen, dass ich eine neue Bibliothek FlipView entwickelt habe, die diese spezielle von CaseyB beschriebene Animation (Flip) enthält und erweitert. Ich meine eine vollständig anpassbare Bibliothek, in der Sie jede Art von Ansichten und Layouts mit jeder Art von Animationen und Formen, die Sie wünschen, austauschen können, einschließlich der Gmail-Bildumschaltung.

Bitte sehen Sie es sich an.

Answer 3

Verwenden der Skalierungsanimation von CaseyBs Antwort mit objectAnimator. Wenn Sie den Animator-Ordner unter res nicht haben, erstellen Sie einen Animator-Ordner, der dazu benötigt, dass das Objekt-Animator-Layout in diesem Animator-Ordner gespeichert ist.

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> 

Der Code:

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