Android 手把手进阶自定义View（四）- 三维变换

一、基础准备

---

本篇我们来学习一下自定义 View 中使用 Camera 来做三维变换，先看一下 自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix

 

二、Camera 介绍

 先来看看适用 Camera 时的三维坐标系结构：

camera 相当于在 z 轴有个照相机（下图中黄色圆圈就代表 camera），对视图进行投影，效果如下：

使用 camera.rotateX(float degree) 翻转后，效果如下：

  此时投影到屏幕上的效果是这样的：

可以看到投影后的图片不对称，这是因为 camera 只能位于 z 轴上而不能指定中心偏移。如果需要达到像折叠那样的对称效果，需要将 canvas 偏移，让偏移后的图片所在中心点落在 camera 所在的 z 轴上。偏移前：

再来看看偏移后：

 投影应用到 canvas 后再将 canvas 偏移回去，这样效果就是预期的了，效果如下图：

 另外，Camera 和 Canvas 一样也需要保存和恢复状态才能正常绘制，不然在界面刷新之后绘制就会出现问题。所以上面这张图完整的代码应该是这样的：

//如果你需要图形左右对称，需要配合上 Canvas.translate()，
//在三维旋转之前把绘制内容的中心点移动到原点，即旋转的轴心，然后在三维旋转后再把投影移动回来：

canvas.save();

camera.save(); // 保存 Camera 的状态
camera.rotateX(30); // 旋转 Camera 的三维空间
canvas.translate(centerX, centerY); // 旋转之后把投影移动回来
camera.applyToCanvas(canvas); // 把旋转投影到 Canvas
canvas.translate(-centerX, -centerY); // 旋转之前把绘制内容移动到轴心（原点）
camera.restore(); // 恢复 Camera 的状态

canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();

另外，setLocation(x , y , z) 是设置 camera 位置，默认值是(0, 0, -8) ，单位是英寸（1英寸 = 72像素），但是我们绘图都是用 dp，所以在不同 DPI 手机上绘制的像素大小不一致，导致 camera 投影在不同手机上效果不一样，所以需要对 camera 的位置做兼容适配，可以写这么一个工具类：

fun getZForCamera() : Float{
        //-8 的值可以根据实际需要效果进行调整
        return -8 * Resources.getSystem().displayMetrics.density
}

然后设置一下就可以在不同手机上显示效果一样了：

camera.setLocation(0, 0, Utils.getZForCamera());

 

三、Flipboard 红板报的翻页效果

我们看看 Flipboard 的动画效果图：

分析一下，首先第一步，如何只翻转图片的一部分呢？我们可以通过 canvas.clipRect 将图片切割成两部分绘制，两边分别做翻转效果。效果如下： 

 第二步，如何达到斜着翻转的效果呢？只需要在 canvas.clipRect 切割前进行 canvas.rotate 旋转，并在切割后旋转回来，效果如下：

第三步就是将左右区间旋转角度、翻转角度抽成属性做属性动画，效果图中的动画也可以分成三步：

1. 右部分逐渐翻起至45°
2. 左、右部分从0°逐渐旋转到270°
3. “上”部分（旋转前对应的是左部分）逐渐翻起至45°

到这里就把全过程分析完毕了，完整代码如下：

class RotateView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {

    val BITMAP_WIDTH = Utils.dp2px(200)

    var mCamera = Camera()
    var mBitmap: Bitmap
    var mPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    var mCenterPoint = PointF()//绘制图片的中心点

    var leftFlip = 0f
        set(value) {
            field = value
            invalidate()
        }
    var rightFlip = 0f
        set(value) {
            field = value
            invalidate()
        }
    var flipRotation = 0f
        set(value) {
            field = value
            invalidate()
        }

    init {
        mBitmap = Utils.decodeBitmap(resources, R.drawable.flip, BITMAP_WIDTH.toInt())
        mCamera.setLocation(0f, 0f, Utils.getZForCamera())

        //动画一：右边翻转
        val rightFlipAnimator = ObjectAnimator.ofFloat(this, "rightFlip", -45f)
        rightFlipAnimator.duration = 1000

        //动画二：旋转
        val flipRotationAnimator = ObjectAnimator.ofFloat(this, "flipRotation", 270f)
        flipRotationAnimator.duration = 1000

        //动画三：左边翻转
        val leftFlitAnimator = ObjectAnimator.ofFloat(this, "leftFlip", 45f)
        leftFlitAnimator.duration = 1000

        val animatorSet = AnimatorSet()
        animatorSet.playSequentially(rightFlipAnimator, flipRotationAnimator, leftFlitAnimator)
        animatorSet.startDelay = 1000
        animatorSet.start()
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mCenterPoint.x = width / 2f
        mCenterPoint.y = height / 2f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //绘制左边
        canvas.save()
        canvas.translate(mCenterPoint.x, mCenterPoint.y)
        canvas.rotate(-flipRotation)
        mCamera.save()
        mCamera.rotateY(leftFlip)
        mCamera.applyToCanvas(canvas)
        mCamera.restore()
        canvas.clipRect(-BITMAP_WIDTH.toInt(), -BITMAP_WIDTH.toInt(), 0, BITMAP_WIDTH.toInt())
        canvas.rotate(flipRotation)
        canvas.translate(-mCenterPoint.x, -mCenterPoint.y)
        canvas.drawBitmap(mBitmap, mCenterPoint.x - BITMAP_WIDTH / 2, mCenterPoint.y - BITMAP_WIDTH / 2, mPaint)
        canvas.restore()

        //绘制右边
        canvas.save()
        canvas.translate(mCenterPoint.x, mCenterPoint.y)
        canvas.rotate(-flipRotation)
        mCamera.save()
        mCamera.rotateY(rightFlip)
        mCamera.applyToCanvas(canvas)
        mCamera.restore()
        canvas.clipRect(0, BITMAP_WIDTH.toInt(), BITMAP_WIDTH.toInt(), -BITMAP_WIDTH.toInt())
        canvas.rotate(flipRotation)
        canvas.translate(-mCenterPoint.x, -mCenterPoint.y)
        canvas.drawBitmap(mBitmap, mCenterPoint.x - BITMAP_WIDTH / 2, mCenterPoint.y - BITMAP_WIDTH / 2, mPaint)
        canvas.restore()
    }
}

运行结果：