Android自定义View实现3D翻转效果

目录

效果展示

关键知识点

这个3D翻转效果的核心其实就是Rotate3DAnimation这个自定义的Animation类

public class Rotate3DAnimation extends Animation {
    private int mCenterX,mCenterY;
    private Camera mCamera;
    private float mFromDegrees,mToDegrees;
    private AnimationUpdateListener updateListener;
    private int mWidth;

    public AnimationUpdateListener getUpdateListener() {
        return updateListener;
    }

    public void setUpdateListener(AnimationUpdateListener updateListener) {
        this.updateListener = updateListener;
    }

    public Rotate3DAnimation(float mFromDegrees, float mToDegrees) {
        this.mFromDegrees = mFromDegrees;
        this.mToDegrees = mToDegrees;
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mWidth = width;
        mCenterX = width / 2;
        mCenterY = height / 2;
        mCamera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float degress = mFromDegrees + (interpolatedTime *  (mToDegrees - mFromDegrees));

        if(updateListener != null){
            updateListener.onProgressUpdate(interpolatedTime,degress);
        }
        Matrix matrix = t.getMatrix();
        mCamera.save();
        //让旋转90度的时候不显的太大
        if(interpolatedTime >= 0.5){
            mCamera.translate(0,0,(Math.abs(interpolatedTime - 1) / 0.5f) * mWidth / 2);
        }else {
            mCamera.translate(0,0,(interpolatedTime / 0.5f) * mWidth / 2);
        }
        //图形绕Y轴旋转
        mCamera.rotateY(degress);
        mCamera.getMatrix(matrix);
        //将原点移动到中心处
        matrix.preTranslate(-mCenterX,-mCenterY);
        matrix.postTranslate(mCenterX,mCenterY);
        mCamera.restore();

        super.applyTransformation(interpolatedTime, t);
    }

    /**
     * 动画更新的回调
     */
    public interface AnimationUpdateListener{
        /**
         * 进度回调
         */
        void onProgressUpdate(float progress,float value);
    }
}

我们这里主要是通过对android.graphics.Camera的操作来实现3D的变化，Camera的坐标系为三维左手坐标系，因此我们可以通过操作它来实现一些3D的效果

接下来我对各段代码进行详细说明。

下面这段代码是为了防止当图像旋转到90度的时候，图像的侧面刚好朝着我们导致看起来过大的问题，因此我们需要将图像沿着Z轴移动一下，就相当于一辆车从你身后往前开你会感觉车越来越小一个道理。

 //让旋转90度的时候不显的太大
        if(interpolatedTime >= 0.5){
            mCamera.translate(0,0,(Math.abs(interpolatedTime - 1) / 0.5f) * mWidth / 2);
        }else {
            mCamera.translate(0,0,(interpolatedTime / 0.5f) * mWidth / 2);
        }

不使用此段代码 使用此段代码后

下面这段代码是实现了图像旋转

//图形绕Y轴旋转
        mCamera.rotateY(degress);

下面这段代码是为了将原点移动到图像的中心点

 //将原点移动到中心处
        matrix.preTranslate(-mCenterX,-mCenterY);
        matrix.postTranslate(mCenterX,mCenterY);

如果不将图像移动到中心点则图像会沿着图像的左边旋转如下

这里还有一点要注意的是，我们需要将旋转后展示的页面（效果图的反面）提前先反转，这样在旋转后展示反面的时候就不会出现展示镜像的问题了，这里我通过继承FrameLayout并在dispatchDraw增加如下逻辑来实现的

@Override
    protected void dispatchDraw(Canvas canvas) {
        //将整个页面水平翻转，目的是为了抵消外布局翻转后的左右倒置现象
        mCamera.save();
        canvas.save();
        //镜像反转
        mCamera.rotateY(180);
        Matrix matrix = new Matrix();
        mCamera.getMatrix(matrix);
        matrix.preTranslate(-getWidth()/2,-getHeight()/2);
        matrix.postTranslate(getWidth()/2,getHeight()/2);
        canvas.setMatrix(matrix);
        mCamera.restore();
        super.dispatchDraw(canvas);
        canvas.restore();
    }

3D翻转控件的使用方法

Rotate3DLayout内必需包含DefaultLayout（默认展示的页面）和ReverseLayout（翻转后展示的页面），然后以在DefaultLayout和ReverseLayout中进行自己的布局即可

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

    <Button
        android:id="@+id/bt_rotate"
        android:text="3D旋转"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <com.example.rotate3dlayout.widget.Rotate3DLayout
        android:id="@+id/rl_rotate"
        android:background="@drawable/shape_bg"
        android:padding="10dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:layout_width="300dp"
        android:layout_height="400dp">
        <com.example.rotate3dlayout.widget.DefaultLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:orientation="vertical"
                android:layout_gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="我是正面"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <Button
                    android:text="我是正面"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <EditText
                    android:hint="我是正面"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </com.example.rotate3dlayout.widget.DefaultLayout>
        <com.example.rotate3dlayout.widget.ReverseLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <LinearLayout
                android:orientation="vertical"
                android:layout_gravity="center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:text="我是反面"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <Button
                    android:text="我是反面"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <EditText
                    android:hint="我是反面"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </com.example.rotate3dlayout.widget.ReverseLayout>
    </com.example.rotate3dlayout.widget.Rotate3DLayout>
</LinearLayout>

通过rotate3D方法即可实现翻转

public class MainActivity extends AppCompatActivity {
    private Button btRotate;
    private Rotate3DLayout rlRotate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btRotate = (Button) findViewById(R.id.bt_rotate);
        rlRotate = (Rotate3DLayout) findViewById(R.id.rl_rotate);
        //点击后翻转
        btRotate.setOnClickListener(v->rlRotate.rotate3D());
    }
}

案例源码

https://gitee.com/itfitness/rotate3d-layout