Android 动画 - 翻转

Android Animation - Flip

提问by Gaurav Vaish

I need to create an animation - Flip a view and show another one.

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

The width of currently shown view is decreased slowly to zero and after that the width of the view-to-be-shown must be increased from zero.

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

During this time, the height goes from the currently-shown-height to slightly-decreased-height and back again.

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

How can I achieve this... using a ViewFlipper.

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

回答by CaseyB

You can do that with ScaleAnimationsset on a ViewFlipper. I do a similar thing without the second scale. I have two animations, one for the view going out and one for the view coming in. I'll post them here as a starting point for you.

您可以使用ScaleAnimationsset on a来做到这一点ViewFlipper。我在没有第二个规模的情况下做了类似的事情。我有两个动画，一个是出去的视图，一个是进来的视图。我会把它们贴在这里作为你的起点。

shrink_to_middle.xml

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

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>

Then in the app I set them to the ViewFlipperlike this:

然后在应用程序中我将它们设置为ViewFlipper这样：

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

Like I said, this is not exactly what you described, but it's pretty close and will get you started.

就像我说的，这与您所描述的不完全相同，但它非常接近并且可以帮助您入门。

--EDIT--

- 编辑 -

Here is the code using the pivotX and pivotY (well, just pivotY in my case):

这是使用 pivotX 和 pivotY 的代码（好吧，在我的例子中只是 pivotY ）：

shrink_to_middle.xml

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

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

回答by Davideas

Just to notify that I've developed a new library FlipViewthat includes and extends this specific animation (flip) described by CaseyB. I mean a fully customizable library where you will be able to swap any kind of views and layouts with any kind of animation and shapes you desire, included the Gmail image flipping.

只是为了通知我已经开发了一个新的库FlipView，它包含并扩展了 CaseyB 描述的这个特定动画（翻转）。我的意思是一个完全可定制的库，您可以在其中交换任何类型的视图和布局与您想要的任何类型的动画和形状，包括 Gmail 图像翻转。

Please have a look.

请看一看。

回答by s-hunter

Using the scale animation from CaseyB's answer with objectAnimator. If you don't have the animator folder under res, create one, it requires the objectAnimator layout to reside in this animator foler.

将 CaseyB 的回答中的缩放动画与 objectAnimator 结合使用。如果 res 下没有动画文件夹，请创建一个，它需要 objectAnimator 布局驻留在此动画文件夹中。

res/animator/shrink_to_middle.xml

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

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>

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

回答by Randy

I know this is an old question, but none of the above worked for me. I did it this way.

我知道这是一个老问题，但以上都不适合我。我是这样做的。

For reference, the image I was flipping was a playing card. The front of the card was showing, and I want to flip the card and show the back.

作为参考，我正在翻转的图像是一张扑克牌。卡片正面显示，我想翻转卡片并显示背面。

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)

So what is this doing? It's flipping the image on the Y axis (horizontally) and changing the image half-way through the flip - when the card is on its side - so that when the other side of the card starts to show, the new image (card back design) starts to appear.

那么这是在做什么呢？它在 Y 轴（水平）上翻转图像并在翻转过程中改变图像 - 当卡片在其侧面时 - 这样当卡片的另一面开始显示时，新图像（卡片背面设计） ) 开始出现。

I slowed this down to take 5 seconds (duration = 5000) to make sure that it looks correct all the way through.

我把它放慢了 5 秒（持续时间 = 5000），以确保它在整个过程中看起来都是正确的。