安卓动画 - 翻转

Question

我需要创建一个动画-翻转一个视图并显示另一个视图。

当前显示视图的宽度缓慢减小到零，然后要显示的视图的宽度必须从零开始增加。

在此期间，高度从当前显示的高度减少到略微减少的高度，然后再恢复到当前显示的高度。

如何实现这一点...使用ViewFlipper。

- gvaish

Answer 1

你可以使用应用于ViewFlipper的ScaleAnimations来实现。我做了类似的事情，不过没有第二个缩放。我有两个动画，一个用于视图离开，另一个用于视图进入。我会在这里发布它们，供你作为起点。

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" />

- CaseyB

---

谢谢你的指针。绝对是一个很好的起点。我没有使用另一个动画-翻译，而是将pivotX设置为50％，pivotY设置为50％并进行了一些其他更改。 不过还是感谢你的起点。 - gvaish

太好了！谢谢你关于pivotX，pivotY的提示！ - CaseyB

Answer 2

使用CaseyB的答案中的缩放动画，使用objectAnimator。如果您在res下没有animator文件夹，请创建一个，它要求objectAnimator布局位于该animator文件夹中。

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

- s-hunter

---

如果您使用此变体，请不要忘记延迟图像更改，否则它将与第一个动画的开始一起更改（Kotlin示例）：Handler().postDelayed({iv.setImageResource(R.drawable.another_image)}, 200)，其中200是第一个动画的持续时间。 - Dmitriy Pavlukhin

Answer 3

只是想通知您，我开发了一个新库FlipView，其中包括并扩展了CaseyB描述的此特定动画（翻转）。我的意思是一个完全可定制的库，您将能够使用任何类型的视图和布局以及任何所需的动画和形状进行交换，包括Gmail图像翻转。

请看一下。

- Davideas

Answer 4

我知道这是一个老问题，但以上的方法都对我没用。我是这样做的。

参考一下，我要翻转的图片是一张扑克牌。牌面朝上，我想翻转牌面并显示背面。

long duration = getResources().getInteger(R.integer.flip_animation_length).toLong()

// cardDisplay was previously defined as an ImageView in this example
// Set animation and start the animation
cardDisplay.animate().rotationY(180f).setDuration(duration).start()

// wait until the animation is half over
Handler().postDelayed({
    // Change the image at the half-way point
    cardDisplay.setImageDrawable(getResources().getDrawabe(R.drawable.card_back))
},duration/2)

那这个代码是干什么的呢？它在 Y 轴方向翻转图像（水平方向），并在翻转过程中当卡片侧着时更换图像一半，以便当卡片的另一面开始显示时，新的图像（卡背设计）开始出现。

我将其放慢到 5 秒钟（duration = 5000），以确保整个过程看起来正确无误。

- Randy