Android特效--粒子效果之雨

1. 单个雨点的行为

2. 完善雨点的行为和构造下雨场景

3. 在XML中定义可以控制下雨的属性

------------------------------------------------------

1. 单个雨点的行为： 一条线段在运动

起始点：startX ， startY;

终止点：stopX， stopY;



自定义View的框架类

public abstract class BaseView extends View {

Thread thread;

public BaseView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public BaseView(Context context) {
super(context);
}

@Override
final protected void onDraw(Canvas canvas) {
//禁止子类覆盖，用final
if(thread == null ) {
thread = new MyThread();
thread.start();
} else{
drawSub(canvas);
}
}

protected abstract void logic();
protected abstract void drawSub(Canvas canvas);

@Override
final protected void onDetachedFromWindow() {
// 离开屏幕时结束
//onDetachedFromWindow在销毁资源（既销毁view）之后调用
running = false;
super.onDetachedFromWindow();
}
private boolean running = true;
class MyThread extends Thread {
@Override
public void run() {
while(running) {
logic();
postInvalidate(); //线程中更新绘制，重新调用onDraw方法
try {
Thread.sleep(50); //速度太快肉眼看不到，要睡眠
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}

}

自定义单个雨点RainView

public class RainView extends BaseView {

private float startX = 0;
private float startY = 0;  // Start Point
private float stopX = 0;
private float stopY = 0;  // Stop Point
private float sizeX = 0;
private float sizeY = 0;
private Paint paint;

public RainView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public RainView(Context context, AttributeSet attrs) {
super(context, attrs);
sizeX = 10;
sizeY = 30;
//单个雨点的形状，用线段表示
startX = 100;
startY = 0;
stopX = startX + sizeX;
stopY = startY + sizeY;

paint = new Paint();
paint.setColor(0xffffffff);
}

@Override
protected void logic() {
// 让雨点运动
float opt = 0.3f;
startX += sizeX * opt;
stopX += sizeX * opt;
startY += sizeY * opt;
stopY += sizeY * opt;

// 雨点出了屏幕的时候让它回到起始点
if(startY > getHeight() || startX > getWidth()){
startX = 100;
startY = 0;
stopX = startX + sizeX;
stopY = startY + sizeY;
}
}

@Override
protected void drawSub(Canvas canvas) {
// drawSub 完成绘制操作
canvas.drawLine(startX, startY, stopX, stopY, paint);
}

}

在布局文件中使用

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.carloz.raineffect.MainActivity" >

<com.carloz.raineffect.v1.single_rain.RainView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff000000" />

</FrameLayout>

效果如下：



2. 完善雨点的行为和构造下雨场景



2.1 将雨点 效果和 行为 抽象出来

* 雨点的速度和长度是可变的

* 雨点的倾斜角度是可变的

* 雨点的位置是可变的

public class RainItem {

private int width;
private int height;

public RainItem(int width, int height) {
this.width = width;
this.height = height;
init();
}

private float startX = 0;
private float startY = 0; // Start Point
private float stopX = 0;
private float stopY = 0; // Stop Point
private float sizeX = 0;
private float sizeY = 0;
private Paint paint;
private float opt;
private Random random;

public void init() {
// TODO Auto-generated method stub
random = new Random();

sizeX = 1 + random.nextInt(10); // 随机改变雨点的角度
sizeY = 1 + random.nextInt(20);
// 单个雨点的形状，用线段表示
startX = random.nextInt(this.width);
startY = random.nextInt(this.height); // 随机改变雨点的位置
stopX = startX + sizeX;
stopY = startY + sizeY;

paint = new Paint();
paint.setColor(0xffffffff);
}

public void draw(Canvas canvas) {
canvas.drawLine(startX, startY, stopX, stopY, paint);
}

public void move() {
// 让雨点运动
opt = 0.2f + random.nextFloat(); // 随机改变雨点的速度和长度
startX += sizeX * opt;
stopX += sizeX * opt;
startY += sizeY * opt;
stopY += sizeY * opt;

// 雨点出了屏幕的时候让它回到起始点
if (startY > this.height || startX > this.width) {
startX = random.nextInt(this.width);
startY = random.nextInt(this.height);
stopX = startX + sizeX;
stopY = startY + sizeY;
}
}

}

2.2 定义多个雨点

在 添加抽象 BaseView 方法： protected abstract void init();

class MyThread extends Thread {
@Override
public void run() {
init();
while(running) {
logic();
postInvalidate(); //线程中更新绘制，重新调用onDraw方法
try {
Thread.sleep(50); //速度太快肉眼看不到，要睡眠
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}

public class RainView extends BaseView {

ArrayList<RainItem> rainList = new ArrayList<RainItem>();
int size = 80;

public RainView(Context context) {
super(context);
}

public RainView(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
protected void init() {
// TODO Auto-generated method stub
for (int i = 0; i < size; i++) {
RainItem item = new RainItem(getWidth(), getHeight());
rainList.add(item);
}
}

@Override
protected void logic() {
for (RainItem item : rainList) {
item.move();
}
}

@Override
protected void drawSub(Canvas canvas) {
// drawSub 完成绘制操作
for (RainItem item : rainList) {
item.draw(canvas);
}
}

}

效果如下：



3. 在XML中定义可以控制下雨的属性