Android view翻转动画

［积累 https://github.com/yayaa/Rotatable]

[转载 http://www.jianshu.com/p/7db8425e84fc]

749674-89be3fa5b7608647.gif

• 首页

首页由正面和背面两张卡片组成, 同时, 设置点击事件flipCard.

    

    



逻辑, 初始化动画和镜头距离.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        setAnimators(); // 设置动画
        setCameraDistance(); // 设置镜头距离
    }

逻辑, 初始化动画和镜头距离.

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        setAnimators(); // 设置动画
        setCameraDistance(); // 设置镜头距离
    }

• 动画

初始化右出(RightOut)和左入(LeftIn)动画, 使用动画集合AnimatorSet.
当右出动画开始时, 点击事件无效, 当左入动画结束时, 点击事件恢复.

 // 设置动画
    private void setAnimators() {
        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);
        mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);

        // 设置点击事件
        mRightOutSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mFlContainer.setClickable(false);
            }
        });
        mLeftInSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mFlContainer.setClickable(true);
            }
        });
    }

右出动画

旋转180°, 当旋转一半时, 卡片消失.

左入动画

在开始时是隐藏, 逆向旋转, 当旋转一半时, 显示卡片.

• 镜头视角

改变视角, 涉及到旋转卡片的Y轴, 即rotationY, 需要修改视角距离.
如果不修改, 则会超出屏幕高度, 影响视觉体验.

    // 改变视角距离, 贴近屏幕
    private void setCameraDistance() {
        int distance = 16000;
        float scale = getResources().getDisplayMetrics().density * distance;
        mFlCardFront.setCameraDistance(scale);
        mFlCardBack.setCameraDistance(scale);
    }

4. 旋转控制

设置右出和左入动画的目标控件, 两个动画同步进行, 并区分正反面朝上.

  // 翻转卡片
    public void flipCard(View view) {
        // 正面朝上
        if (!mIsShowBack) {
            mRightOutSet.setTarget(mFlCardFront);
            mLeftInSet.setTarget(mFlCardBack);
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = true;
        } else { // 背面朝上
            mRightOutSet.setTarget(mFlCardBack);
            mLeftInSet.setTarget(mFlCardFront);
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = false;
        }
    }