Android实现粒子中心扩散动画效果

常妙颜

目录

• 前言
  
• 实现步骤
  
  
  
  • 粒子对象定义
    
  • 粒子更新
    
  • 粒子绘制方法
    
  • 粒子回收
    
  • View逻辑
    
  • 绘制逻辑
    
  • 更新粒子
    
  
  
• 效果调节
  
• 总结
  
• 本篇代码
  

前言

粒子动画效果相比其他动画来说是非常复杂了的，主要涉及三个方面，粒子初始化、粒子位移、粒子回收等问题，其中特别是粒子位移是最复杂的，涉及到的数学逻辑非常多，主要是各种三角函数、物理学公式等。
本篇将实现两种动画效果，代码基本相同，只是旋转速度不一样，因此，本篇其实可以看作一篇模板文章，具体效果可以通过调节参数生成各种动画
第一种动画

第二种动画

实现步骤

其实和以往的粒子效果一样，粒子需要被管理起来，因此我们需要有容器、也需要粒子对象

粒子对象定义

下面是创建粒子对象的逻辑，基本属性在注释中了

1. static class Circle {
   
2.     int maxLength;  //最大运行距离
   
3.     float speed; //外扩速度
   
4.     float rotate; // 角速度
   
5.     private float degree; //起始角度
   
6.     private int y; //y坐标
   
7.     private int x; //x坐标
   
8.     private int color; //颜色
   
9.     private float radius; //小圆半径
   
10.     private float drawRadius; //绘制时的小圆半径
    
11.    
    
12.    
    
13.   public Circle(int color, int maxLength, float radius, float degree) {
    
14.     this.color = color;
    
15.     this.radius = radius;
    
16.     this.maxLength = maxLength;
    
17.     this.degree = degree;
    
18.     this.x = (int) (radius * Math.cos(degree));
    
19.     this.y = (int) (radius * Math.sin(degree));
    
20.     this.rotate = 0.35f;  //触角效果
    
21.     this.speed = 0.2f;
    
22. }
    
23. }

复制代码

粒子更新

在任何动画中，粒子运动必须具备时间属性，任何符合物理学的位移运动，速度和时间的关系是位移计算的方法。下面，我们继续给Circle类添加更新方法。
这里一个重要的知识点是

• Math.hypot(x, y) ：平方根计算
  
• Math.atan2(y, x)： 斜率计算，注意，此角度具备方向
  

1. public boolean update(long timeline) {
   
2.     float length = (float) Math.hypot(x, y);  //计算当前移动的距离（距离中心点）
   
3.     float center = length + this.speed * timeline; //计算即将到达的距离
   
4.     float ratio = center / maxLength;  //计算与最远距离的比值
   
5. 
   
6.     this.drawRadius = (1f - ratio) * radius;  //距离越远，圆的半径越小
   
7. 
   
8.     double degree = Math.atan2(y, x) + rotate;  //即将旋转的角度
   
9. 
   
10.     this.x = (int) (center * Math.cos(degree)); //新的x
    
11.     this.y = (int) (center * Math.sin(degree)); //新的y
    
12. 
    
13.     if (drawRadius <= 0) {
    
14.         return false; //如果半径为0时，意味着圆看不见了，因此要坐下标记
    
15.     }
    
16.     return true;
    
17. }

复制代码

粒子绘制方法

绘制自身其实很简单，只需要简单的调用Canvas相关逻辑即可

1. public void draw(Canvas canvas, TextPaint paint) {
   
2.     paint.setColor(color);
   
3.     canvas.drawCircle(x, y, drawRadius, paint);
   
4. }

复制代码

粒子回收

为了减少内存申请频率，我们对跑出边界的粒子进行重置

1. public void reset() {
   
2.     this.x = (int) (radius * Math.cos(degree));
   
3.     this.y = (int) (radius * Math.sin(degree));
   
4. }

复制代码

View逻辑

以上是完整的粒子对象逻辑，接下来我们实现一个View，用来管理和绘制粒子。

1. int maxCircleRadius = 20;  //粒子初始半径
   
