Camera实现3D效果

android.graphics.Camera:3D开发
官方介绍

A camera instance can be used to compute 3D transformations and generate a matrix that can be applied, for instance, on aCanvas。

一个照相机实例可以被用于计算3D变换，生成一个可以被使用的Matrix矩阵，一个实例，用在画布上。

Camera内部机制实际上还是opengl，不过大大简化了使用。

纵向 3D 整体滚动效果

核心代码

private void drawWhole3D(Canvas canvas) {
        canvas.save();
        Bitmap currWholeBitmap = bitmapList.get(currIndex);
        Bitmap nextWholeBitmap = bitmapList.get(nextIndex);
        if(direction == 1){//纵向
            camera.save();
            camera.rotateX(-rotateDegree);
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewHeight/2,0);
            //下面的view绕着自己的top旋转，转完之后显示要往下平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(currWholeBitmap,matrix,paint);

            camera.save();
            //第二张图片旋转
            camera.rotateX(90-rotateDegree);
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth/2,-viewHeight);
            //下面的view绕着自己的Bottom旋转，转完之后显示要往上平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(nextWholeBitmap,matrix,paint);

        }else {//横向

        }
        canvas.restore();
    }

分析动画

横向3D整体翻滚

核心代码

private void drawWhole3D(Canvas canvas) {
        canvas.save();
        Bitmap currWholeBitmap = bitmapList.get(currIndex);
        Bitmap nextWholeBitmap = bitmapList.get(nextIndex);
        if(direction == 1){//纵向
            camera.save();
            camera.rotateX(-rotateDegree);
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth/2,0);
            //下面的view绕着自己的top旋转，转完之后显示要往下平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(currWholeBitmap,matrix,paint);

            camera.save();
            //第二张图片旋转
            camera.rotateX(90-rotateDegree);
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth/2,-viewHeight);
            //下面的view绕着自己的Bottom旋转，转完之后显示要往上平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(nextWholeBitmap,matrix,paint);

        }else {//横向
            camera.save();
            camera.rotateY(rotateDegree);
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(0,-viewHeight/2);
            matrix.postTranslate(axisX,viewHeight/2);
            canvas.drawBitmap(currWholeBitmap,matrix,paint);

            camera.save();
            //第二张图片旋转
            camera.rotateY(-(90-rotateDegree));
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth,-viewHeight/2);
            matrix.postTranslate(axisX,viewHeight/2);
            canvas.drawBitmap(nextWholeBitmap,matrix,paint);
        }
        canvas.restore();
    }

动画分析 和纵向一样 只不过横向 是绕Y轴旋转

各模块依次滚动

核心原理和上面一样 这里对图片进行了分割处理 后面附上完整的代码

百叶窗效果

尾部逐渐分离再合并效果

整体翻滚2D效果

下面附上源码

activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shap_bg"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp">
        <com.twy.sqlitehelper.view.Camera3DView
            android:id="@+id/cv_1"
            android:layout_width="200dp"
            android:layout_height="200dp"/>
    </FrameLayout>

    <SeekBar
        android:id="@+id/atdv_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private Bitmap bitmap1;
    private Bitmap bitmap2;
    private Camera3DView camera3DView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        camera3DView = findViewById(R.id.cv_1);
        SeekBar seekBar = findViewById(R.id.atdv_seek_bar);
        seekBar.setMax(100);//0 - 100
        seekBar.setOnSeekBarChangeListener(onSeekBarChangeListener);
        bitmap1 = BitmapFactory.decodeResource(getResources(), R.mipmap.aa);
        bitmap2 = BitmapFactory.decodeResource(getResources(), R.mipmap.bb);
        List<Bitmap> list = new ArrayList<>();
        list.add(bitmap1);
        list.add(bitmap2);

        //整体翻滚2D
        /*camera3DView.setRollDirection(Camera3DView.Orientation.Horizontal);
        camera3DView.setRollMode(Camera3DView.RollMode.Roll2D);*/
        //整体翻滚3D
        /*camera3DView.setRollDirection(2);
        camera3DView.setRollMode(Camera3DView.RollMode.Whole3D);*/


        //各模块依次滚动
        /*camera3DView.setRollDirection(Camera3DView.Orientation.Horizontal);
        camera3DView.setRollMode(Camera3DView.RollMode.RollInTurn);
        camera3DView.setPartNumber(10);//设置分割数量*/

        //百叶窗
        /*camera3DView.setRollDirection(Camera3DView.Orientation.Horizontal);
        camera3DView.setRollMode(Camera3DView.RollMode.Jalousie);
        camera3DView.setPartNumber(10);*/

        //尾部逐渐分离再合并效果
        camera3DView.setRollDirection(Camera3DView.Orientation.Horizontal);
        camera3DView.setRollMode(Camera3DView.RollMode.SepartConbine);
        camera3DView.setPartNumber(10);


        camera3DView.addAllBitmap(list);
    }
    SeekBar.OnSeekBarChangeListener onSeekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            camera3DView.setRotateDegree(progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
        }
    };
}

