春節(jié)找點(diǎn)樂(lè)子來(lái)寫個(gè)煙花動(dòng)效吧
2022虎年大吉，預(yù)祝各位小伙伴們新年快樂(lè)，這篇文章教大家如何在 Canvas 中實(shí)現(xiàn)高性能的煙花粒子特效，通過(guò)使用 Canvas + BitmapShader + GestureDetector技術(shù)棧，實(shí)現(xiàn)趣味 2D 春節(jié)煙花特效頁(yè)面，采用 velocity 和 acceleration 展示模型速度變化及PVector 2D簡(jiǎn)單動(dòng)畫效果等，每點(diǎn)擊一下屏幕會(huì)產(chǎn)生一枚煙花，煙花飛到最上空會(huì)炸裂成60~100個(gè)碎片，同屏可能有上千個(gè)粒子在不停更新它的位置，希望給大家?guī)?lái)一些好玩有趣的東西!
作品演示
代碼分析
首先看看項(xiàng)目結(jié)構(gòu)
└─fireworks
ColorfullView.java -自定義的view
Firework.java -對(duì)煙花建立模型
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 處理用戶輸入，每點(diǎn)擊一次在當(dāng)前位置創(chuàng)建一枚煙花
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類包含兩個(gè)屬性，分別包含了炸開前 “種子” 的信息，和炸開后所發(fā)散的粒子，由于爆炸后的每個(gè)粒子也有對(duì)應(yīng)的位置和速度信息，因此把這些粒子又當(dāng)成 “種子” 來(lái)歸屬到一束煙花里，這些粒子信息都統(tǒng)一被封裝成 Particle 這個(gè)Bean類;
ArrayList<Particle> particles; // 炸開后的粒子
Particle firework; // 炸開前的粒子
Particle類具有隨機(jī)的顏色、大小、速度以接近真實(shí)，同時(shí)設(shè)定了煙花種子的初始位置坐標(biāo)和半徑等信息，每個(gè)煙花種子發(fā)散出來(lái)的粒子位置會(huì)根據(jù)種子最終爆炸位置進(jìn)行確定
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);
}每繪制一幀會(huì)調(diào)用FireWork的run方法，該方法中會(huì)在 view 的 onDraw 回調(diào)中去不斷調(diào)用當(dāng)前粒子的update和display方法;update方法用于更新每個(gè)粒子的速度、加速度和位置坐標(biāo)，display方法用于根據(jù)粒子位置進(jìn)行繪制;
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);//碎片個(gè)數(shù)
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);
}
}
}
}性能優(yōu)化
這時(shí)候功能基本實(shí)現(xiàn)了，剩下的就是將每一個(gè)煙花繪制在canvas上，通常我們會(huì)這樣寫
@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);
}
}
然而你會(huì)發(fā)現(xiàn)性能很糟糕,幀數(shù)隨著粒子數(shù)的增加直線下降直到個(gè)位數(shù)，優(yōu)化如下:
@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);
}
}
寫在最后
到這里整個(gè)煙花動(dòng)效就完成了，由于篇幅有限，確實(shí)無(wú)法將每一個(gè)細(xì)節(jié)講解詳細(xì)，在這里提前給各位拜年了!祝大家工作順利，身體健康，全家和和美美，萬(wàn)事如意!