2. List<Circle> circleList = new ArrayList<>(); //容器
   
3. int maxCircleNum = 300; //最大数量

复制代码

绘制逻辑

首先是初始化，我们这里设置了3种粒子，因此间隔角度是120度，而我们每次增加三种，防止出现混乱的问题。

1.    final float rotateDegree = (float) Math.toRadians(120f); //间隔角度
   
2.     if (circleList.size() < maxCircleNum) {
   
3.     //每次增加三种
   
4.         circleList.add(new Circle(Color.RED, (int) maxRadius, maxCircleRadius, 0 * rotateDegree));
   
5.         circleList.add(new Circle(Color.GREEN, (int) maxRadius, maxCircleRadius, 1 * rotateDegree));
   
6.         circleList.add(new Circle(Color.CYAN, (int) maxRadius, maxCircleRadius, 2 * rotateDegree));
   
7.     }

复制代码

下面是每个粒子的绘制逻辑

1. for (int i = 0; i < circleList.size(); i++) {
   
2.     Circle circle = circleList.get(i);
   
3.     circle.draw(canvas, mPaint); //绘制方法
   
4. }

复制代码

更新粒子

下面有个重要的逻辑，其实前面也提到过，就是重置跑出边界的粒子

1. for (int i = 0; i < circleList.size(); i++) {
   
2.     Circle circle = circleList.get(i);
   
3.     if(!circle.update(16)){
   
4.         circle.reset(); //如果不能更新，则进行重置
   
5.     }
   
6. }
   
7. postInvalidate(); //刷新绘制逻辑

复制代码

以上就是整体核心逻辑

效果调节

我们开头的两种效果其实是同一个View实现的，这其中一个重要的点就是速度调整，文章开头是调整出的两种效果，当然染还可以调整出其他效果 第一种

1. this.rotate = 0.2f;
   
2. this.speed = 0.2f; //外扩效果

复制代码

第二种

1. this.rotate = 0.35f;  //触角效果
   
2. this.speed = 0.2f;

复制代码

第三种

1. this.rotate = 0.8f;
   
2. this.speed = 0.1f;

复制代码

当然，还有更多，篇幅原因就不深入了。

总结

本篇到这里就结束了，其实我们的核心代码并不多，但是简单的逻辑就能衍生出很多动画效果。其实，学习粒子动画是非常有意思的事，很多时候，你在实现某些效果的途中，就能突然开发出一种新的动画效果。

本篇代码

下面是本篇内容的完整逻辑，基本就在100行左右。

1. public class CircleParticleView extends View {
   
2.     private TextPaint mPaint;
   
3.     private DisplayMetrics mDM;
   
4. 
   
5.     public CircleParticleView(Context context) {
   
6.         this(context, null);
   
7.     }
   
8.     public CircleParticleView(Context context, AttributeSet attrs) {
   
9.         super(context, attrs);
   
10.         mDM = getResources().getDisplayMetrics();
    
11.         initPaint();
    
12.     }
    
13. 
    
14.     private void initPaint() {
    
15.         //否则提供给外部纹理绘制
    
16.         mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
    
17.         mPaint.setAntiAlias(true);
    
18.         mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    
19.         mPaint.setStrokeCap(Paint.Cap.ROUND);
    
20.         PaintCompat.setBlendMode(mPaint, BlendModeCompat.PLUS);
    
21. 
    
22.     }
    
23. 
    
24.     @Override
    
25.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
26. 
    
27.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    
28.         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    
29. 
    
30.         if (widthMode != MeasureSpec.EXACTLY) {
    
31.             widthSize = mDM.widthPixels / 2;
    
32.         }
    
33.         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    
34.         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    
35. 
    
36.         if (heightMode != MeasureSpec.EXACTLY) {
    
37.             heightSize = widthSize / 2;
    
38.         }
    
39.         setMeasuredDimension(widthSize, heightSize);
    
40. 
    
41.     }
    
42. 
    
43.     int maxCircleRadius = 20;
    
44.     List<Circle> circleList = new ArrayList<>();
    
45.     int maxCircleNum = 300;
    
