最近在看扔物線的 hencoder 自定義 view 系列，有個圖示翻頁旋轉效果很炫酷。自己思考加上看了位大神的思路，總算做出來了。（GIF 錄製的有點卡，真實效果可以自己執行檢視）

思路

整體由三個屬性動畫構成。首先把整個圖示平均分成兩部分，一部分先向上翻折（最開始的動畫）稱為 a 半邊；另一部分最後向上翻折（最後一個動畫）稱為 b 半邊。

第一個動畫：使用 camera 3d 動畫，將 a 半邊沿著 Y 軸反方向旋轉 45 度；
第二個動畫：使用 canvas 2d 動畫旋轉，將 “a 半邊的 3d 效果” 逆時針旋轉 270 度（就是我們看到的平面旋轉效果）；
第三個動畫：b 半邊沿著 Y 軸旋轉 45 度。

光是描述有點難形容，若是沒搞懂思路，只能通過程式碼一步一步走，慢慢推倒理解了。核心程式碼如下：

    /**
     * a半邊的動畫旋轉角度(第一個動畫 3d)
     */
    private int degreeY;
    /**
     * b半邊的動畫旋轉角度(第三個動畫 3d)
     */
    private int degreeNextY;
    /**
     * 畫布的動畫旋轉角度(第二個動畫 2d)
     */
    private int degreeZ;

    @Override
    protected void onDraw(Canvas canvas) {
        super
 
.onDraw(canvas);

        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;
        int x = centerX - bitmap.getWidth() / 2;
        int y = centerY - bitmap.getHeight() / 2;

        // a半邊的處理
        canvas.save();

        camera.save();
        canvas.translate(centerX, centerY);
        // 第一個動畫的3d旋轉
 

        camera.rotateY(degreeY);
        // 旋轉畫布
        canvas.rotate(degreeZ);
        // 此時圖示的正中心跟座標原點位置相同
        canvas.clipRect(0, -centerY, centerX, centerY);
        camera.applyToCanvas(canvas);
        // 記住畫布要旋轉回來
        canvas.rotate(-degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();

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

        // b半邊的處理
        canvas.save();

        camera.save();
        canvas.translate(centerX, centerY);
        // b半邊也要跟著旋轉（保持另外半邊不動）
        canvas.rotate(degreeZ);
        // 第三個動畫的 3d 旋轉
        camera.rotateY(degreeNextY);
        // 此時圖示的正中心跟座標原點位置相同
        canvas.clipRect(-centerX, -centerY, 0, centerY);
        camera.applyToCanvas(canvas);
        // 記住畫布要旋轉回來
        canvas.rotate(-degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();

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

詳細程式碼在我的 GitHub 上，歡迎大家 star。