作者 | Eason

來源 |?程序員巴士

2022虎年大吉，預祝各位小伙伴們新年快樂，這篇文章教大家如何在 Canvas 中實現高性能的煙花粒子特效，通過使用 Canvas + BitmapShader + GestureDetector技術棧，實現趣味 2D 春節煙花特效頁面，采用 velocity 和 acceleration 展示模型速度變化及PVector 2D簡單動畫效果等，每點擊一下屏幕會產生一枚煙花，煙花飛到最上空會炸裂成60~100個碎片，同屏可能有上千個粒子在不停更新它的位置，希望給大家帶來一些好玩有趣的東西!

作品演示

代碼分析

首先看看項目結構

└─fireworksColorfullView.java?-自定義的viewFirework.java?-對煙花建立模型MainActivity.javaParticle.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"><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 處理用戶輸入，每點擊一次在當前位置創建一枚煙花

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類包含兩個屬性，分別包含了炸開前 “種子” 的信息，和炸開后所發散的粒子，由于爆炸后的每個粒子也有對應的位置和速度信息，因此把這些粒子又當成 “種子” 來歸屬到一束煙花里，這些粒子信息都統一被封裝成 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上，通常我們會這樣寫

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

然而你會發現性能很糟糕,幀數隨著粒子數的增加直線下降直到個位數，優化如下：

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

寫在最后

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

往期推薦

好難啊……一個 try-catch 問出這么多花樣

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

惡意流量威脅新趨勢，揭秘網絡黑產3大核心本質

將 k8s 制作成 3D 射擊游戲，好玩到停不下來

點分享

點收藏

點點贊

點在看

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。