作者 | Eason

來(lái)源 |?程序員巴士

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)畫(huà)效果等，每點(diǎn)擊一下屏幕會(huì)產(chǎn)生一枚煙花，煙花飛到最上空會(huì)炸裂成60~100個(gè)碎片，同屏可能有上千個(gè)粒子在不停更新它的位置，希望給大家?guī)?lái)一些好玩有趣的東西!

作品演示

代碼分析

首先看看項(xiàng)目結(jié)構(gòu)

└─fireworksColorfullView.java?-自定義的viewFirework.java?-對(duì)煙花建立模型MainActivity.javaParticle.java?-粒子PContext.java?-工具類(lèi)PVector.java??-向量類(lèi)

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"><RelativeLayoutandroid: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"><ImageViewandroid:id="@+id/iv_text"android:layout_width="130dp"android:layout_height="130dp"android:layout_centerInParent="true"android:background="#EE4D1E"?/><TextViewandroid:id="@+id/text"android:layout_width="200dp"android:layout_height="200dp"android:gravity="center"android:text="福"android:textSize="120sp"?/></RelativeLayout><com.example.ColorfullViewandroid: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 處理用戶(hù)輸入，每點(diǎn)擊一次在當(dāng)前位置創(chuàng)建一枚煙花

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

• FireWork類(lèi)包含兩個(gè)屬性，分別包含了炸開(kāi)前 “種子” 的信息，和炸開(kāi)后所發(fā)散的粒子，由于爆炸后的每個(gè)粒子也有對(duì)應(yīng)的位置和速度信息，因此把這些粒子又當(dāng)成 “種子” 來(lái)歸屬到一束煙花里，這些粒子信息都統(tǒng)一被封裝成 Particle 這個(gè)Bean類(lèi)；

ArrayList<Particle>?particles;????//?炸開(kāi)后的粒子Particle?firework;????????????????//?炸開(kāi)前的粒子

• Particle類(lèi)具有隨機(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ì)這樣寫(xiě)

@Overrideprotected?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)化如下：

@Overrideprotected?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);}}

寫(xiě)在最后

到這里整個(gè)煙花動(dòng)效就完成了，在這里提前給各位拜年了！祝大家工作順利，身體健康，全家和和美美，萬(wàn)事如意！

往期推薦

好難啊……一個(gè) try-catch 問(wèn)出這么多花樣

k8s集群居然可以圖形化安裝了？

惡意流量威脅新趨勢(shì)，揭秘網(wǎng)絡(luò)黑產(chǎn)3大核心本質(zhì)

將 k8s 制作成 3D 射擊游戲，好玩到停不下來(lái)

點(diǎn)分享

點(diǎn)收藏

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

以上是生活随笔為你收集整理的春节快到了，来写个烟花动效吧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。