android - 在 Android 中为 Fragment 事务设置 "z"索引或相机的翻转动画

Question

我正在尝试使用以下代码为两个 fragment 之间的事务设置动画: 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 文件来为 fragment 转换设置动画吗？

谢谢。

编辑:检查差异。

Answer 1

要实现您想要的效果，您需要在动画师中再做两件事:

• 使用非默认枢轴(放置在 View 中间)旋转 View
• 旋转时平移 View

在这两种情况下，您都需要知道 View 的大小，因此我建议创建自定义布局组件以用作 fragment 的根，公开一组属性，您可以使用不同的 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 中，您可以像往常一样在 fragment 事务中设置自定义动画，指定您之前定义的 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)
    ....

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

编辑要减少相机距离，您可以轻松使用 View.setCameraDistance() API > 12。我更新了包含此更改的代码段。