JavaScript案例之粒子烟花

玉案轩窗

已于 2023-07-14 16:40:35 修改

阅读量1w

点赞数 1

分类专栏： JavavScript实践案例文章标签： javascript canvas 思路分析与实现

于 2017-07-31 20:48:11 首次发布

本文链接：https://blog.csdn.net/s1879046/article/details/76468768

版权

9 篇文章 1 订阅

订阅专栏

前一段周末学习一下Canvas案例的源码，分析了一下一些案例的实现思路，拓宽一下知识面，并按照案例的实现思路自己实现了下，本系列文章是分享一些觉得有趣的案例以及分析其实现思路。

本次分享案例是粒子烟花，该源码在网上有别人分享，该案例是涉及的主要知识点是Canvas方面的知识以及路径计算相关的数学知识，具体实现效果如下：
烟花效果

在本案例中实现的功能：

动画：就是画面不断的切换，人眼视觉残留的效果，之前好像在哪看过中国的电视是每秒24帧，即每一秒切换24幅画面形成动态的效果。

通过对动画概念的简单熟知，可以知道在浏览器上实现动画也是如此，那么问题就变得清晰了。想要实现动画效果，我们就需要关注每一幅画面的整体不变的部分以及局部改变的部分，正是改变的部分才是动画的内容以及关键点。

就本案例来说，上面的动画部分有：

现在就来详细分析各个动画部分的实现：

目标点的闪烁、
所谓的闪烁，直观上表现的是大小大小的交替，注意这两个字眼：‘大小’， ‘交替’，所谓大小即是圆环的半径，交替则表示圆环的半径是有范围的，当达到范围临界值，就要进行相反方向的变化。
子弹的轨迹
子弹存在长度及角度，实际上角度以及子弹每次的终点确定都是使用勾股定理。

可以使用Math中的函数来求出目标点和发射点的斜边与x轴方向的角度，那么子弹移动如何实现，我们已经知道动画是由每一帧每一帧画面组成的，那么子弹移动就要改变每一帧画面中子弹的起始位置和终点位置，如何确定每次子弹移动后的x轴和y轴值呢？
有了角度，需要知道斜边，即每次子弹移动的距离，这个不是你自己定义的吗，由此就可实现子弹的移动。
烟花的爆炸
烟花是由一定数量的粒子组成，每个粒子都是圆形，每个粒子的角度不同，每个粒子消失的时间不同，还要有较为逼真的重力效果。上面试实现粒子爆炸的关键因素。
一定数量的粒子表示烟花是由粒子元素组成，我们改变的就是这一定数量的粒子
烟花爆炸的扩散效果就是通过改变一定数量粒子的x轴来实现。
烟花重力效果就是通过y轴值的改变来实现
烟花消失的效果就是通过烟花粒子的透明度来实现

想要实现整体的效果，需要定时重绘Canvas, 可以使用setInterval或者requestAnimationFrame，注意时间的取值，前者取时1000 / 60。

具体的实现代码以及详细的注释会上传到我的Github上，如果感兴趣可以看看。

致远行的你我

关注