前段时间在公司做了一个模块,不使用第三方动画效果类,直接通过Canvas 进行图像的绘制,并通过Thread实现动画的效果
该模块主要是实现车辆运行时候的道路运行效果,在进行实施前做了一个相关的Demo
在Demo中主要实现的是道路的直线行驶的显示,和拐弯时候的图像变化
对于该项目准备分两篇进行描述
这篇就主要内容是针对道路的直线行驶,我的思路是在路中间进行虚线的绘制(虚线可用多个长条形的矩形拼接而成),通过虚线的移动来模拟道路的移动
废话少说上代码(比较早期时候的代码,笔者也懒得规范,请多见谅)
首先建立一个类LineView 继承View
public class LineView extends View {
private int a = 0;
private int b = -600;
private int c = 600;
private boolean isRun;
public LineView(Context context){
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint1 = new Paint();
paint1.setColor(Color.BLACK);
paint1.setStrokeWidth((float) 3.0);
canvas.drawLine(50, 0, 50, 1300, paint1);
canvas.drawLine(600, 0, 600, 1300, paint1);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRect(303, b, 333, b+200, paint);
canvas.drawRect(303, b+300, 333, b+500, paint);
canvas.drawRect(303, a, 333, a+200, paint);
canvas.drawRect(303, a+300, 333, a+500, paint);
canvas.drawRect(303, c, 333, c+200, paint);
canvas.drawRect(303, c+300, 333, c+500,paint);
}
public void moveView(){
if(isRun == false ){
isRun = true;
}
else if(isRun==true){
isRun = false;
}
new Thread(moveThread).start();
}
private final Runnable moveThread = new Runnable() {
@Override
public void run() {
a = 0;
b = -600;
c = 600;
while(isRun = true){
a+=5;
b+=5;
c+=5;
if(c>=1200){
c=-600;
}
if(b>=1200){
b=-600;
}
if(a>=1200){
a = -600;
}
try {
Thread.sleep(30);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
postInvalidate();
}
}
};
}
部分代码的解释:
其中私有变量表示为第一个矩形的上边的横坐标,b与c分别表示两个最高和最低被隐藏的矩形的横坐标,如右图(有图便于理解)
boolean型参数用于判断该图是否在运动
在重写的onDraw()方法中
创建一个Paint对象用于绘制两旁的道路,并定义其属性,都是比较简单的方法,这里就不逐一介绍了
drawLine()方法中的参数说明
canvas.drawLine(startX, startY, stopX, stopY, paint);
分别表示起始的横坐标,纵坐标,线终止的横纵坐标,并将之前定义好的Paint对象传入到该方法中
同样的,定义一个Paint变量用于绘制矩形
绘制矩形使用drawRect()方法,该方法中的参数说明:
canvas.drawRect(left, top, right, bottom, paint);
分别代表左上右下的坐标,并传入一个Paint对象
线程moveThread的解释:
线程启动后把图像置于默认的位置,并且当状态为true时,开始移动View
即除了两旁的道路,所有的图像都开始向下移动,以模拟开车时道路的效果。
并且这里有个精妙的设计——通过判断语句,辨别矩形是否移动到低端看不见的位置,如果达到该位置,又会将其移动到View的最顶端,就是说通过六个方块的不断移动,形成道路的移动效果。
并且将时间设置为30ms更新一次,并且通过postInvalidate()方法将界面进行刷新。