46.     long time = 0;
    
47. 
    
48.     @Override
    
49.     protected void onDraw(Canvas canvas) {
    
50.         super.onDraw(canvas);
    
51. 
    
52.         int width = getWidth();
    
53.         int height = getHeight();
    
54.         float maxRadius = Math.min(width, height) / 2f;
    
55. 
    
56. 
    
57.         int save = canvas.save();
    
58.         canvas.translate(width / 2f, height / 2f);
    
59. 
    
60.         final float rotateDegree = (float) Math.toRadians(120f);
    
61.         if (circleList.size() < maxCircleNum) {
    
62.             circleList.add(new Circle(Color.RED, (int) maxRadius, maxCircleRadius, 0 * rotateDegree));
    
63.             circleList.add(new Circle(Color.GREEN, (int) maxRadius, maxCircleRadius, 1 * rotateDegree));
    
64.             circleList.add(new Circle(Color.CYAN, (int) maxRadius, maxCircleRadius, 2 * rotateDegree));
    
65.         }
    
66. 
    
67.         mPaint.setStyle(Paint.Style.FILL);
    
68.         for (int i = 0; i < circleList.size(); i++) {
    
69.             Circle circle = circleList.get(i);
    
70.             circle.draw(canvas, mPaint);
    
71.         }
    
72.         canvas.restoreToCount(save);
    
73. 
    
74.         for (int i = 0; i < circleList.size(); i++) {
    
75.             Circle circle = circleList.get(i);
    
76.             if (!circle.update(16)) {
    
77.                 circle.reset();
    
78.             }
    
79.         }
    
80. 
    
81.         postInvalidate();
    
82.         time += 16;
    
83.     }
    
84. 
    
85.     static class Circle {
    
86.         int maxLength;  //最大运行距离
    
87.         float speed; //外扩速度
    
88.         float rotate; // 角速度
    
89.         private float degree; //起始角度
    
90.         private int y; //y坐标
    
91.         private int x; //x坐标
    
92.         private int color; //颜色
    
93.         private float radius; //小圆半径
    
94.         private float drawRadius; //绘制时的小圆半径
    
95. 
    
96.         public Circle(int color, int maxLength, float radius, float degree) {
    
97.             this.color = color;
    
98.             this.radius = radius;
    
99.             this.maxLength = maxLength;
    
100.             this.degree = degree;
     
101.             this.x = (int) (radius * Math.cos(degree));
     
102.             this.y = (int) (radius * Math.sin(degree));
     
103.             this.rotate = 0.35f;  //触角效果
     
104.             this.speed = 0.2f;
     
105.         }
     
106. 
     
107. 
     
108.         public boolean update(long timeline) {
     
109.             float length = (float) Math.hypot(x, y);
     
110.             float center = length + this.speed * timeline; //距离增加
     
111.             float ratio = center / maxLength;
     
112. 
     
113.             this.drawRadius = (1f - ratio) * radius;
     
114. 
     
115.             double degree = Math.atan2(y, x) + rotate;  //角度增加
     
116. 
     
117.             this.x = (int) (center * Math.cos(degree));
     
118.             this.y = (int) (center * Math.sin(degree));
     
119. 
     
120.             if (drawRadius <= 0) {
     
121.                 return false;
     
122.             }
     
123.             return true;
     
124.         }
     
125. 
     
126.         public void draw(Canvas canvas, TextPaint paint) {
     
127.             paint.setColor(color);
     
128.             canvas.drawCircle(x, y, drawRadius, paint);
     
129.         }
     
130.         public void reset() {
     
131.             this.x = (int) (radius * Math.cos(degree));
     
132.             this.y = (int) (radius * Math.sin(degree));
     
133.         }
     
134.     }
     
135. 
     
136. }

复制代码

以上就是Android实现粒子中心扩散动画效果的详细内容，更多关于Android粒子中心扩散的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

bohan喜悦心

顶顶更健康！！！

我和人十二剿

感谢楼主，顶。

法大小鸟疵

感谢楼主分享。

续剧沙

路过，支持一下