Camera3DView.java

package com.twy.sqlitehelper.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Camera;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Author by twy, Email [email protected], Date on 2019/5/23.
 * PS: Not easy to write code, please indicate.
 */
public class Camera3DView extends View {
    private Context context;
    private Camera camera;
    private Matrix matrix;
    private List<Bitmap> bitmapList;
    private Bitmap[][] bitmaps;
    private int partNumber = 5;
    private Orientation direction = Orientation.Horizontal;

    private float averageWidth,averageHeight;
    private float viewWidth,viewHeight;
    private int preIndex = 0, currIndex = 0, nextIndex = 0;
    private float rotateDegree = 0;

    //X方向旋转轴   Y方向旋转轴
    private float axisX = 0, axisY = 0;

    //滚动模式
    private RollMode rollMode = RollMode.Whole3D;
    private Paint paint;


    //滚动模式
    public enum RollMode {
        //3D整体滚动  尾部逐渐分离再合并   各模块依次滚动  百叶窗
        Roll2D,Whole3D, SepartConbine, RollInTurn, Jalousie
    }

    public enum Orientation{
        //水平方向  垂直方向
        Horizontal,Vertical
    }

    public Camera3DView(Context context) {
        super(context);
        init(context);
    }

    public Camera3DView(Context context,AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public Camera3DView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public Camera3DView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }

    private void init(Context context) {
        this.context = context;
        camera = new Camera();
        matrix = new Matrix();
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        bitmapList = new ArrayList<>();
    }

    public void addAllBitmap(List<Bitmap> bitmaps){
        bitmapList.addAll(bitmaps);
        invalidate();
    }

    public void setPartNumber(int partNumber){
        this.partNumber = partNumber;
    }

    /**
     *
     * @param rotateDegree 0至100
     */
    public void setRotateDegree(float rotateDegree){
        switch (rollMode){
            case Whole3D:
            case Jalousie:
            case SepartConbine:
            case Roll2D:
                this.rotateDegree = rotateDegree/100*(rollMode==RollMode.Jalousie?180:90);
                if(Orientation.Vertical==direction){
                    //Y方向旋转轴
                    //百叶窗旋转180度，其他旋转90度
                    axisY = this.rotateDegree/(float)(rollMode==RollMode.Jalousie?180:90)*viewHeight;

                }else {
                    //X方向旋转轴
                    axisX = this.rotateDegree/(float)(rollMode==RollMode.Jalousie?180:90)*viewWidth;
                }
                break;
            case RollInTurn:
                this.rotateDegree = rotateDegree/100*(30*(partNumber-1)+(rollMode==RollMode.Jalousie?180:90));
                break;
        }

        invalidate();
    }

    public void setRollDirection(Orientation direction) {
        this.direction = direction;
    }
    public void setRollMode(RollMode rollMode){
        this.rollMode = rollMode;
    }

    //对图片进行切割
    private void initBitmap() {
        initIndex();
        switch (rollMode){
            case RollInTurn:
            case Jalousie:
            case SepartConbine:
                bitmaps = new Bitmap[bitmapList.size()][partNumber];
                averageWidth = viewWidth/partNumber;
                averageHeight = viewHeight/partNumber;
                Rect rect;
                Bitmap partBitmap;
                for(int i = 0;i<bitmapList.size();i++){
                    for(int j = 0;j<partNumber;j++){
                        if(Orientation.Vertical==direction){//纵向切割
                            rect = new Rect((int)(j*averageWidth),0,(int)((j+1)*averageWidth),(int) viewHeight);
                            partBitmap = getPartBitmap(bitmapList.get(i),rect.left,0,rect.width(),rect.height());
                        }else {//横向切割
                            rect = new Rect(0,(int)(j*averageHeight),(int) viewWidth,(int)((j+1)*averageHeight));
                            partBitmap = getPartBitmap(bitmapList.get(i),0,rect.top,rect.width(),rect.height());
                        }
                        bitmaps[i][j] = partBitmap;
                    }
                }
                break;
        }
    }

    private void initIndex() {
        int listSize = bitmapList.size();
        nextIndex = currIndex +1;
        preIndex = currIndex -1;
        if(nextIndex > listSize -1){
            nextIndex = 0;//当到了边界，再循环变换
        }
        if(preIndex < 0){
            preIndex = listSize -1;
        }
    }

