编辑推荐：稀土掘金，这是一个针对技术开发者的一个应用，你可以在掘金上获取最新最优质的技术干货，不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎，想成为全栈工程师的朋友不要错过！

前段时间在某效果网站看到开源项目【ExplosionField】非常喜欢，于是自己跟着源码学习着去做了做。跟源码效果有一点区别，我都是尽力读懂源码然后用自己的理解写出来，源码有些看不懂的地方，我也就没有用到，因为自己的代码要保证自己都能看懂。

最后效果如下：

(本文适合有一年Android开发经验者学习)

本文可以学到： 1.开源项目ExplosionField的实现思路 2.图示效果的实现过程 3.属性动画的用法

实现思路：

1.新建一个 Bean Particle，表示一个粒子对象；新建一个 View ExplosionField作为画布用来显示破碎的粒子；新建一个属性动画(ValueAnimator) ExplosionAnimator用来改变不同时刻的粒子状态；

2.通过View生成图片Bitmap，把生成的图片分解成若干个粒子，让每个粒子记录特定的位置，所有的粒子组合能看出是原图。

3.加上动画效果，使得点击View后，粒子能有所变化。

4.构思算法，形成不一样的效果。

5.匹配不同分辨率的设备。

6.重构。

详细过程：

可以先看看项目结构，非常简单：

                    v                                    v

1.新建对象

1.1 新建Particle对象，用来描述粒子，包括属性有颜色、透明度、圆心坐标、半径。public class Particle {

float cx; //center x of circle

float cy; //center y of circle

float radius;

int color;

float alpha;

}

1.2 新建ExplosionField对象，继承自View，用于做粒子集的画布，需要重写onDraw()方法public class ExplosionField extends View{

public ExplosionField(Context context) {

super(context);

init();

}

public ExplosionField(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

//初始化

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//绘制粒子

}

}

1.3 新建ExplosionAnimator，继承自ValueAnimator，用来执行自定义动画。ValueAnimator简单来说就是在一段时间内通过不断改变值(一般是改变某个属性的值)来达到动画效果。更多可以参考《Android属性动画完全解析(上)，初识属性动画的基本用法》来学习。

而我们现在是准备在一段时间内(大概1.5秒)让ValueAnimator里的值从0.0f变化到1.0f，然后根据系统生成的递增随机值(范围在0.0f~1.0f)改变Particle里的属性值。public class ExplosionAnimator extends ValueAnimator{

public static final int DEFAULT_DURATION = 1500;

public ExplosionAnimator() {

setFloatValues(0.0f, 1.0f);

setDuration(DEFAULT_DURATION);

}

}

这样，在1.5秒内，通过ExplosionAnimator的方法getAnimatedValue()就能够不断得到递增的范围在0.0f~1.0f之间的值。

2.复制出View的快照图片

首先通过view的宽高创建出一个同样大小的空白图，用Bitmap的静态方法createBitmap()创建，最后一个参数表示图片质量。Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);

然后通过画布Canvas，先把空白图设置到画布里，再让view把自己画在画布上，空白图也变成了view的翻版了。mCanvas.setBitmap(bitmap);

view.draw(mCanvas);

//此处bitmap已是同view显示一样的图

完整代码：//ExplosionField.java

public class ExplosionField extends View{

private static final Canvas mCanvas = new Canvas();

private Bitmap createBitmapFromView(View view) {

Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);

if (bitmap != null) {

synchronized (mCanvas) {

mCanvas.setBitmap(bitmap);

view.draw(mCanvas);

mCanvas.setBitmap(null); //清除引用

}

}

return bitmap;

}

}

PS：在原项目ExplosionField中还有一个判断，如果view是ImageView的对象，那么直接获得ImageView依附的BitmapDrawable图。if (view instanceof ImageView) {

Drawable drawable = ((ImageView)view).getDrawable();

if (drawable != null && drawable instanceof BitmapDrawable) {

return ((BitmapDrawable) drawable).getBitmap();

}

}

我为什么去掉了呢？是因为如果ImageView设置了背景(background)的话，这样直接获取的BitmapDrawable是src的引用，并不包括背景色。所以统一用画布绘制的方法生成快照。

好了，先拿一个TextView做示范，看看复制的效果：

3.把快照分解成若干粒子

