Android 基于绘制缓冲的烟花效果实现

前言

目前为止，我数了下我的文章总数，已经70多篇了，写的基本都是实用性文章，而且基本都在最近3个月以内完成，为什么写这么多呢？主要原因是大环境比较差，希望多总结一下经验，其实我本来打算写open gl es系列的，因为当前的本职工作是音视频相关的，没想Canvas 2D的倒是越写越多了。

我在掘金的第一篇文章《Egl Context 与 open gl 纹理关系》和第二篇文章《Android系统中的坐标与矩阵体系》都是基础篇，如果有同学打算学习自定义View，建议熟悉下这两篇文章。

三月以前，我也写过《Android 烟花效果》，这篇我相当于做了个基础框架，在此基础上扩展和填充，就能扩展出很多效果。不过，当时，我在这篇文章中着重强调了一件事

重点：构建闭合空间

之所以强调这件事的原因是，只有闭合空间的图形才能填充颜色、图片纹理。我们知道，Canvas 绘制方法仅仅只有圆、弧、矩形、圆角矩形是可以闭合的，除此之外就是Path了。

想象一下，如果让你画一个三角形并填充上颜色，你可能的方法只有通过裁剪Path或者使用Path绘制才行，而Path也有性能问题。

所以，那篇文章中的烟花效果，本质上还不够完美，因为一些特殊的填充效果还是很难实现。

新方案

目前我觉得可行的方案有两种

基于数学和Paint线宽渐变

如：贝塞尔曲线函数 + strokeWidth渐渐增大 + Color 变化

这种方式是利用贝塞尔曲线计算出路径（不用Path，根据数学公式描绘），然后再规定的时间内让Paint的strokeWidth随着贝塞尔曲线 * time的偏移而增大，就能绘制出效果不错的的烟花条。

基于绘制缓冲

首先，要知道什么是缓冲，缓冲其实就是通常意义上存储数据的对象，比如byte数组、ByteBuffer等，但如果再聚焦Android 平台，我们还有FBO、VBO等。当然，最容易被忽略的是Bitmap，Bitmap 其实也是FBO的一种，不过这里我称之为"可视化缓冲"。

如果追踪的具体的对象上，除了Bitmap之外，Layer也是缓冲。

为什么使用缓冲可以优化烟花效果呢？

我们先了解下缓冲的特性：

• 占用空间较大，狭义上来说，这种数据不仅仅占用空间大，而且（虚拟）内存需要连续
• 空间可复用性强，如享元模式的ByteBuffer、alpha离屏渲染buffer、inBitmap等
• 会产生脏数据，比如上一次buffer中的数据，如果没有清理的话依然会保存
• 数据可复用性强，脏数据并不一定"脏"，有时还能复用

那么，本篇我们选哪种呢

最终方案

本篇，我们就选择这种方案了，因为总的来说，第一种方式可能需要很多次的绘制，相当考验CPU。而使用绘制缓冲的的话，我们还可以复用上次的数据，这就相当于将贝一次的绘制画面保留，然后再一次绘制时，在之前的基础上进一步完善，这种显然是利用"空间换取时间"的做法。

Android中有不少地方使用了"空间换取时间"的绘制，比如alpha叠加、SurfaceView双缓冲、TextureView缓冲等，当然，我们在《Android 视频图像实时文字化》中还是用了以Bitmap为缓冲的技术。

详细设计

本篇使用了绘制缓冲，原则上使用Bitmap是可以的，但是在使用的过程中发现，Bitmap在xformode绘制时性能还是很差，显然提升流畅度是必要原则。那么，显然你可能想到利用线程异步绘制，是的，我也打算这么做，但是相当，使用线程渲染，那为什么不使用TextureView、SurfaceView或者GLSurfaceView呢？于是，我就没有再使用Bitmap的想法了。

但是，基于做音视频的经验，我选了个兼容性最好性能最差的TextureView，其实我这里本打算选GLSurfaceView的，因为其性能和兼容性都是居中水平，不过涉及到顶点、纹理的一套东西，打算后续在音视频专栏写这类文章。

