春節(jié)找點樂子來寫個煙花動效吧

作者：Eason 2022-01-26 18:46:46

2022虎年大吉，預(yù)祝各位小伙伴們新年快樂，這篇文章教大家如何在 Canvas 中實現(xiàn)高性能的煙花粒子特效。

2022虎年大吉，預(yù)祝各位小伙伴們新年快樂，這篇文章教大家如何在 Canvas 中實現(xiàn)高性能的煙花粒子特效，通過使用 Canvas + BitmapShader + GestureDetector技術(shù)棧，實現(xiàn)趣味 2D 春節(jié)煙花特效頁面，采用 velocity 和 acceleration 展示模型速度變化及PVector 2D簡單動畫效果等，每點擊一下屏幕會產(chǎn)生一枚煙花，煙花飛到最上空會炸裂成60~100個碎片，同屏可能有上千個粒子在不停更新它的位置，希望給大家?guī)硪恍┖猛嬗腥さ臇|西!

作品演示

代碼分析

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

└─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 處理用戶輸入，每點擊一次在當(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類包含兩個屬性，分別包含了炸開前 “種子” 的信息，和炸開后所發(fā)散的粒子，由于爆炸后的每個粒子也有對應(yīng)的位置和速度信息，因此把這些粒子又當(dāng)成 “種子” 來歸屬到一束煙花里，這些粒子信息都統(tǒng)一被封裝成 Particle 這個Bean類;

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

Particle類具有隨機(jī)的顏色、大小、速度以接近真實，同時設(shè)定了煙花種子的初始位置坐標(biāo)和半徑等信息，每個煙花種子發(fā)散出來的粒子位置會根據(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);
    }

每繪制一幀會調(diào)用FireWork的run方法，該方法中會在 view 的 onDraw 回調(diào)中去不斷調(diào)用當(dāng)前粒子的update和display方法;update方法用于更新每個粒子的速度、加速度和位置坐標(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);//碎片個數(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)化

這時候功能基本實現(xiàn)了，剩下的就是將每一個煙花繪制在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);
        }
    }

然而你會發(fā)現(xiàn)性能很糟糕,幀數(shù)隨著粒子數(shù)的增加直線下降直到個位數(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);
        }
    }

寫在最后

到這里整個煙花動效就完成了，由于篇幅有限，確實無法將每一個細(xì)節(jié)講解詳細(xì)，在這里提前給各位拜年了!祝大家工作順利，身體健康，全家和和美美，萬事如意!

責(zé)任編輯：姜華來源：程序員巴士

Canvas 煙花粒子特效

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