Question

我正在尝试使用以下代码为两个片段之间的事务设置动画： http://developer.android.com/training/animation/cardflip.html

但结果恰恰如下：http://developer.android.com/training/animation/anim_card_flip.mp4

但是，我想要这个结果：https://www.youtube.com/watch?v=52mXHqX9f3Y

不同之处在于，即使旋转180度，第二个也使用不同的相机（Z轴）。

所以问题是：

我可以将Z-Index应用于对象动画师吗？
或者，我可以提供一个Animation类而不是一个包含动画的XML文件来设置片段转换动画吗？

感谢。

编辑：检查差异。 enter image description here

Answer 1

要实现您的目标，您需要在动画师中再做两件事：

使用非默认枢轴（位于视图中间）
旋转时翻译视图

在这两种情况下，您都需要知道视图的大小，因此我建议您创建自定义布局组件以用作片段的根，公开一组可以使用不同objectanimator设置动画的属性你的xml里面。

组件应如下所示：

public class FlippableLayout extends FrameLayout {

    private FlipEvaluator flipRightInEvaluator;
    private FlipEvaluator flipRightOutEvaluator;
    private FlipEvaluator flipLeftInEvaluator;
    private FlipEvaluator flipLeftOutEvaluator;

    public FlippableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public FlippableLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        setCameraDistance(getCameraDistance() * 10); // reduces perspective skewing
        flipRightInEvaluator = new FlipEvaluator(
                1f, .5f, // pivotX/pivotY
                -1f, 0f, // translationX start/end
                -180, 0, // rotationY start/end
                0f, 1f); // alpha start/end
        flipRightOutEvaluator = new FlipEvaluator(
                0f, .5f,
                0f, 1f,
                0, 180,
                1f, 0f);
        flipLeftInEvaluator = new FlipEvaluator(
                .0f, .5f,
                1f, 0f,
                180, 0,
                0f, 1f);
        flipLeftOutEvaluator = new FlipEvaluator(
                1f, .5f,
                0f, -1f,
                0, -180,
                1f, 0f);
    }

    public void setFlipRightIn(float value) {
        evaluateUsing(flipRightInEvaluator, value);
    }

    public void setFlipRightOut(float value) {
        evaluateUsing(flipRightOutEvaluator, value);
    }

    public void setFlipLeftIn(float value) {
        evaluateUsing(flipLeftInEvaluator, value);
    }

    public void setFlipLeftOut(float value) {
        evaluateUsing(flipLeftOutEvaluator, value);
    }

    private void evaluateUsing(FlipEvaluator evaluator, float value) {
        float cappedValue = Math.min(1f, Math.max(0f, value));
        setPivotX(getWidth() * evaluator.getPivotX());
        setPivotY(getHeight() * evaluator.getPivotY());
        setAlpha(evaluator.getAlpha(cappedValue));
        setTranslationX(getWidth() * evaluator.getTranslationX(cappedValue));
        setRotationY(evaluator.getRotationY(cappedValue));
    }

    private static class FlipEvaluator {
        private final float pivotX;
        private final float pivotY;
        private final float startTranslationX;
        private final float endTranslationY;
        private final float startRotationY;
        private final float endRotationY;
        private final float startAlpha;
        private final float endAlpha;

        /**
         * Simple evaluator holding all the start/end values for a flip animation.
         *
         * @param pivotX value between 0 and 1, where 0 is the left border and 1 is the right border of the target
         * @param pivotY value between 0 and 1, where 0 is the top border and 1 is the bottom border of the target
         * @param startTranslationX value between 0 and 1, where 1 is the width of the target
         * @param endTranslationY value between 0 and 1, where 1 is the width of the target
         * @param startRotationY value between -180 and 180
         * @param endRotationY value between -180 and 180
         * @param startAlpha initial alpha
         * @param endAlpha final alpha
         */
        private FlipEvaluator(float pivotX, float pivotY,
                              float startTranslationX, float endTranslationY,
                              float startRotationY, float endRotationY,
                              float startAlpha, float endAlpha) {
            this.pivotX = pivotX;
            this.pivotY = pivotY;
            this.startTranslationX = startTranslationX;
            this.endTranslationY = endTranslationY;
            this.startRotationY = startRotationY;
            this.endRotationY = endRotationY;
            this.startAlpha = startAlpha;
            this.endAlpha = endAlpha;
        }

        public float getPivotX() {
            return pivotX;
        }

        public float getPivotY() {
            return pivotY;
        }

        public float getTranslationX(float t) {
            return startTranslationX + (endTranslationY - startTranslationX) * t;
        }

        public float getRotationY(float t) {
            return startRotationY + (endRotationY - startRotationY) * t;
        }

        public float getAlpha(float t) {
            return t < .5f ? startAlpha : endAlpha;
        }

    }

}

您的动画文件将如下所示：

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:valueFrom="0"
        android:valueTo="1"
        android:propertyName="flipLeftIn"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

当然，您可以使用flipLeftIn，flipLeftOut或flipRightIn更改flipRightOut，以便将动画师应用于其他媒体资源。

在Activity中，您可以像往常一样在片段事务中设置自定义动画，指定之前定义的XML：

    ....
    getFragmentManager()
            .beginTransaction()
            .setCustomAnimations(
                    R.animator.card_flip_right_in, R.animator.card_flip_right_out,
                    R.animator.card_flip_left_in, R.animator.card_flip_left_out)
    ....

Flip example

另一种方法是在XML中执行所有操作，但使用通过XML定义的维度值设置数据透视/转换并不像上面显示的解决方案那样可扩展。

修改要缩短相机距离，您可以在API＆gt; 12上轻松使用View.setCameraDistance()。我更新了包含此更改的代码段。

Answer 2

我试着按照a.bertucci的回答但动画不起作用，我不知道为什么......我对这个世界有点新意，对我来说有点难过了解自定义FlippableFrameLayout的情况。

但受他对Camera distance的回答的启发，我发现我只需要在scale属性上再施加一个动画。（即scaleX和scaleY）

因此，其他所有内容与 official tutorial here相同，您只需修改动画xml文件即可达到预期效果：

对于 left_out.xml 和 right_out.xml ，添加以下内容：

    <objectAnimator
    android:valueFrom="1f"
    android:valueTo="0.5f"
    android:propertyName="scaleX"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="@integer/card_flip_time_half" />

<objectAnimator
    android:valueFrom="1f"
    android:valueTo="0.5f"
    android:propertyName="scaleY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="@integer/card_flip_time_half" />

对于 left_in.xml 和 right_in.xml ，添加以下内容：

    <objectAnimator
    android:valueFrom="0.5f"
    android:valueTo="1.0f"
    android:propertyName="scaleX"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:startOffset="@integer/card_flip_time_half"
    android:duration="@integer/card_flip_time_half" />

<objectAnimator
    android:valueFrom="0.5f"
    android:valueTo="1.0f"
    android:propertyName="scaleY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:startOffset="@integer/card_flip_time_half"
    android:duration="@integer/card_flip_time_half" />

当然，您可以在这里修改valueFrom和valueTo（我使用0.5f），以调整＆＃34;相机距离＆＃34;。

在Android中翻转动画以设置“z”索引或相机的片段事务

2 个答案: