android Button粒子化效果

之前在网上看到了ios上有一个Button粒子化的效果，其实就是在Button外围加了一圈火焰的效果，觉得好酷炫的样子，发觉android上并没有这样的功能，所以只好尝试着自己模仿一个，虽然模仿的结果和原来的效果相距甚远，但是也是有些起色，毕竟实现的原理是差不多的。

效果图如下：



整个的思路是这样的：

1.定义粒子类Particle及其他粒子相关类ParticleFactory、ParticleSet

2.重写Button，在view中开线程实现粒子化效果，包含一定的逻辑即路径约束和计算，ParticleThread、RunThread

下面给出几个重要的类吧，最后附上源代码地址。

Particle类，主要作用是实现粒子的定义

public class Particle {
private int firstColor = Color.RED;
private int radius = 10;
private int color = firstColor;
private int startX;
private int startY;
private int x;
private int y;
private int startTime = 0;
private int endTime;
private int speedY;
private int speedX;
private int FIRST_STATE = 60;//第一层和第二层火焰的分离点
private int SECOND_STATE = 25;//第二层和第三层火焰的分离点
private int mode = 1;
private int redColor = 255;

public Particle(int startX, int startY){
this.startX = startX;
this.startY = startY;
this.x = startX;
this.y = startY;
}

public void setFirstColor(int firstColor) {
this.firstColor = firstColor;
}

public void setRedColor(int redColor) {
this.redColor = redColor;
}

public int getX() {
return x;
}

public void setX(int x) {
this.x = x;
}

public int getY() {
return y;
}

public void setY(int y) {
this.y = y;
if(y > FIRST_STATE){
changeMode(1);
}else if(y > SECOND_STATE){
changeMode(2);
}else{
changeMode(3);
}
}

/**
* 设置火焰三层的不同状态
* @param mode
*/
public void changeMode(int mode){
this.setMode(mode);
switch (mode){
case 1:
this.color = firstColor;
break;
case 2:
if(redColor > 150)
{
redColor -= 15;
this.color = Color.rgb(redColor, 0, 0);
}else{
this.color = Color.rgb(redColor, 0, 0);
}
break;
case 3:
this.color = Color.rgb(150, 0, 0);
break;
default :
break;
}
}

public int getRadius() {
return radius;
}

public int getColor() {
return color;
}

public int getStartX() {
return startX;
}

public void setStartX(int startX) {
this.startX = startX;
}

public int getStartY() {
return startY;
}

public void setStartY(int startY) {
this.startY = startY;
}

public int getStartTime() {
return startTime;
}

public void setStartTime(int startTime) {
this.startTime = startTime;
}

public int getSpeedY() {
return speedY;
}

public void setSpeedY(int speedY) {
this.speedY = speedY;
}

public void setSpeedX(int speedX) {
this.speedX = speedX;
}

public int getSpeedX() {
return speedX;
}

public int getEndTime() {
return endTime;
}

public void setEndTime(int endTime) {
this.endTime = endTime;
}

public int getMode() {
return mode;
}

public void setMode(int mode) {
this.mode = mode;
}

public void setRadius(int radius) {
this.radius = radius;
}

}

ParticleThread类，粒子运动的线程

public class ParticleThread extends Thread {
HashSet<Particle> set;
private View view;

public ParticleThread(ParticleSet set, View view){
this.set = set.getSet();
this.view = view;
}

@Override
public void run() {
while(ActivityState.isRun)
{
for(Particle particle : set)
{
if(particle.getStartTime() > particle.getEndTime())
{
ParticleFactory.reset(particle);
}
particle.setY(particle.getStartY() - particle.getStartTime() * particle.getSpeedY());
particle.setX(particle.getStartX() - particle.getStartTime() * particle.getSpeedX());
particle.setStartTime(particle.getStartTime()+1);
}
view.postInvalidate();
try {
sleep(150);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}

}

FireButton类，主要作用重写一下里面的onDraw方法

public class FireButton extends Button{
private Paint paint = new Paint();
private PorterDuffXfermode xor_mode = new PorterDuffXfermode(Mode.XOR);
private ParticleSet particleSet;
private ParticleThread particleThread;
private RunThread runThread;
public static int START_X = 50;
public static int START_Y = 90;
/**
* 边框的大小
*/
public static int shelter = 40;

public FireButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

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

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

public void init(Canvas canvas){
START_X = shelter/2;
START_Y = this.getHeight() - shelter/2 - 10;
particleSet = new ParticleSet();//Particle集合
runThread = new RunThread(this);//火焰移动线程
runThread.start();
particleThread = new ParticleThread(particleSet, this);//粒子效果线程
particleThread.start();
}

@Override
protected void onDraw(Canvas canvas) {
if(particleSet == null || particleThread == null)
init(canvas);
if(particleSet.getSet().size()  < 60)
{
for(int i = 0; i < 3; i++)
particleSet.add(ParticleFactory.create(START_X, START_Y));
}
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(shelter);
paint.setColor(Color.RED);
paint.setXfermode(xor_mode);
canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
super.onDraw(canvas);//绘制原有的BUTTON
paint.reset();
paint.setXfermode(null);
for(Particle particle : particleSet.getSet())
{
paint.setStyle(Paint.Style.FILL);
paint.setColor(particle.getColor());
paint.setAlpha(170);
canvas.drawOval(new RectF(particle.getX(), particle.getY(),
particle.getX()+particle.getRadius(), particle.getY()+particle.getRadius()),
paint);
}
}

}

源代码地址在github上，仅供参考，希望有用