Camera实现3D效果

最新推荐文章于 2021-05-28 14:22:42 发布

原创

最新推荐文章于 2021-05-28 14:22:42 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用`android.graphics.Camera`来实现3D效果，通过计算3D变换矩阵并应用于Canvas，创建出不同的3D视觉体验。包括纵向和横向的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轴旋转

各模块依次滚动