android - Android 动画 - 翻转

Question

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

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

在此期间，高度从当前显示的高度变为略微降低的高度并再次返回。

我怎样才能做到这一点......使用 ViewFlipper。

Answer 1

您可以使用ScaleAnimationsset on a来做到这一点ViewFlipper。我在没有第二个比例的情况下做类似的事情。我有两个动画，一个用于视图的输出，一个用于视图的输入。我会将它们发布在这里作为您的起点。

收缩到中间.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）：

收缩到中间.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，其中包含并扩展了 CaseyB 描述的这个特定动画（翻转）。我的意思是一个完全可定制的库，您可以在其中使用您想要的任何类型的动画和形状交换任何类型的视图和布局，包括 Gmail 图像翻转。

请看一看。

Answer 3

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

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 秒（持续时间 = 5000），以确保它在整个过程中看起来都是正确的。