SurfaceView與Canvas的結合實現簡單的圖形繪製與動畫效果

   SurfaceView是Android中的經典，它能實現二維動畫所須要的全部功能，喜歡動畫的朋友們能夠深刻學習，今天這一篇咱們就先進入一個開頭，初步瞭解SurfaceView的動畫效果。

1.一個簡單的小例子：

（1）MySurfaceView.java

package com.example.l0904_surfaceview;
/**
 * 使用SurfaceView與Canvas的結合完成
 * 簡單的動畫效果
 */
import java.util.Timer;
import java.util.TimerTask;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
//繼承SurfaceView父類並實現SurfaceView.Callback接口
public class MySurfaceView extends SurfaceView implements
        SurfaceHolder.Callback {
    //建立畫筆對象
    private Paint paint = new Paint();
    //定義計時器Timer定時器工具，用來在一個後臺線程計劃執行指定任務。它能夠計劃執行一個任務一次或反覆屢次。
    private Timer timer;
    //TimerTask一個抽象類，它的子類表明一個能夠被Timer計劃的任務
    private TimerTask task;
    //定義並初始化要繪的圖形的座標
    private float x = 0;
    private float y = 0;
    private float speedx = 50;
    private float speedy = 50;
    //定義並初始化座標移動的變化量
    private float addx = 2;
    private float addy = 2;
    /**
     * SurfaceView的構造方法
     * 在其中要初始化畫筆的顏色
     * @param context
     */
    public MySurfaceView(Context context) {
        super(context);
        paint.setColor(Color.BLUE);
        getHolder().addCallback(this);
    }
    /**
     * 繪圖方法，在其中完成具體的過程
     */
    public void draw() {
        // 鎖定畫布
        Canvas canvas = getHolder().lockCanvas();
        // 初始化畫布
        canvas.drawColor(Color.WHITE);
        //繪製圖形，這裏畫個矩形
        canvas.drawRect(x, y, speedx + x, speedy + y, paint);
        x += addx;
        y += addy;
        //下面是矩形的移動路徑
        if (x < 0) {
            //若是圖形左邊界座標超出左屏幕則向右移動
            addx = Math.abs(addx);
        }
        if (x > getWidth() - speedx) {
            //若是圖形右邊界座標超出屏幕的寬度則向左移動
            addx = -Math.abs(addx);
        }
        if (y < 0) {
            addy = Math.abs(addy);
        }
        if (y > getHeight() - speedy) {
            addy = -Math.abs(addy);
        }
        // 解鎖畫布
        getHolder().unlockCanvasAndPost(canvas);
    }
    /**
     * 啓動定時器後臺線程
     */
    public void startTimer() {
        timer = new Timer();
        task = new TimerTask() {
            @Override
            public void run() {
                //在定時器線程中調用繪圖方法
                draw();
            }
        };
        //設置定時器每隔0.1秒啓動這個task,實現動畫效果
        timer.schedule(task, 100, 100);
    }
    /**
     * 中止定時器線程的方法
     */
    public void stopTimer() {
        timer.cancel();
    }
    /**
     * 下面是必需要重寫的方法
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        //必定要在SurfaceView建立以後啓動線程
        startTimer();
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        //必定要在SurfaceView銷燬以前結束線程
        stopTimer();
    }
}

（2）MainActivity.java

package com.example.l0904_surfaceview;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //設置視圖
        setContentView(new MySurfaceView(this));
    }
}

（3）運行效果截圖：

這樣看效果不明顯，咱們能夠跟蹤一下圖形某一點的座標：

   .

   .

   .

2.進一步使用SurfaceView，完成屏幕的一個咱們熟知的屏幕保護效果——隨機氣泡

（1）MySurfaceView.java

package com.example.l0904_collection;
import java.util.Timer;
import java.util.TimerTask;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class MySurfaceView extends SurfaceView implements
        SurfaceHolder.Callback {
    private Paint paint = new Paint();
    private Timer timer;
    private TimerTask task;
    private Bolls bolls;
    public MySurfaceView(Context context) {
        super(context);
        paint.setColor(Color.YELLOW);
        getHolder().addCallback(this);
    }
    public void draw() {
        Canvas canvas = getHolder().lockCanvas();// 鎖定畫布
        // 繪製圖形
        canvas.drawColor(Color.WHITE);// 初始化畫布
        for(int i=0;i<20;i++){
            bolls=new Bolls(this);
            canvas.drawCircle(bolls.getCx(), bolls.getCy(), bolls.getRadius(), paint);
            bolls.draw();
        }
                                                 
        getHolder().unlockCanvasAndPost(canvas);// 解鎖畫布
    }
    public void startTimer() {
        timer = new Timer();
        task = new TimerTask() {
            @Override
            public void run() {
                draw();
            }
        };
        timer.schedule(task, 100, 100);
    }
    public void stopTimer() {
        timer.cancel();
    }
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        startTimer();
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        stopTimer();
    }
}

（2）Bolls.java

package com.example.l0904_collection;
public class Bolls {
    private float cx;
    private float cy;
    private float radius;
    private int addx;
    private int addy;
    private int addRadius;
    MySurfaceView view;
                                      
    public Bolls(MySurfaceView view){
        this.view=view;
        cx=(float) (Math.random()*300);
        cy=(float) (Math.random()*450);
        radius=(float) (Math.random()*30);
        addx=(int) (Math.random()*10);
        addy=(int) (Math.random()*10);
        addRadius=(int) (Math.random()*10);
    }
                                      
    public float getCx() {
        return cx;
    }
    public void setCx(float cx) {
        this.cx = cx;
    }
    public float getCy() {
        return cy;
    }
    public void setCy(float cy) {
        this.cy = cy;
    }
    public float getRadius() {
        return radius;
    }
    public void setRadius(float radius) {
        this.radius = radius;
    }
    public void draw(){
        cx += addx;
        cy += addy;
        radius+=addRadius;
        if (cx < radius) {
            addx = Math.abs(addx);
        }
        if (cx > view.getWidth() - radius) {
            addx = -Math.abs(addx);
        }
        if (cy < radius) {
            addy = Math.abs(addy);
        }
        if (cy > view.getHeight() -radius) {
            addy = -Math.abs(addy);
        }
    }
}

（3）MainActivity.java

package com.example.l0904_collection;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MySurfaceView(this));
    }
}

(4)運行效果