描述
效果图：
image.png
要实现一张图片的爆炸效果，有几个关键的点：
第一点、根据图片的宽和高获取每一个像素的点，并且根据这个像素点构建在这一个像素点ball 对象；
第二点、在获取ball 的数组对象的时候，需要在子线程来做这个事情，防止UI卡顿。
第三点、启动一个动画来循环的调用绘制。
第四点、在绘制的时候需要把所有ball 都一一绘制。
创建一个粒子对象（Ball）。
- 图片像素点颜色值color
- 粒子圆心坐标x
- 粒子圆心坐标y
- 粒子半径r
- 粒子运动水平方向速度vx
- 粒子运动垂直方向速度vy
- 粒子运动水平方式加速度ax
- 粒子运动垂直方向加速度ay
public int color; //图片像素点颜色值
public float x; //粒子圆心坐标x
public float y; //粒子圆心坐标y
public float r; //粒子半径
public float vX;//粒子运动水平方向速度
public float vY;//粒子运动垂直方向速度
public float aX;//粒子运动水平方向加速度
public float aY;//粒子运动垂直方向加速度
创建一个自定义view ，组合粒子。
- 初始画笔Paint，bitmap对象，粒子直径(float类型)
paint = new Paint();
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic);
- 获取所有的粒子集合
//计算粒子数
private void calculateBalls() {
if (mBitmap == null || mBitmap.isRecycled()) return;
int width = mBitmap.getWidth();
int height = mBitmap.getHeight();
for (int i = 0; i < width; i += ballPoor) {
for (int j = 0; j < height; j += ballPoor) {
Ball ball = new Ball();
int realWidth = ballPoor;
int realHeight = ballPoor;
if (i + realWidth > width) {
realWidth = width - i;
}
if (j + realHeight > height) {
realHeight = height - j;
}
//这里的像素值，不准确
int[] colors = new int[realWidth * realHeight];
// @param pixels 接收位图颜色的数组
// @param offset 第一个要写入像素的索引[]
// @param stride 以像素[]为单位的项数，可在其中跳过行(必须是>=位图的宽度)。可以是负的。
// @param x 要读取的第一个像素的x坐标
// @param y 要读取的第一个像素的y坐标
// @param width 从每一行读取的像素数
// @param height 要读取的行数
mBitmap.getPixels(colors, 0, realWidth, i, j, realWidth, realHeight);
int color = getColor(colors);
ball.setColor(color);
//线性增加多少，就缩小多少倍，这种来计算
ball.x = i * d / ballPoor + d / 2;
ball.y = j * d / ballPoor + d / 2;
ball.setR((float) d / 2);
//x方向速度20或者-20
ball.setvX((float) (Math.pow(-1, Math.ceil(Math.random() * 1000)) * 20 * Math.random()));
ball.setvY(rangeInt(-10, 20));
ball.setaX(0);
ball.setaY(0.98f);
ballList.add(ball);
}
}
}
- 初始动画，并且监听动画变更，改变Ball的位置和invalidate();
调用invalidate()，会执行绘制的方法，onDraw();
// 创建一个线程池，该线程池根据需要创建新线程，但是将重用以前构造的线程可用。这些池通常会提高性能
// 执行许多短期异步任务的程序。
// 对{@code execute}的调用将重用前面构造的
// 线程(如果可用)。如果没有现有线程可用，则使用一个新线程
// 线程将被创建并添加到池中。线程,
// * 60秒内未使用的将被终止并移除
// *缓存。因此，一个闲置足够长的池将会
// *不消耗任何资源。注意，池与类似
// *属性，但不同的细节(例如超时参数)
valueAnimator = ValueAnimator.ofFloat(animBeginValue, animEndValue);
//线性插值器
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setRepeatCount(0);//0 不重复，默认也是0
valueAnimator.setDuration(duration);
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationFinish(ValueAnimator animation) {
//动画结束
Log.i("ball", "动画结束");
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//动画每一帧的改变
float value = (float) animation.getAnimatedValue();
// Log.i("ball","动画value=====" +value);
if (value == animEndValue) {
//动画执行结束
this.onAnimationFinish(animation);
}
//在动画改变的时候，调用绘制
updateBallState();
invalidate();
}
});
- 循环绘制所有的粒子
for (Ball ball : ballList) {
paint.setColor(ball.getColor());
canvas.drawCircle(ball.getX(), ball.getY(), ball.getR(), paint);
}
改进
在布局文件中使用了自定义的view 的时候，宽度和高度，
如果没有使用确切值的情况，默认是填充满屏幕的。
完整代码：
package com.netease.canvas.split;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
/**
* 作者：liupeng
* 创建时间：2019/4/26
* 描述：优化，确认布局的宽和高度，不然会出现问题
*/
public class LZBallView extends View {
//粒子的集合，通过获取图片的宽度或者view 的宽度来计算，子线程做这个事情哦
private List<Ball> ballList = new ArrayList<>();
private Paint paint;//画笔
//粒子的直径.设置默认值，后续通过属性来设置
private float d = 20;
//动画
private ValueAnimator valueAnimator;
//动画时长，后面也是通过属性配置的
private long duration = 3000;
private float animBeginValue = 0;
private float animEndValue = 1;
//图片
private Bitmap mBitmap;
//用于控制粒子的个数，如果是一个像素的一个像素的添加，那么粒子数目较多，默认等于
private int ballPoor = 10;
//是否已经开始了动画
private boolean startAnim;
public LZBallView(Context context) {
this(context, null);
}
public LZBallView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
//初始化操作
private void init() {
paint = new Paint();
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic);
// 创建一个线程池，该线程池根据需要创建新线程，但是将重用以前构造的线程可用。这些池通常会提高性能
// 执行许多短期异步任务的程序。
// 对{@code execute}的调用将重用前面构造的
// 线程(如果可用)。如果没有现有线程可用，则使用一个新线程
// 线程将被创建并添加到池中。线程,
// * 60秒内未使用的将被终止并移除
// *缓存。因此，一个闲置足够长的池将会
// *不消耗任何资源。注意，池与类似
// *属性，但不同的细节(例如超时参数)
Executors.newCachedThreadPool().execute(new Runnable() {
@Override
public void run() {
calculateBalls();
}
});
valueAnimator = ValueAnimator.ofFloat(animBeginValue, animEndValue);
//线性插值器
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setRepeatCount(0);//0 不重复，默认也是0
valueAnimator.setDuration(duration);
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationFinish(ValueAnimator animation) {
//动画结束
Log.i("ball", "动画结束");
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//动画每一帧的改变
float value = (float) animation.getAnimatedValue();
// Log.i("ball","动画value=====" +value);
if (value == animEndValue) {
//动画执行结束
this.onAnimationFinish(animation);
}
//在动画改变的时候，调用绘制
updateBallState();
invalidate();
}
});
}
//计算粒子数
private void calculateBalls() {
if (mBitmap == null || mBitmap.isRecycled()) return;
int width = mBitmap.getWidth();
int height = mBitmap.getHeight();
for (int i = 0; i < width; i += ballPoor) {
for (int j = 0; j < height; j += ballPoor) {
Ball ball = new Ball();
int realWidth = ballPoor;
int realHeight = ballPoor;
if (i + realWidth > width) {
realWidth = width - i;
}
if (j + realHeight > height) {
realHeight = height - j;
}
//这里的像素值，不准确
int[] colors = new int[realWidth * realHeight];
// @param pixels 接收位图颜色的数组
// @param offset 第一个要写入像素的索引[]
// @param stride 以像素[]为单位的项数，可在其中跳过行(必须是>=位图的宽度)。可以是负的。
// @param x 要读取的第一个像素的x坐标
// @param y 要读取的第一个像素的y坐标
// @param width 从每一行读取的像素数
// @param height 要读取的行数
mBitmap.getPixels(colors, 0, realWidth, i, j, realWidth, realHeight);
int color = getColor(colors);
ball.setColor(color);
//线性增加多少，就缩小多少倍，这种来计算
ball.x = i * d / ballPoor + d / 2;
ball.y = j * d / ballPoor + d / 2;
ball.setR((float) d / 2);
//x方向速度20或者-20
ball.setvX((float) (Math.pow(-1, Math.ceil(Math.random() * 1000)) * 20 * Math.random()));
ball.setvY(rangeInt(-10, 20));
ball.setaX(0);
ball.setaY(0.98f);
ballList.add(ball);
}
}
}
//获取颜色
private int getColor(int[] colors) {
int ar = 0, ag = 0, ab = 0;
for (int color : colors) {
int r = (color & 0xff0000) >> 16;
int g = (color & 0x00ff00) >> 8;
int b = color & 0x0000ff;
ar += r;
ag += g;
ab += b;
}
return Color.rgb(ar / colors.length, ag / colors.length, ab / colors.length);
}
private float rangeInt(int i, int j) {
int max = Math.max(i, j);
int min = Math.min(i, j) - 1;
//在0到(max - min)范围内变化，取大于x的最小整数 再随机
return (int) (min + Math.ceil(Math.random() * (max - min)));
}
//动画执行过程中，改变粒子的状态
private void updateBallState() {
for (Ball ball : ballList) {
ball.setX(ball.getX() + ball.getvX());
ball.setY(ball.getY() + ball.getvY());
ball.setvX(ball.getvX() + ball.getaX());
ball.setvY(ball.getvY() + ball.getaY());
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
//执行动画
startAnim = true;
valueAnimator.start();
}
return super.onTouchEvent(event);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int mHeight = MeasureSpec.getSize(heightMeasureSpec);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制时间过长会直接崩溃的
int width = getMeasuredWidth();
int height = getMeasuredHeight();
//画布的平移操作
if (width >= mBitmap.getWidth()) {
if (height >= mBitmap.getHeight()){
canvas.translate(width/2 -mBitmap.getWidth()/2, height/2 -mBitmap.getHeight()/2);
}else{
canvas.translate(width/2 -mBitmap.getWidth()/2, 0);
}
}else {
//view 的宽度是小于图片的宽度的什么都不做
if (height >= mBitmap.getHeight()){
canvas.translate(0, height/2 -mBitmap.getHeight()/2);
}else{
canvas.translate(0, 0);
}
}
if (!startAnim) {
canvas.drawBitmap(mBitmap, 0, 0, paint);
return;
}
for (Ball ball : ballList) {
paint.setColor(ball.getColor());
canvas.drawCircle(ball.getX(), ball.getY(), ball.getR(), paint);
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (valueAnimator != null) {
valueAnimator.cancel();
}
}
interface AnimatorUpdateListener extends ValueAnimator.AnimatorUpdateListener {
void onAnimationFinish(ValueAnimator animation);
}
}