简单说下SurfaceView的问题，性能最好，但其不适合在滑动的页面调用，因为有些设备会出现画面漂移和缩放的问题，另外不支持clipchildren等，理论上也是适合本篇的，但是如果app回到后台，其Surface会自动销毁，因此，控制线程的逻辑就会有些复杂。

在这里我们看下TextureView源码，其创建的SurfaceTexture并不是单缓冲模式，但是TexureLayer却是名副其实的缓冲。

mLayer = mAttachInfo.mThreadedRenderer.createTextureLayer();
boolean createNewSurface = (mSurface == null);
if (createNewSurface) {
    // Create a new SurfaceTexture for the layer.
    mSurface = new SurfaceTexture(false);
    nCreateNativeWindow(mSurface);
}
mLayer.setSurfaceTexture(mSurface);

下面是我们的详细流程。

实现烟花逻辑

下面是我们本篇的实现流程。

定义FireExploreView

我们本篇基于TextureView实现绘制逻辑，而TextureView必须要开启硬件加速，其次我们要实现TextureView.SurfaceTextureListener，用于监听SurfaceTexture的创建和销毁。理论上，TextureView的SurfaceTexture可以复用的，其次，如果onSurfaceTextureDestroyed返回false，那么SurfaceTexture的销毁是由你自己控制的，TextureView不会主动销毁。

@Override
public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
 
    return false;
}

另外，我们要知道，默认情况下TextureView使用的是TextureLayer，绘制完成之后，需要在RenderThread上使用gl去合成，这也是性能较差的主要原因，尤其是低配设备，使用TextureView也做不到性能优化，最终还是得使用SurfaceView或者GLTextureView或者GLSurfaceView，当然我比较推荐GL系列，主要是离屏渲染可以避免MediaCodec切换Surface引发黑屏和卡住的问题。

那么，当然，这里我们肯定也要使用到线程，相关代码如下

@Override
public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int width, int height) {
    drawThread = new Thread(this);
    this.surfaceTexture = surfaceTexture;
    this.surface = new Surface(this.surfaceTexture);
    this.isRunning = true;
    this.drawThread.start();
}

@Override
public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
    isRunning = false;
    if (drawThread != null) {
        try {
            drawThread.interrupt();
        }catch (Throwable e){
            e.printStackTrace();
        }
    }
    drawThread = null;
    //不让TextureView 销毁SurfaceTexture，这里返回false
    return false; 
}

定义粒子

无论任何时候，不要把粒子不当对象，一些开发者对粒子对象嗤之以鼻，这显然是不对的，不受你管理的粒子凭什么听你的指挥。

当然，任何粒子的运动需要符合运动学方程，而二维平面的运动是可以拆分为X轴和Y轴单方向的运动的。

static final float gravity = 0.0f;
static final float fraction = 0.88f;
static final float speed = 50f; //最大速度

    
static class Particle {
    private float opacity;  //透明度
    private float dy; // y 轴速度
    private float dx; // x 轴速度
    private int color; //此颜色
    private float radius; //半径
    private float y; // y坐标
    private float x; // x坐标

    Particle(float x, float y, float r, int color, float speedX, float speedY) {
        this.x = x;
        this.y = y;
        this.radius = r;
        this.color = color;
        this.dx = speedX;
        this.dy = speedY;
        this.opacity = 1f;
    }

    void draw(Canvas canvas, Paint paint) {
        int save = canvas.save();
        paint.setAlpha((int) (this.opacity * 255));
        paint.setColor(this.color);
        canvas.drawCircle(this.x, this.y, this.radius, paint);
        canvas.restoreToCount(save);
    }

    void update() {
        this.dy += gravity; 
        //加上重力因子，那么就会出现粒子重力现象，这里我们不使用时间了，这样简单点

        this.dx *= fraction;  // fraction 是小于1的，用于降低速度
        this.dy *= fraction;  // fraction 是小于1的，用于降低速度

        this.x += this.dx;
        this.y += this.dy;

        this.opacity -= 0.03; //透明度递减
    }
}

