Android粒子进度条

之前在哪里看见过一个H5迸溅粒子的进度条，觉得挺好玩的粗略研究了下它js的实现。今天试着用Android Canvas来实现看看效果，先上张图:

Demo的Git地址:https://github.com/qtstsq55/SparkPrograssBar.git
因为比较简单，大概写了下注释，不涉及触摸操作和其他组件。大体思路就是重载View的OnDraw方法而已，摘要下重点的部分。主Activity:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.example.sparkview.SparkController;
import com.example.sparkview.SparkPrograssBar;

public class MainActivity extends AppCompatActivity {

private SparkPrograssBar sparkPrograssbar;
private SparkController sparkController;
private Button btn_start,btn_end,btn_reset;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initEvents();
initSparkPrograssBar();
}

private void initView(){
btn_end = (Button) findViewById(R.id.btn_end);
btn_start = (Button) findViewById(R.id.btn_start);
btn_reset = (Button) findViewById(R.id.btn_reset);
sparkPrograssbar = (SparkPrograssBar) findViewById(R.id.sparkPrograssbar);
}

private void initEvents(){
btn_start.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startPrograssBar(100);
}
});

btn_end.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
stopPrograssBar();
}
});

btn_reset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
resetPrograssBar();
}
});
}

private void initSparkPrograssBar(){
sparkController = new SparkController();
sparkController.setStartX(50);//组件左上角X坐标
sparkController.setStartY(45);//组件右上角坐标
sparkController.setStartColor(0f);//进度条初始颜色(红色)，HSV颜色模式
sparkController.setEndColor(120f);//进度条结束颜色(绿色)，HSV颜色模式
sparkController.setCurColor(sparkController.getStartColor());//进度条当前颜色,可有可无
sparkController.setWidth(620);//进度条宽度
sparkController.setHeight(10);//进度条高度
sparkController.setSpeed(1);//进度步长
sparkController.setDelay(30);//刷新频率
sparkController.setSparkCallBack(new SparkController.SparkCallBack() {
@Override
public void onStartPre() {
//开始前回调
}

@Override
public void onEnd() {
//结束后回调
}

@Override
public void onUpdate(float prograss) {
//更新回调
}
});
sparkPrograssbar.setSparkController(sparkController);
}

private void startPrograssBar(int prograss){
sparkPrograssbar.slidSprk(prograss);
}

private void stopPrograssBar(){
sparkPrograssbar.stopSlidSpak();
}

private void resetPrograssBar(){
sparkController.getSparks().clear();
sparkController.setCurPrograss(0);
startPrograssBar(100);
}

}

public class SparkPrograssBar extends View {

private SparkController sparkController;
private Paint paint;
private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
if(msg.what == SparkController.INVALITE) {
sparkController.setCurPrograss(sparkController.getCurPrograss() + sparkController.getSpeed());
postInvalidate();
if (!sparkController.getSparks().isEmpty()) {
//30ms刷新一次
sendEmptyMessageDelayed(SparkController.INVALITE, sparkController.getDelay());
}
}
}
};

public SparkPrograssBar(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(sparkController == null) throw new IllegalStateException("SparkController can not null");
sparkController.setBorderWidth(getMeasuredWidth());
sparkController.setBorderHeight(getMeasuredHeight());
}

