Android 实现3D翻转动画效果

1. 运行效果
实际的效果比图片看起来要更加丝滑流畅,已验证过大部分的主流机型,即使机子本身比较卡顿,跑起来后也是非常丝滑流畅的,并已运用到实际的项目当中

test_3d.gif

2. 完整代码
代码很简单,两个属性动画,一个处理旋转,一个处理旋转时的缩放,硬件加速能有效提升动画体验

/**
     * 3D翻转动画
     *
     * @param rootView
     * @param view1
     * @param view2
     * @author QiuLong
     */
    public static void start3DRotateAnimator(final View rootView, final View view1, final View view2) {
        final float from = view1.getVisibility() == View.INVISIBLE ? 0 : 180;
        final float to = from == 0 ? 180 : 0;

        ValueAnimator rotateAnimator = ValueAnimator.ofFloat(from, to);
        rotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                if (value <= 90) {
                    if (view1.getVisibility() != View.INVISIBLE) {
                        view1.setVisibility(View.INVISIBLE);
                        view2.setVisibility(View.VISIBLE);
                    }
                    rootView.setRotationY(value);
                } else {
                    if (view1.getVisibility() != View.VISIBLE) {
                        view1.setVisibility(View.VISIBLE);
                        view2.setVisibility(View.INVISIBLE);
                    }
                    rootView.setRotationY(value - 180);
                }
            }
        });

        ValueAnimator tzAnimator = ValueAnimator.ofFloat(1, 0.6f, 1);
        tzAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                rootView.setScaleX(value);
                rootView.setScaleY(value);
            }
        });

        AnimatorSet set = new AnimatorSet();
        set.setDuration(600);
        set.playTogether(rotateAnimator, tzAnimator);
        set.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animation) {
                // 开启硬件加速
                rootView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

                // 这里做页面翻转前的操作
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                // 关闭硬件加速
                rootView.setLayerType(View.LAYER_TYPE_NONE, null);

                // 这里做页面翻转后的操作
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        set.start();
    }

3. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/root_view"
        android:layout_width="240dp"
        android:layout_height="480dp">

        <TextView
            android:id="@+id/root_view_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#6200EE"
            android:gravity="center"
            android:text="2"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:visibility="invisible" />

        <TextView
            android:id="@+id/root_view_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#03DAC5"
            android:gravity="center"
            android:text="1"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:visibility="visible" />

    </FrameLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClickRotate"
        android:text="翻转" />

</LinearLayout>

4. 使用

AnimationHelper.start3DRotateAnimator(rootView, rootView2, rootView1);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容