    private Bitmap getPartBitmap(Bitmap bitmap,int left,int top,int width,int height){
        return Bitmap.createBitmap(bitmap,left,top,width,height);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewWidth = getMeasuredWidth();
        viewHeight = getMeasuredHeight();
        if (viewWidth != 0 && viewHeight != 0) {
            //缩放处理bitmap
            for (int i = 0; i < bitmapList.size(); i++) {
                bitmapList.set(i, scaleBitmap(bitmapList.get(i)));
            }
            initBitmap();
        }
    }

    //根据给定的宽和高进行拉伸
    private Bitmap scaleBitmap(Bitmap origin) {
        if (origin == null) {
            return null;
        }
        int height = origin.getHeight();
        int width = origin.getWidth();
        float scaleWidth = viewWidth / width;
        float scaleHeight = viewHeight / height;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);// 使用后乘
        Bitmap newBM = Bitmap.createBitmap(origin, 0, 0, width, height, matrix, false);
        return newBM;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (rollMode){
            case Roll2D:
                drawWhole3D(canvas,true);
                break;
            case Whole3D:
                drawWhole3D(canvas,false);
                break;
            case RollInTurn:
                drawRollInTurn(canvas);
                break;
            case Jalousie:
                drawJalousie(canvas);
                break;
            case SepartConbine:
                drawSepartConbine(canvas);
                break;
        }
    }

    /**
     * 整体翻滚
     * @param canvas
     * @param draw2D true 2D效果 false 3D效果
     */
    private void drawWhole3D(Canvas canvas,boolean draw2D) {
        canvas.save();
        Bitmap currWholeBitmap = bitmapList.get(currIndex);
        Bitmap nextWholeBitmap = bitmapList.get(nextIndex);
        if(Orientation.Vertical==direction){//纵向
            camera.save();
            if(draw2D){
                camera.rotateX(0);
            }else {
                camera.rotateX(-rotateDegree);
            }
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth/2,0);
            //下面的view绕着自己的top旋转，转完之后显示要往下平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(currWholeBitmap,matrix,paint);

            camera.save();
            //第二张图片旋转
            if(draw2D){
                camera.rotateX(0);
            }else {
                camera.rotateX(90-rotateDegree);
            }
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth/2,-viewHeight);
            //下面的view绕着自己的Bottom旋转，转完之后显示要往上平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(viewWidth/2,axisY);
            canvas.drawBitmap(nextWholeBitmap,matrix,paint);

        }else {//横向
            camera.save();
            if(draw2D){
                camera.rotateX(0);
            }else {
                camera.rotateY(rotateDegree);
            }
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(0,-viewHeight/2);
            //下面的view绕着自己的top旋转，转完之后显示要往下平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(axisX,viewHeight/2);
            canvas.drawBitmap(currWholeBitmap,matrix,paint);

            camera.save();
            //第二张图片旋转
            if(draw2D){
                camera.rotateX(0);
            }else {
                camera.rotateY(-(90-rotateDegree));
            }
            camera.getMatrix(matrix);
            camera.restore();
            matrix.preTranslate(-viewWidth,-viewHeight/2);
            //下面的view绕着自己的Bottom旋转，转完之后显示要往上平移（rotateDegree/90)*viewWidth;
            matrix.postTranslate(axisX,viewHeight/2);
            canvas.drawBitmap(nextWholeBitmap,matrix,paint);
        }
        canvas.restore();
    }

    /**
     * 依次翻滚
     *
     * @param canvas
     */
    private void drawRollInTurn(Canvas canvas) {
        for (int i = 0; i < partNumber; i++) {
            Bitmap currBitmap = bitmaps[currIndex][i];
            Bitmap nextBitmap = bitmaps[nextIndex][i];

            float tDegree = rotateDegree - i * 30;
            if (tDegree < 0)
                tDegree = 0;
            if (tDegree > 90)
                tDegree = 90;


            canvas.save();
            if (Orientation.Vertical==direction) {
                float tAxisY = tDegree / 90f * viewHeight;
                if (tAxisY > viewHeight)
                    tAxisY = viewHeight;
                if (tAxisY < 0)
                    tAxisY = 0;

                camera.save();
                camera.rotateX(-tDegree);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-currBitmap.getWidth(), 0);
                matrix.postTranslate(currBitmap.getWidth() + i * averageWidth, tAxisY);
                canvas.drawBitmap(currBitmap, matrix, paint);

                camera.save();
                camera.rotateX((90 - tDegree));
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight());
                matrix.postTranslate(nextBitmap.getWidth() + i * averageWidth, tAxisY);
                canvas.drawBitmap(nextBitmap, matrix, paint);

            } else {
                float tAxisX = tDegree / 90f * viewWidth;
                if (tAxisX > viewWidth)
                    tAxisX = viewWidth;
                if (tAxisX < 0)
                    tAxisX = 0;
                camera.save();
                camera.rotateY(tDegree);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(0, -currBitmap.getHeight() / 2);
                matrix.postTranslate(tAxisX, currBitmap.getHeight() / 2 + i * averageHeight);
                canvas.drawBitmap(currBitmap, matrix, paint);

                //
                camera.save();
                camera.rotateY(tDegree - 90);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight() / 2);
                matrix.postTranslate(tAxisX, nextBitmap.getHeight() / 2 + i * averageHeight);
                canvas.drawBitmap(nextBitmap, matrix, paint);
            }
            canvas.restore();
        }
    }

    /**
     * 百叶窗翻页
     *
     * @param canvas
     */
    private void drawJalousie(Canvas canvas) {
        for (int i = 0; i < partNumber; i++) {
            Bitmap currBitmap = bitmaps[currIndex][i];
            Bitmap nextBitmap = bitmaps[nextIndex][i];

            canvas.save();
            //注意 百叶窗的翻转方向和其他模式是相反的  横向的时候纵翻  纵向的时候横翻
            if (Orientation.Vertical==direction) {

                if (rotateDegree < 90) {
                    camera.save();
                    camera.rotateY(rotateDegree);
                    camera.getMatrix(matrix);
                    camera.restore();

                    matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight() / 2);
                    matrix.postTranslate(currBitmap.getWidth() / 2+ i * averageWidth, currBitmap.getHeight() / 2 );
                    canvas.drawBitmap(currBitmap, matrix, paint);
                } else {
                    camera.save();
                    camera.rotateY(180 - rotateDegree);
                    camera.getMatrix(matrix);
                    camera.restore();
                    //前乘矩阵---先平移矩阵，再进行变换
                    matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight() / 2);
                    //变换完之后，再平移
                    matrix.postTranslate(nextBitmap.getWidth() / 2+ i * averageWidth, nextBitmap.getHeight() / 2);
                    canvas.drawBitmap(nextBitmap, matrix, paint);
                }


            } else {
                if (rotateDegree < 90) {
                    camera.save();
                    camera.rotateX(rotateDegree);
                    camera.getMatrix(matrix);
                    camera.restore();

                    matrix.preTranslate(-currBitmap.getWidth() / 2, -currBitmap.getHeight() / 2);
                    matrix.postTranslate(currBitmap.getWidth() / 2, currBitmap.getHeight() / 2+i * averageHeight);
                    canvas.drawBitmap(currBitmap, matrix, paint);
                } else {
                    camera.save();
                    camera.rotateX(180 - rotateDegree);
                    camera.getMatrix(matrix);
                    camera.restore();

                    matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight() / 2);
                    matrix.postTranslate(nextBitmap.getWidth() / 2 , nextBitmap.getHeight() / 2+ i * averageHeight);
                    canvas.drawBitmap(nextBitmap, matrix, paint);
                }

            }
            canvas.restore();
        }
    }

    /**
     * 纵向  头部接合  尾部分离效果
     * degree 0->90 往下翻滚 或者 往右翻滚   90->0往上翻滚 或者往翻滚
     *
     * @param canvas
     */
    private void drawSepartConbine(Canvas canvas) {
        for (int i = 0; i < partNumber; i++) {
            Bitmap currBitmap = bitmaps[currIndex][i];
            Bitmap nextBitmap = bitmaps[nextIndex][i];

            canvas.save();
            if (Orientation.Vertical==direction) {

                camera.save();
                camera.rotateX(-rotateDegree);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-currBitmap.getWidth() / 2, 0);
                matrix.postTranslate(currBitmap.getWidth() / 2 + i * averageWidth, axisY);
                canvas.drawBitmap(currBitmap, matrix, paint);

                camera.save();
                camera.rotateX((90 - rotateDegree));
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-nextBitmap.getWidth() / 2, -nextBitmap.getHeight());
                matrix.postTranslate(nextBitmap.getWidth() / 2 + i * averageWidth, axisY);
                canvas.drawBitmap(nextBitmap, matrix, paint);

            } else {
                camera.save();
                camera.rotateY(rotateDegree);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(0, -currBitmap.getHeight() / 2);
                matrix.postTranslate(axisX, currBitmap.getHeight() / 2 + i * averageHeight);
                canvas.drawBitmap(currBitmap, matrix, paint);

                camera.save();
                camera.rotateY(rotateDegree - 90);
                camera.getMatrix(matrix);
                camera.restore();

                matrix.preTranslate(-nextBitmap.getWidth(), -nextBitmap.getHeight() / 2);
                matrix.postTranslate(axisX, nextBitmap.getHeight() / 2 + i * averageHeight);
                canvas.drawBitmap(nextBitmap, matrix, paint);
            }
            canvas.restore();
        }
    }

}