@Override
protected void onDraw(Canvas canvas) {
if(sparkController == null) throw new IllegalStateException("SparkController can not null");
paint.setStyle(Paint.Style.FILL);
float prograss = ((float) sparkController.getCurPrograss() / sparkController.getPrograss());
float currentX = sparkController.getStartX() + (prograss * sparkController.getWidth());
float currentY = sparkController.getStartY() + sparkController.getHeight();
paint.setColor(sparkController.createTopColor(prograss));
//进度条上半部分
canvas.drawRect(sparkController.getStartX(), sparkController.getStartY(), currentX, currentY - sparkController.getHeight() / 2, paint);
paint.setColor(sparkController.createBottomColor(prograss));
//进度条下半部分
canvas.drawRect(sparkController.getStartX(), currentY - sparkController.getHeight() / 2, currentX, currentY, paint);
if(sparkController.getCurPrograss() < sparkController.getPrograss()) {
//每次增加4个粒子
sparkController.createSparks(prograss);
}
//绘制所有粒子
for(int i = 0 ; i<sparkController.getSparks().size() ;i++){
Spark spark = sparkController.getSparks().get(i);
spark.setDepX(spark.getDepX() + (sparkController.rand(0f, 6f) - 3) / 100);
spark.setDepY(spark.getDepY() + 0.2f);
float sparkX = spark.getX() + spark.getDepX() / 2 + spark.getWeidth();
float sparkY = spark.getY() + 6 * spark.getDepY();
spark.setX(sparkX > currentX ? currentX - spark.getWeidth():sparkX);
spark.setY(sparkY);
if(spark.getY() > sparkController.getBorderHeight()){
sparkController.getSparks().remove(i);
}else{
paint.setColor(spark.createColor(sparkController));
canvas.drawRect(spark.getX(),spark.getY(),spark.getX() + spark.getWeidth(),spark.getY() + spark.getHeight(),paint);
}
}
if(sparkController.getSparks().isEmpty() && sparkController.getSparkCallBack() != null){
sparkController.getSparkCallBack().onEnd();
}
if(sparkController.getSparkCallBack() != null){
sparkController.getSparkCallBack().onUpdate(prograss);
}
}

public SparkController getSparkController() {
return sparkController;
}

public void setSparkController(SparkController sparkController) {
this.sparkController = sparkController;
}

public void slidSprk(int prograss) {
if(sparkController.getSparkCallBack() != null){
sparkController.getSparkCallBack().onStartPre();
}
sparkController.setPrograss(prograss);
invalidate();
mHandler.removeMessages(SparkController.INVALITE);
mHandler.sendEmptyMessage(SparkController.INVALITE);
}

public void stopSlidSpak(){
mHandler.removeMessages(SparkController.INVALITE);
if(sparkController.getSparkCallBack() != null){
sparkController.getSparkCallBack().onEnd();
}
}

public class SparkController {
public static final int INVALITE = 0x10;
private float startX,startY,width,height;
private int prograss,speed,delay = 50,maxPrograss = 100,curPrograss,borderWidth,borderHeight,createSparkNum = 8 ,sparkLift = 100;
private float startColor,endColor,curColor;
private List<Spark> sparks = new ArrayList<Spark>();
public interface SparkCallBack{
public void onStartPre();
public void onEnd();
public void onUpdate(float prograss);
}
private SparkCallBack sparkCallBack;

public int createTopColor(float prograss){
//进度条上部颜色
float hue = startColor + prograss * (endColor - startColor);
return  Color.HSVToColor(255,new float[]{hue,1f,1f});
}

public int createBottomColor(float prograss){
//进度条下部颜色，仅仅透明度区别
float hue = startColor + prograss * (endColor - startColor);
curColor = hue;
return  Color.HSVToColor(200, new float[]{hue, 1f, 1f});
}

public List<Spark> createSparks(float prograss){
//创建4个初始粒子
for(int i = 0; i<createSparkNum ; i++) {
sparks.add(createSpark(prograss));
}
return  sparks;
}

public Spark createSpark(float prograss){
//初始化粒子
Spark spark = new Spark();
spark.setX(getStartX() + prograss * getWidth() - rand(0f, 1f) * 10);
spark.setY(getStartY() + getHeight());
spark.setDepX((rand(0f, 4f) - 2) / 100);
spark.setDepY((rand(0f, getSparkLift()) - getSparkLift() * 2) / 100);
spark.setWeidth((int) (rand(1, 4) / 2));
spark.setHeight((int) (rand(1, 4) / 2));
spark.setHue(getCurColor());
return  spark;
}

public float rand(float a, float b){
double v = Math.random() * (b - a + 1) + a;
return Math.round(v);
}
}

public class Spark {
private int weidth,height;//粒子的宽度与高度
private float hue,x,y,depX,depY;//粒子的HSV颜色和xy坐标与步长
}