前面我们已经生成了快照图片，现在我们需要把快照分解成若干个粒子，这些粒子的组合能看出来是原图的影子，然后再让粒子动起来形成后面的动画。

那怎么做呢？ExplosionField项目是分解成15 * 15个粒子，我这里有点不一样我就直接按照我的思路讲解了。

首先定义一个二维数组Particle[][](一维的也行啦，原项目就是定义一维的)，用来存放所有粒子，因为图片大小不同，粒子个数也不会相同，所以我们把粒子的宽高固定，在Particle类中新加一个静态常量属性public static final int PART_WH = 8; //默认小球宽高

然后根据view的宽高，算出横竖粒子的个数//ExplosionAnimator.java - generateParticles(Bitmap bitmap, Rect bound)

int w = bound.width();

int h = bound.height();

int partW_Count = w / Particle.PART_WH; //横向个数

int partH_Count = h / Particle.PART_WH; //竖向个数

Particle[][] particles = new Particle[partH_Count][partW_Count];

其中bound是Rect类型，通过view.getGlobalVisibleRect()方法能得到view相对于整个屏幕的坐标Rect bound = new Rect();

view.getGlobalVisibleRect(rect);

然后把二维粒子数组对应图片的位置，设置为相应的颜色属性和坐标。

通过bitmap.getPixel(x, y)可以获得(x, y)坐标的bitmap的颜色值//ExplosionAnimator.java - generateParticles(Bitmap bitmap, Rect bound)

Point point = null;

for (int row = 0; row

for (int column = 0; column

//取得当前粒子所在位置的颜色

int color = bitmap.getPixel(column * partW_Count, row * partH_Count);

point = new Point(column, row); //x是列，y是行

particles[row][column] = Particle.generateParticle(color, bound, point);

}

}

在Particle类中定义静态方法generateParticle()用来生成新的Particle对象//Particle.java

public static Particle generateParticle(int color, Rect bound, Point point) {

int row = point.y; //行是高

int column = point.x; //列是宽

Particle particle = new Particle();

particle.mBound = bound;

particle.color = color;

particle.alpha = 1f;

particle.radius = PART_WH;

particle.cx = bound.left + PART_WH * column;

particle.cy = bound.top + PART_WH * row;

return particle;

}

这里把半径设置为宽长，而不是宽的一半，是因为叠加显示效果会更好看一点。

为了能够显示出来，我们新建一个draw()方法，用从ExplosionField传来的canvas来绘制所有粒子//ExplosionAnimator.java

public void draw(Canvas canvas) {

for (Particle[] particle : mParticles) {

for (Particle p : particle) {

canvas.drawCircle(p.cx, p.cy, p.radius, mPaint);

}

}

}

//ExplosionField.java

private ArrayList explosionAnimators;

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

for (ExplosionAnimator animator : explosionAnimators) {

animator.draw(canvas);

}

}

因为画布可能同时绘制几个动画，所以用一个List保存动画集。

现在大概的效果是这样：

4.加上动画，使得粒子动起来

前面说过，在ExplosionAnimator中通过方法getAnimatedValue()就能够不断得到递增的范围在0.0f~1.0f之间的值(记做factor)。

我们先在Particle写好得到变化因素后，属性要发生的改变。cx左右移动都可以，cy向下移动且距离和view高度有关(不同高度图片，每次下降距离不同)，radius变小，alpha变得越来越透明。只要符合这几点，算法随便写就可以了。//Particle.java

public void advance(float factor) {

cx = cx + factor * random.nextInt(mBound.width()) * (random.nextFloat() - 0.5f);

cy = cy + factor * random.nextInt(mBound.height() / 2);

radius = radius - factor * random.nextInt(2);

alpha = (1f - factor) * (1 + random.nextFloat());

}

记住传进来的factor是从0.0f到1.0f不断递增的。

然后改造draw()方法，每次绘制都让粒子“前进一步”调用一次advance()方法，然后根据新属性重新绘制//ExplosionAnimator.java

public void draw(Canvas canvas) {

if(!isStarted()) { //动画结束时停止

return;

}

for (Particle[] particle : mParticles) {

for (Particle p : particle) {

p.advance((Float) getAnimatedValue());

mPaint.setColor(p.color);

mPaint.setAlpha((int) (Color.alpha(p.color) * p.alpha)); //这样透明颜色就不是黑色了

canvas.drawCircle(p.cx, p.cy, p.radius, mPaint);

}

}

mContainer.invalidate();

}

