Android Animation - Flip

Мне нужно создать анимацию. Переверните представление и покажите еще один.

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

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

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

Ответ 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);

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

- EDIT -

Вот код с помощью pivotX и 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" />

Ответ 2

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

Пожалуйста, смотрите.

Ответ 3

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

Рез/аниматор/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>

Рез/аниматор/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();