首先来梳理一下如何实现烟花绽放的思路：
1、烟花的发射：需要创建一个div模拟发射，发射的动画可以采用“缓冲运动”的动画来实现。也有其他运动可以选择，但缓冲运动更加形象反映烟发发射的过程额。
2、烟花的绽放：在烟花绽放前，则需要隐藏发射的div了，然后用添加子元素的方式，添加更多的div，使其做抛物线运动，展现烟花绽放的效果。
3、当烟花发射后及烟花绽放后，注意不是单纯的隐藏，而是利用移除节点的方式，将其不显示。
下面就开始我们的代码了：
上面是建立的简单的主体内容：新建了两个class属性名：·fire代表发射烟花的属性设置，·spark代表烟花绽放时的属性设置。
以上是利用了构造函数的方法创建的属性和方法。首先创建烟花节点并发射，给出该构造函数的属性和方法。当发射时主要用了缓冲运动，调取了animate（）；这个函数，当运动完后，便会调取Spark（x，y）、init（）、paralora（）函数，从而创建30到60个火花，并做抛物线的运动。如下便是所调用的函数。
在调取了抛物线运动，不能让创建的烟花一直运动，故做了一下判断，当超过浏览器窗口时，所创建的烟花节点将会自动移除，看如下代码。
如下是animate函数代码：
通过以上代码运行后，就会出现美丽的烟花了。
网友评论