上面是粒子以及更新方法、绘制逻辑。

管理粒子

我们使用List管理粒子

static final int maxParticleCount = 300;
List<Particle> particles = new ArrayList<>(maxParticleCount);

初始化粒子

粒子的初始化是非常重要的，初始化位置的正确与否会影响粒子的整体效果，显然，这里我们需要注意。

float angleIncrement = (float) ((Math.PI * 2) / maxParticleCount); //平分 360度
float[] hsl = new float[3];

for (int i = 0; i < maxParticleCount; i++) {
    hsl[0] = (float) (Math.random() * 360);
    hsl[1] = 0.5f;
    hsl[2] = 0.5f;
    int hslToColor = HSLToColor(hsl);

    Particle p = new Particle(x, y,
            2.5f,
            hslToColor,
            (float) (Math.cos(angleIncrement * i) * Math.random() * speed),
            (float) (Math.sin(angleIncrement * i) * Math.random() * speed)
    );
    particles.add(p);
}

不过，在这里我们还需要注意的是，这里我们使用HLS，这是一种色彩空间，和RGB不一样的是，他有Hue（色调）、饱和度、亮度为基准，因此，有利于亮色的表示，因此适合获取强调亮度的色彩。

与rgb的转换逻辑如下

public static int HSLToColor(@NonNull float[] hsl) {
    final float h = hsl[0];
    final float s = hsl[1];
    final float l = hsl[2];

    final float c = (1f - Math.abs(2 * l - 1f)) * s;
    final float m = l - 0.5f * c;
    final float x = c * (1f - Math.abs((h / 60f % 2f) - 1f));

    final int hueSegment = (int) h / 60;

    int r = 0, g = 0, b = 0;

    switch (hueSegment) {
        case 0:
            r = Math.round(255 * (c + m));
            g = Math.round(255 * (x + m));
            b = Math.round(255 * m);
            break;
        case 1:
            r = Math.round(255 * (x + m));
            g = Math.round(255 * (c + m));
            b = Math.round(255 * m);
            break;
        case 2:
            r = Math.round(255 * m);
            g = Math.round(255 * (c + m));
            b = Math.round(255 * (x + m));
            break;
        case 3:
            r = Math.round(255 * m);
            g = Math.round(255 * (x + m));
            b = Math.round(255 * (c + m));
            break;
        case 4:
            r = Math.round(255 * (x + m));
            g = Math.round(255 * m);
            b = Math.round(255 * (c + m));
            break;
        case 5:
        case 6:
            r = Math.round(255 * (c + m));
            g = Math.round(255 * m);
            b = Math.round(255 * (x + m));
            break;
    }

    r = constrain(r, 0, 255);
    g = constrain(g, 0, 255);
    b = constrain(b, 0, 255);

    return Color.rgb(r, g, b);
}
private static int constrain(int amount, int low, int high) {
    return amount < low ? low : Math.min(amount, high);
}

粒子绘制

绘制当然简单了，方法实现不是很复杂，调用如下逻辑即可，当然，opacity<=0 的粒子我们并没有移除，原因是因为remove 时， 可能引发ArrayList内存重整，这个是相当消耗性能的，因此，还不如遍历效率高。

protected void drawParticles(Canvas canvas) {
    canvas.drawColor(0x10000000); //为了让烟花减弱效果，每次加深绘制
    for (int i = 0; i < particles.size(); i++) {
        Particle particle = particles.get(i);
        if (particle.opacity > 0) {
            particle.draw(canvas, mPaint);
            particle.update();
        }
    }
}

缓冲复用

那么，以上就是完整的绘制逻辑了，至于Surface调用逻辑呢，其实也很简单。

