Android-анимация - флип

Question

Мне нужно создать анимацию - перевернуть вид и показать другой.

Ширина отображаемого в данный момент вида медленно уменьшается до нуля, и после этого ширина отображаемого вида должнабыть увеличен с нуля.

За это время высота переходит от отображаемой в данный момент высоты к слегка уменьшенной высоте и обратно.

Как этого добиться ... используяViewFlipper.

Answer 1

Вы можете сделать это, установив ScaleAnimations на ViewFlipper.Я делаю аналогичные вещи без второй шкалы.У меня есть две анимации, одна для выходящего вида и одна для входящего. Я опубликую их здесь как отправную точку для вас.

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>

Затем в приложении я установил их на ViewFlipper следующим образом:

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

Как ясказал, что это не совсем то, что вы описали, но это довольно близко и поможет вам начать.

- РЕДАКТИРОВАТЬ -

Вот код, использующий pivotXи pivotY (ну, просто pivotY в моем случае):

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

Просто чтобы сообщить, что я разработал новую библиотеку FlipView , которая включает и расширяет эту конкретную анимацию (flip), описанную CaseyB.Я имею в виду полностью настраиваемую библиотеку, в которой вы сможете поменять любые виды и макеты с любой анимацией и формой, которую вы пожелаете, включая переворачивание изображения Gmail.

Answer 3

Использование масштабной анимации из ответа CaseyB с objectAnimator.Если у вас нет папки аниматора в res, создайте ее, для этого требуется, чтобы макет objectAnimator находился в этом хранилище аниматора.

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>

Код:

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