用js实现一个炫酷的烟花效果

我们要理清整个流程的思路。

首先建立一块画布，用于展示烟花的效果，然后就要去思考烟花燃放的流程，我们都知道烟花通常都是先有一份飞上天，然后再分散成很多个小烟花，并且每一个小烟花都有不同的样式以及运动方式。

所有整体思路就是先建立一个div作为我们的大烟花，当大烟花运动到我们鼠标点击的位置的时候，大烟花就会消失，然后就会产生更多的小烟花，并且这些小烟花的运动轨迹样式各不相同。

目录

1.建立一块画布（div）用于展示烟花的效果

2.获取节点

3.先实现大烟花（需要调用随机数方法，随机颜色方法，以及运动函数）

3.1首先先设置fire的样式

3.2设置一个随机数和随机颜色的方法（原型对象）

3.3封装一个运动函数（原型对象）

4.小烟花的实现

4.1设置samll-fire的样式

4.2设置小烟花的属性

---

1.建立一块画布（div）用于展示烟花的效果

/*给画布设置css样式  */




#container {



        width: 80%;



        height: 600px;



        border: 1px red solid;



        position: relative;



        margin: 20px auto;



        cursor: pointer;



        background: black;



    }

<!-- 设置一个div -->



 <div id="container"></div>

2.获取节点

 //获取节点




 var app = document.getElementById('container');



        //给app设置一个绑定事件




        app.onclick = function(event) {



                var e = event || window.event




               //获得鼠标点击的位置的坐标




                var pos = {



                    cy: e.offsetY,



                    cx: e.offsetX




                }



                new Fire(app, pos)



            }

 烟花的实现过程：先实现一个大的div运动到鼠标点击的位置，然后在散开成为很多个div

3.先实现大烟花（需要调用随机数方法，随机颜色方法，以及运动函数）

       // 构造函数




        function Fire(app, pos) {



            //把属性设置成变量




            this.app = app;



            this.pos = pos;



            //创建一个大的div




            this.bf = document.createElement('div');



            //设置一个类名




            this.bf.className = 'fire';



            //设置样式




            this.bf.style.left = this.pos.cx + 'px';



            this.bf.style.background = this.getColor();



            this.app.appendChild(this.bf);



            //调用运动函数




            this.move(this.bf, {



                top: this.pos.cy




            }, () => {



                this.bf.remove();



                this.smallFire();



            })



        }

'

运行
运行

3.1首先先设置fire的样式

这是fire的初始样式

 .fire {



        background: red;



        position: absolute;



        /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */




        bottom: 0px;



        width: 6px;



        height: 6px;



    }

3.2设置一个随机数和随机颜色的方法（原型对象）

 //获得一个随机数方法





Fire.prototype.rand = function(min, max) {



            return Math.round(Math.random() * (max - min) + min);



        }



 



 



//获得一个随机颜色的方法



 Fire.prototype.getColor = function() {



         let sum = '#';



         for (let i = 0; i < 6; i++) {



               sum += this.rand(0, 15).toString(16)



           }



             return sum;



           }

3.3封装一个运动函数（原型对象）

 Fire.prototype.move = function(ele, target, cb) {



                // clearInterval(times);




                let times = setInterval(function() {



                    // (this);




                    var onOff = true;



                    // 遍历运动的方向和目标




                    for (let attr in target) {



                        // attr 表示运动的属性




                        // (attr);




                        // 获取元素属性的实时值




                        let tmpVal = parseInt(this.getPos(ele, attr))



                            // 计算speed




                            // (tmpVal, attr);




                        let speed = (target[attr] - tmpVal) / 10;



                        // 取整




                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);



                        // 停止计时器,当一个属性运动到位置,设置开关状态




                        if (tmpVal == target[attr]) onOff = true;



                        // 让元素动起来




                        ele.style[attr] = tmpVal + speed + 'px';



                    }



 



                    // 判断开关状态,清除定时器




                    for (var moveAttr in target) {



                        // 如果不相等,就说明有属性没有运动到位置,定时器不能停止




                        if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {



                            onOff = false;



                            break;



                        }



                    }



                    if (onOff) {



                        clearInterval(times);



                        cb && cb();



                    }



                    // (1111);




                }.bind(this), 30)



            }



            // 获取元素的实时位置的函数




        Fire.prototype.getPos = function(obj, attr) {



            if (obj.currentStyle) { // 获取css的样式




                return obj.currentStyle[attr];



            } else {



                return getComputedStyle(obj)[attr]



            }



        }

通过以上几个步骤我们就可以得到大烟花的运动轨迹，大烟花运动到指定位置后就会消失，并且从消失的地方产生许多小烟花。由前面的分析可以知道，小烟花的运动轨迹和样式各不相同，接下来就是小烟花的实现

4.小烟花的实现

4.1设置samll-fire的样式

这是samll-fire的初始属性

 .small-fire {



        width: 10px;



        height: 10px;



        position: absolute;



        border-radius: 50%;



    }

4.2设置小烟花的属性

        //小烟花




        Fire.prototype.smallFire = function() {



            //首先我们设置小烟花的数量




            let num = this.rand(50, 60)



            //遍历 给每一个小烟花设置不同的样式




            for (let i = 0; i < num; i++) {



                let sf = document.createElement('div');



                sf.className = 'small-fire';



                sf.style.left = this.pos.cx + 'px';



                sf.style.top = this.pos.cy + 'px';



                sf.style.background = this.getColor();



                //(sf);




                //追加到页面中




                this.app.appendChild(sf);



                //使小烟花的运动轨迹成圆周运动




                //var top = parseInt(( / 180 * 360 / num * i) * r) + ;




                //var left = parseInt(( / 180 * 360 / num * i) * r) + ;




                 //给小烟花一个随机的位置，可以是在画布里面的任意一个位置




                 let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);



                 let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);



                //调用运动函数




                this.move(sf, {



                    top: top,



                    left: left



                }, function() {



                    sf.remove();



                })



            }



        }