春节找点乐子来写个烟花动效吧

开发 前端
2022虎年大吉,预祝各位小伙伴们新年快乐,这篇文章教大家如何在 Canvas 中实现高性能的烟花粒子特效。

2022虎年大吉,预祝各位小伙伴们新年快乐,这篇文章教大家如何在 Canvas 中实现高性能的烟花粒子特效,通过使用 Canvas + BitmapShader + GestureDetector技术栈,实现趣味 2D 春节烟花特效页面,采用 velocity 和 acceleration 展示模型速度变化及PVector 2D简单动画效果等,每点击一下屏幕会产生一枚烟花,烟花飞到最上空会炸裂成60~100个碎片,同屏可能有上千个粒子在不停更新它的位置,希望给大家带来一些好玩有趣的东西!

作品演示

代码分析

首先看看项目结构

└─fireworks
ColorfullView.java -自定义的view
Firework.java -对烟花建立模型
MainActivity.java
Particle.java -粒子
PContext.java -工具类
PVector.java -向量类

XML代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="com.example.MainActivity">

<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:id="@+id/iv_text"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_centerInParent="true"
android:background="#EE4D1E" />

<TextView
android:id="@+id/text"
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="center"
android:text="福"
android:textSize="120sp" />
</RelativeLayout>

<com.example.ColorfullView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Java代码

自定义 ColorfullView 中使用 GestureDetector 处理用户输入,每点击一次在当前位置创建一枚烟花

   mGesture = new GestureDetectorCompat(getContext(), new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onDown(MotionEvent e) {
fireworks.add(new Firework(e.getX(), e.getY()));
ViewCompat.postInvalidateOnAnimation(ColorfullView.this);
return true;
}
});

FireWork类包含两个属性,分别包含了炸开前 “种子” 的信息,和炸开后所发散的粒子,由于爆炸后的每个粒子也有对应的位置和速度信息,因此把这些粒子又当成 “种子” 来归属到一束烟花里,这些粒子信息都统一被封装成 Particle 这个Bean类;

    ArrayList<Particle> particles;    // 炸开后的粒子
Particle firework; // 炸开前的粒子

Particle类具有随机的颜色、大小、速度以接近真实,同时设定了烟花种子的初始位置坐标和半径等信息,每个烟花种子发散出来的粒子位置会根据种子最终爆炸位置进行确定

class Particle {
PVector location;
PVector velocity;
PVector acceleration;
float radius;

//烟花种子
Particle(float x, float y, float hue) {
this.hu = hue;
acceleration = new PVector(0, 0);
velocity = new PVector(0, PContext.random(-20, -10));
location = new PVector(x, y);
seed = true;
life = PContext.random(350.0f, 555.0f);
this.radius = PContext.random(10, 20);
}

//烟花粒子
Particle(PVector loc, float hue) {
this.hu = hue;
acceleration = new PVector(0, 0);
velocity = PVector.random2D();
velocity.mult(PContext.random(4, 8));
location = loc.get();
life = PContext.random(350.0f, 555.0f);
this.radius = PContext.random(10, 20);
}

每绘制一帧会调用FireWork的run方法,该方法中会在 view 的 onDraw 回调中去不断调用当前粒子的update和display方法;update方法用于更新每个粒子的速度、加速度和位置坐标,display方法用于根据粒子位置进行绘制;

    void run(Canvas canvas, Paint paint) {
if (firework != null) {//炸裂前
firework.applyForce(gravity);
firework.update();
firework.display(canvas, paint);

if (firework.explode()) {
int fragments = (int) random(60, 100);//碎片个数
for (int i = 0; i < fragments; i++) {
particles.add(new Particle(firework.location, hu));
}
firework = null;
firstExplode = true;
}
} else {//炸裂后
if (firstExplode) {//屏幕一闪
firstExplode = false;
canvas.drawColor(Color.HSVToColor(new float[]{hu, 0.6f, 0.6f}));
}

for (int i = particles.size() - 1; i >= 0; i--) {
Particle p = particles.get(i);
p.applyForce(gravity);
p.update();
p.display(canvas, paint);
if (p.isDead()) {
particles.remove(i);
}
}
}
}

性能优化

这时候功能基本实现了,剩下的就是将每一个烟花绘制在canvas上,通常我们会这样写

   @Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
for (int i = fireworks.size() - 1; i >= 0; i--) {
Firework f = fireworks.get(i);
f.run(canvas, mParticlePaint);
if (f.done()) {
fireworks.remove(i);
}
}
//canvas.drawBitmap(canvasBitmap,0, 0, mBitmapPaint);
if (!fireworks.isEmpty()) {
ViewCompat.postInvalidateOnAnimation(this);
}
}

然而你会发现性能很糟糕,帧数随着粒子数的增加直线下降直到个位数,优化如下:

  @Override
protected void onDraw(Canvas canvas) {
if (canvasBitmap == null || canvasBitmap.isRecycled()) {
canvasBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas(canvasBitmap);
mBitmapShader = new BitmapShader(canvasBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapPaint.setShader(mBitmapShader);
mBitmapPaint.setDither(false);
}
bitmapCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
for (int i = fireworks.size() - 1; i >= 0; i--) {
Firework f = fireworks.get(i);
f.run(bitmapCanvas, mParticlePaint);
if (f.done()) {
fireworks.remove(i);
}
}
canvas.drawPaint(mBitmapPaint);
if (!fireworks.isEmpty()) {
ViewCompat.postInvalidateOnAnimation(this);
}
}

写在最后

到这里整个烟花动效就完成了,由于篇幅有限,确实无法将每一个细节讲解详细,在这里提前给各位拜年了!祝大家工作顺利,身体健康,全家和和美美,万事如意!


责任编辑:姜华 来源: 程序员巴士
相关推荐

2021-05-06 10:46:40

JS代码文字烟花

2015-07-31 11:40:36

动效Swift

2021-04-15 07:50:45

Veu 动效Vue应用程序

2015-08-03 10:40:45

动效设计优势

2014-09-28 10:39:24

AppleWatchUI

2019-07-24 09:00:19

谷歌Android开发者

2022-03-31 07:46:17

CSS动画技巧

2021-06-29 23:50:39

插件Vscode代码

2012-05-09 12:25:55

2013-06-07 15:43:34

移动移动应用丰富动效

2023-06-05 15:00:13

书籍翻页动效鸿蒙

2022-09-01 06:54:28

CSS前端

2021-02-06 13:05:14

前端JS放烟花

2021-01-15 15:51:33

JavaScript开发技术

2021-06-21 15:49:39

React动效组件

2015-08-12 10:06:12

UI动效

2021-03-04 06:14:03

CSS webkit-box-动效

2015-08-12 09:49:38

ui配合设计师

2015-09-28 09:07:51

2017-03-23 10:21:57

CSS3动效库前端
点赞
收藏

51CTO技术栈公众号