不过这里要注意的是，只有接受到command=true的时候，我们才清理画布，不然，我们要保留缓冲区中的数据。我们知道，一般View在onDraw的时候，RenderNode给你的Canvas都是清理过的，而这里，我们每次通过lockCanvas拿到的Canvas是带有上次缓冲数据的。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    canvas = surface.lockHardwareCanvas();
} else {
    canvas = surface.lockCanvas(null);
}

if(isCommand){
    particles.clear();
    canvas.drawColor(0x99000000, PorterDuff.Mode.CLEAR); //清理画布
    explode(getWidth() / 2f, getHeight() / 2f);
    isCommand = false;
}
//绘制粒子
drawParticles(canvas);

surface.unlockCanvasAndPost(canvas);

显然，我们能得到两条经验：

• lockCanvas获取到的Canvas是带有上次绘制数据的
• 利用缓冲绘制不仅强调结果，而且还强调过程，一般的Canvas绘制仅仅强调结果

Blend效果增强

实际上面的效果还有点差，就是尖端亮度太低，为此，我们可以使用Blend进行增强，我们设置BlendMode为PLUS，另外上面我们的重力是0，现在我们调整一下gravity=0.25f。

PaintCompat.setBlendMode(mPaint, BlendModeCompat.PLUS);

效果

多线程绘制

总的来说，TextureView可以在一些情况下显著提升性能，当然，前提是你的主线程流畅。

这里的逻辑就是TextureView的用法了，我们就不继续深入了，本篇末尾提供源码。

总结

以上是本篇的内容，也是我们要掌握的技巧，很多时候，我们对Canvas的绘制，过于强调结果，结果设计了很多复杂的算法，其实，基于过程的绘制显然更加简单和优化。

到这里本篇就结束了，希望本篇对你有所帮助。

源码

