如果想為自定義的UI控制元件新增動畫效果，會發現動畫相關的API是很有限的。那麼有沒有API可以直接向螢幕繪圖呢？答案是肯定的。Android提供了Canvas滿足這一要求。

在這個例子中，我們將以方塊在螢幕上彈跳為例分析如何使用Canvas類在螢幕上繪製圖形，併為其新增動畫效果。應用程式最終效果如下：

我們先需要了解Canvas類的基本概念：“我們可以把Canvas視為Surface的替身或者介面，圖形便是繪製在Surface上的。Canvas封裝了所有繪圖呼叫。通過Canvas，繪製到Surface上的內容首先儲存到與之關聯的Bitmap中，該Bitmap最終會呈現到視窗上。”

Activity程式碼如下：

package com.example.huangfei.hack;

import android.app.Activity;
import android.os.Bundle;
import android.view.Display;

public class MainActivity extends Activity {
    private DrawView mDrawView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //獲取螢幕的寬和高
 

        Display display = getWindowManager().getDefaultDisplay();
        mDrawView = new DrawView(this);
        mDrawView.width = display.getWidth();
        mDrawView.height = display.getHeight();

        //以DrawView作為Activity的內容檢視，DrawView佔據所有可用空間
        setContentView(mDrawView);
    }

}

DrawView類程式碼如下：

package com.example.huangfei.hack;

import android.content.Context;
import android.graphics.Canvas;
import android.view.View;

/**
 * 該類負責在螢幕上繪製一個方塊，並不斷更新方塊的位置
 */
public class DrawView extends View {
    private Rectangle mRectangle;
    public int width;
    public int height;

    public DrawView(Context context) {
        super(context);

        /**
         * 建立方塊物件。Rectangle類內部實現了將自身繪製到Canvas上的邏輯，並且已經包含了正確變換其位置
         * 的程式碼邏輯。
         */
        mRectangle = new Rectangle(context, this);
        mRectangle.setARGB(255, 255, 0, 0);
        mRectangle.setSpeedX(3);
        mRectangle.setSpeedY(3);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mRectangle.move();//變換方塊位置
        mRectangle.onDraw(canvas);//將方塊繪製到Canvas上

        /**
         *invalidate()方法強制重繪檢視。把該方法放在onDraw()的目的是為了在View繪製完自身後，可以立即重新
         * 呼叫onDraw()。換句話說，通過迴圈呼叫Rectangle的move()和onDraw()方法實現了一個動畫效果。
         */
        invalidate();
    }
}

Rectangle類程式碼如下：

package com.example.huangfei.hack;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.view.View;

/**
 * 建立一個方塊
 */
public class Rectangle extends View {
    private static final int MAX_SIZE = 40;//方塊距右端或底部的距離，一般為方塊的大小mRealSize
    private static final int ALPHA = 255;//畫筆的透明度

    private DrawView mDrawView;
    private Paint mInnerPaint;//畫筆
    private RectF mDrawFect;//矩形座標

    private float mCoordX;//方塊當前x軸位置
    private float mCoordY;//方塊當前Y軸位置
    private int mRealSize = 40;//方塊的大小
    private int mSpeedX = 3;//方塊x軸每次移動的距離
    private int mSpeedY = 3;//方塊軸每次移動的距離

    private boolean goRight = true;//是否向右移動
    private boolean goDown = true;//是否向下移動

    public Rectangle(Context context, DrawView drawView) {
        super(context);

        mDrawView = drawView;
        mInnerPaint = new Paint();
        mDrawFect = new RectF();

        //設定畫筆的預設顏色為紅色
        mInnerPaint.setARGB(ALPHA, 255, 0, 0);
        //處理畫筆的鋸齒
        mInnerPaint.setAntiAlias(true);
    }

    public void setARGB(int a, int r, int g, int b) {
        mInnerPaint.setARGB(a, r, g, b);
    }

    @Override
    public float getX() {
        return mCoordX;
    }

    @Override
    public void setX(float x) {
        mCoordX = x;
    }

    @Override
    public float getY() {
        return mCoordY;
    }

    @Override
    public void setY(float y) {
        mCoordY = y;
    }

    public int getSize() {
        return mRealSize;
    }

    public void setSize(int realSize) {
        mRealSize = realSize;
    }

    public int getSpeedX() {
        return mSpeedX;
    }

    public void setSpeedX(int speedX) {
        mSpeedX = speedX;
    }

    public int getSpeedY() {
        return mSpeedY;
    }

    public void setSpeedY(int speedY) {
        mSpeedY = speedY;
    }

    public void move() {
        moveTo(mSpeedX, mSpeedY);
    }

    private void moveTo(int goX, int goY){
        //判斷X軸方向的邊界
        if(mCoordX > mDrawView.width - MAX_SIZE){
            goRight = false;
        }
        if(mCoordX < 0){
            goRight = true;
        }

        //判斷Y軸方向的邊界
        if(mCoordY > mDrawView.height - MAX_SIZE){
            goDown = false;
        }
        if(mCoordY < 0){
            goDown = true;
        }

        //移動方塊
        if(goRight){
            mCoordX += goX;
        }else{
            mCoordX -= goX;
        }
        if(goDown){
            mCoordY += goY;
        }else{
            mCoordY -= goY;
        }
    }

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

        mDrawFect.set(mCoordX, mCoordY, mCoordX + mRealSize, mCoordY + mRealSize);
        canvas.drawRoundRect(mDrawFect, 0, 0, mInnerPaint);
    }
}

在onDraw()方法中通過呼叫invalidate()方法變換檢視的位置是實現自定義動畫的簡單方法。如果你想開發一款小遊戲，使用這個小技巧處理遊戲的主迴圈是一個簡單的方法。

程式碼地址