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()
    }
}

運行結果：