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)运行效果







本文出自 “MySpace” 博客，请务必保留此出处http://wangzhaoli.blog.51cto.com/7607113/1290355