JS实现烟花绽放的code
2017-10-26 本文已影响0人
江南之城
首先来梳理一下如何实现烟花绽放的思路:
1、烟花的发射:需要创建一个div模拟发射,发射的动画可以采用“缓冲运动”的动画来实现。也有其他运动可以选择,但缓冲运动更加形象反映烟发发射的过程额。
2、烟花的绽放:在烟花绽放前,则需要隐藏发射的div了,然后用添加子元素的方式,添加更多的div,使其做抛物线运动,展现烟花绽放的效果。
3、当烟花发射后及烟花绽放后,注意不是单纯的隐藏,而是利用移除节点的方式,将其不显示。
下面就开始我们的代码了:

上面是建立的简单的主体内容:新建了两个class属性名:·fire代表发射烟花的属性设置,·spark代表烟花绽放时的属性设置。

以上是利用了构造函数的方法创建的属性和方法。首先创建烟花节点并发射,给出该构造函数的属性和方法。当发射时主要用了缓冲运动,调取了animate();这个函数,当运动完后,便会调取Spark(x,y)、init()、paralora()函数,从而创建30到60个火花,并做抛物线的运动。如下便是所调用的函数。

在调取了抛物线运动,不能让创建的烟花一直运动,故做了一下判断,当超过浏览器窗口时,所创建的烟花节点将会自动移除,看如下代码。

如下是animate函数代码:


通过以上代码运行后,就会出现美丽的烟花了。