翻转动画在Android中的一个片段交易设置和QUOT; Z"索引或照相机 [英] Flip animation in Android for a Fragment transaction setting a "z" index or a camera

查看:280
本文介绍了翻转动画在Android中的一个片段交易设置和QUOT; Z"索引或照相机的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想两个片段之间的动画交易,与此code: http://developer.android.com/training/animation/cardflip.html

I'm trying to animate transaction between two fragments, with this code: http://developer.android.com/training/animation/cardflip.html

但结果是正是这一点: http://developer.android.com/training /animation/anim_card_flip.mp4

But the result is exactly this: http://developer.android.com/training/animation/anim_card_flip.mp4

不过,我想这样的结果: https://www.youtube.com/watch?v = 52mXHqX9f3Y

However, I want this result: https://www.youtube.com/watch?v=52mXHqX9f3Y

所不同的是,即使寿两个旋转180度,第二个做它用不同的相机(Z轴)。

The difference, is that even tho both rotate 180º, the second one does it with a different camera (Z-Axis).

所以,问题是:

  • 我可以申请一个Z-指数为对象的动画?
  • 或者,我可以提供一个XML文件的动画类,而不是包含动画的动画片段转换?

感谢。

编辑:检查的差异。

Check differences.

推荐答案

要实现你想要的,你需要做两件事情在你的动画师:

To achieve what you want you need to do two more things in your animators:

  • 旋转用枢轴不是默认的(放置在视图的中间)
  • 视图
  • 翻译美景,一边旋转

在这两种情况下,你需要知道你的视图的大小,所以我会建议创建自定义布局组件用作您的片段根,露出一组属性,你可以使用不同的 objectanimator 在你的XML。

In both cases you need to know the size of your view, so I would recommend to create your custom layout component to be used as root of your fragments, exposing a set of properties you can animate using different objectanimator inside your 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;
        }

    }

}

您动画文件将是这样的:

Your animation files will look like this:

<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 ,以便将动画应用到一个不同的属性。

Of course you can change flipLeftIn with flipLeftOut, flipRightIn or flipRightOut in order to apply the animator to a different property.

在你的活动你可以在你的交易片段像往常一样设置自定义动画,指定你XMLS previously定义的:

In your Activity you can set custom animations in your fragment transaction as usual, specifying the XMLs you previously defined:

    ....
    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定义的尺寸值枢轴/翻译是不是可扩展的,如上图所示的解决方案。

The other approach is to do everything in the XML, but setting the pivot/translation using a dimension value defined via XML is not as scalable as the solution shown above.

修改 为了减少相机间的距离,你可以很容易地使用 View.setCameraDistance() 的关于API> 12。我更新了片段,包括这种变化。

EDIT To reduce the camera distance you can easily use View.setCameraDistance() on API>12. I updated the snippet including this change.

这篇关于翻转动画在Android中的一个片段交易设置和QUOT; Z&QUOT;索引或照相机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