最后一句的mContainer其实就是ExplosionField，调用它的invalidate()方法，就是调用ExplosionField的onDraw()方法。而ExplosionField的onDraw()里又调用了ExplosionAnimator的draw()方法。这样循环就出现了动画效果。

结束的条件就是第一句if(!isStarted())如果动画停止了，就断了绘制循环。

PS：这里值得一提的有setAlpha()方法，之前我用的是mPaint.setColor(p.color);

mPaint.setAlpha((int) (255 * p.alpha));

这样有个问题就是当颜色为透明时，显示的是黑色。

而改为了方法：mPaint.setColor(p.color);

mPaint.setAlpha((int) (Color.alpha(p.color) * p.alpha));

透明颜色就为透明色了。

现在动画过程已经写完，就差开始的导火线了，我们在动画开始的时候启动这根导火线，重写start()方法：//ExplosionAnimator.java

@Override

public void start() {

super.start();

mContainer.invalidate();

}

那在哪使动画开始呢，即在哪调用explosionAnimator.start()呢？

在ExplosionField中建立一个“爆炸”方法，只要调用这个方法，传入view，最后执行animator.start()，view就会执行爆炸效果public void explode(final View view) {

Rect rect = new Rect();

view.getGlobalVisibleRect(rect); //得到view相对于整个屏幕的坐标

rect.offset(0, -Utils.dp2px(25)); //去掉状态栏高度

final ExplosionAnimator animator = new ExplosionAnimator(this, createBitmapFromView(view), rect);

explosionAnimators.add(animator);

animator.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

view.animate().alpha(0f).setDuration(150).start();

}

@Override

public void onAnimationEnd(Animator animation) {

view.animate().alpha(1f).setDuration(150).start();

//动画结束时从动画集中移除

explosionAnimators.remove(animation);

animation = null;

}

});

animator.start();

}

现在的效果：

5.附着动画到任意Activity，添加监听器给需要有动画效果的view

现在动画效果什么的都做好了，要如何使用呢？

现在的思路是在Activity的最上层盖一层透明的ExplosionField视图，用来显示粒子动画。//ExplosionField.java

/**

* 给Activity加上全屏覆盖的ExplosionField

*/

private void attach2Activity(Activity activity) {

ViewGroup rootView = (ViewGroup) activity.findViewById(Window.ID_ANDROID_CONTENT);

ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(

ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

rootView.addView(this, lp);

}

其实Activity的根视图并不是我们设置的xml，它上面还有一层，通过findViewById(Window.ID_ANDROID_CONTENT)能够得到，然后我们再把ExplosionField全屏加载在Activity的最上层，这样显示动画效果就不会被遮盖。

然后我们可以在初始化的时候加上这个方法：public class ExplosionField extends View{

public ExplosionField(Context context) {

super(context);

init();

}

public ExplosionField(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

private void init() {

...

attach2Activity((Activity) getContext());

}

...

}

在看Activity的onCreate()方法就非常简单了：//MainActivity.java

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main_az);

ExplosionField explosionField = new ExplosionField(this);

explosionField.addListener(findViewById(R.id.root));

}

最后一句调用了addListener()方法，就是把需要实现点击破碎效果的view加上监听器，看代码：public void addListener(View view) {

if (view instanceof ViewGroup) {

ViewGroup viewGroup = (ViewGroup) view;

int count = viewGroup.getChildCount();

for (int i = 0 ; i

addListener(viewGroup.getChildAt(i));

}

} else {

view.setClickable(true);

view.setOnClickListener(getOnClickListener());

}

}

private OnClickListener getOnClickListener() {

if (null == onClickListener) {

onClickListener = new View.OnClickListener() {

@Override

public void onClick(View v) {

ExplosionField.this.explode(v);

}

};

}

return onClickListener;

}

只要传入ViewGroup，会自动递归查找Child View，并给Child View加上点击监听器，一旦点击就调用爆破方法执行动画。

最终效果大图：

更多详细代码可 fork 源码查看！

如果你喜欢这个效果，请给我Github上一个Star鼓励一下哈O(∩_∩)O谢谢！