public class FireExploreView extends TextureView implements TextureView.SurfaceTextureListener, Runnable {
    private TextPaint mPaint;
    private SurfaceTexture surfaceTexture;
    private Surface surface;
    {
        initPaint();
    }
    public FireExploreView(Context context) {
        this(context, null);
    }
    public FireExploreView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setSurfaceTextureListener(this);
    }

    private void initPaint() {
        //否则提供给外部纹理绘制
        mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStyle(Paint.Style.FILL);
        PaintCompat.setBlendMode(mPaint, BlendModeCompat.PLUS);

    }

    static final float gravity = 0.21f;
    static final float fraction = 0.88f;
    static final int maxParticleCount = 300;
    List<Particle> particles = new ArrayList<>(maxParticleCount);
    float[] hsl = new float[3];

    volatile boolean isCommand = false;
    static final float speed = 50f;
    Thread drawThread = null;

    public void startExplore() {
        isCommand = true;
    }

    void explode(float x, float y) {
        float angleIncrement = (float) ((Math.PI * 2) / maxParticleCount);

        for (int i = 0; i < maxParticleCount; i++) {
            hsl[0] = (float) (Math.random() * 360);
            hsl[1] = 0.5f;
            hsl[2] = 0.5f;
            int hslToColor = HSLToColor(hsl);

            Particle p = new Particle(x, y,
                    3f,
                    hslToColor,
                    (float) (Math.cos(angleIncrement * i) * Math.random() * speed),
                    (float) (Math.sin(angleIncrement * i) * Math.random() * speed)
            );
            particles.add(p);
        }
    }

    protected void drawParticles(Canvas canvas) {
        canvas.drawColor(0x10000000);
        for (int i = 0; i < particles.size(); i++) {
            Particle particle = particles.get(i);
            if (particle.opacity > 0) {
                particle.draw(canvas, mPaint);
                particle.update();
            }
        }
    }


    static class Particle {
        private float opacity;
        private float dy;
        private float dx;
        private int color;
        private float radius;
        private float y;
        private float x;

        Particle(float x, float y, float r, int color, float speedX, float speedY) {
            this.x = x;
            this.y = y;
            this.radius = r;
            this.color = color;
            this.dx = speedX;
            this.dy = speedY;
            this.opacity = 1f;
        }

        void draw(Canvas canvas, Paint paint) {
            int save = canvas.save();
            paint.setAlpha((int) (this.opacity * 255));
            paint.setColor(this.color);
            canvas.drawCircle(this.x, this.y, this.radius, paint);
            canvas.restoreToCount(save);
        }

        void update() {
            this.dy += gravity;

            this.dx *= fraction;
            this.dy *= fraction;

            this.x += this.dx;
            this.y += this.dy;

            this.opacity -= 0.03;
        }
    }

    private volatile boolean isRunning = false;
    private final Object lockSurface = new Object();

    @Override
    public void run() {
        while (true) {
            synchronized (this) {
                try {
                    this.wait(20);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            if (!isRunning || Thread.currentThread().isInterrupted()) {
                synchronized (lockSurface) {
                    if (surface != null && surface.isValid()) {
                        surface.release();
                    }
                    surface = null;
                }
                break;
            }

            Canvas canvas = null;
            synchronized (lockSurface) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                    canvas = surface.lockHardwareCanvas();
                } else {
                    canvas = surface.lockCanvas(null);
                }

                if(isCommand){
                    particles.clear();
                    canvas.drawColor(0x99000000, PorterDuff.Mode.CLEAR);
                    explode(getWidth() / 2f, getHeight() / 2f);
                    isCommand = false;
                }

                drawParticles(canvas);
                surface.unlockCanvasAndPost(canvas);
            }
        }

    }

    @Override
    public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int width, int height) {
        drawThread = new Thread(this);
        this.surfaceTexture = surfaceTexture;
        this.surface = new Surface(this.surfaceTexture);
        this.isRunning = true;
        this.drawThread.start();
    }

    @Override
    public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {

    }

    @Override
    public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
        isRunning = false;
        if (drawThread != null) {
            try {
                drawThread.interrupt();
            }catch (Throwable e){
                e.printStackTrace();
            }
        }
        drawThread = null;
        return false;
    }

    @Override
    public void onSurfaceTextureUpdated(SurfaceTexture surface) {

    }

    public static int argb(float red, float green, float blue) {
        return ((int) (1 * 255.0f + 0.5f) << 24) |
                ((int) (red * 255.0f + 0.5f) << 16) |
                ((int) (green * 255.0f + 0.5f) << 8) |
                (int) (blue * 255.0f + 0.5f);
    }
    @ColorInt
    public static int HSLToColor(@NonNull float[] hsl) {
        final float h = hsl[0];
        final float s = hsl[1];
        final float l = hsl[2];

        final float c = (1f - Math.abs(2 * l - 1f)) * s;
        final float m = l - 0.5f * c;
        final float x = c * (1f - Math.abs((h / 60f % 2f) - 1f));

        final int hueSegment = (int) h / 60;

        int r = 0, g = 0, b = 0;

        switch (hueSegment) {
            case 0:
                r = Math.round(255 * (c + m));
                g = Math.round(255 * (x + m));
                b = Math.round(255 * m);
                break;
            case 1:
                r = Math.round(255 * (x + m));
                g = Math.round(255 * (c + m));
                b = Math.round(255 * m);
                break;
            case 2:
                r = Math.round(255 * m);
                g = Math.round(255 * (c + m));
                b = Math.round(255 * (x + m));
                break;
            case 3:
                r = Math.round(255 * m);
                g = Math.round(255 * (x + m));
                b = Math.round(255 * (c + m));
                break;
            case 4:
                r = Math.round(255 * (x + m));
                g = Math.round(255 * m);
                b = Math.round(255 * (c + m));
                break;
            case 5:
            case 6:
                r = Math.round(255 * (c + m));
                g = Math.round(255 * m);
                b = Math.round(255 * (x + m));
                break;
        }

        r = constrain(r, 0, 255);
        g = constrain(g, 0, 255);
        b = constrain(b, 0, 255);

        return Color.rgb(r, g, b);
    }
    private static int constrain(int amount, int low, int high) {
        return amount < low ? low : Math.min(amount, high);
    }

}