原生JS实现烟花炸开为圆形的效果【附源码及运动的封装】

用JS实现烟花炸开主要的过程包括

• 首先要知道烟花就是一个实例，所以实例包括两个：主体烟花实例和炸开的小烟花实例
• 主体烟花实例需要创建元素，设置默认位置，颜色。当运动到点击的位置的时候删除主体烟花并且创建小烟花。
• 炸开的小烟花实例需要创建，设置位置和颜色，并计算应该运动到哪个位置删除。

下边就是实现的代码：

css样式如下：

/*css样式部分*/
#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}

外部需要引用的封装运动的js文件，代码如下：

//外部需要引用的js文件，也就是运动时的封装

// 带有px的css属性和透明度，可以运动
// 背景色不可以
// 参数2被修改成了对象，那么在使用之前需要解析（遍历）
function move(ele,obj,cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        // 假设状态为：可以清除计时器
        var i = true;
        // 因为在计时器中才开始使用到对象中的信息，所以在计时器中遍历
        // 并提前换来的属性和目标变量
        for(var attr in obj){
            if(attr == "opacity"){
                var iNow = getStyle(ele,attr) * 100;
            }else{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            let speed = (obj[attr] - iNow)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            // 只要有一个属性到目标，就停了，不对
            // 必须所有属性到目标，才能停

            // 只要有一个属性没到目标，绝对不能停
                // 用状态来标记到底要不要停止计时器

            // 只要有一个属性没到目标：绝对不能清除计时器
            if(iNow !== obj[attr]){
                i = false;
            }
            if(attr == "opacity"){
                ele.style.opacity = (iNow + speed)/100;
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
        }
        // 如果每次计时器执行结束，所有属性都执行了一遍之后，状态还是true，表示，没有被改成false，如果没有被改成false，表示没有属性没到终点，那么状态还是false就不清除
        if(i){
            clearInterval(ele.t);
            // 用户决定在动画结束时要执行的功能，万一用户没传参，做个默认判断
            if(cb){
                cb();
            }
            // cb && cb();
        }
    }, 30);
}

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

js主要代码如下：

    class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            // 因为传给了new的方法，那么constructor负责接收
            // 接收之后，直接解析到this，方便在后续方法中使用
            this.x = pos.x;
            this.y = pos.y;
        }
        create(){
            // 创建元素设置样式和位置
            this.f = document.createElement("div");
            this.f.className = "fire";
            this.f.style.background = randomColor();
            this.cont.appendChild(this.f);
            // 位置为鼠标点击的坐标的位置
            this.f.style.left = this.x + "px";
            // 初始信息设置完成后，开始运动
            this.fireMove();
        }
        fireMove(){
            // 调用了运动函数，传入要运动的元素，运动的属性和目标，结束后要做的事情
            move(this.f,{
                top:this.y
            },()=>{
                // 当主体烟花运动到目标后，删除主体烟花
                this.f.remove();
                // 准备创建小烟花：
                // 准备总个数
                var randomNum = random(10,20);
                // 准备小烟花炸出来的圆的半径
                var r = random(100,200);
                // 根据个数，重复创建小烟花实例
                for(var i=0;i<randomNum;i++){
                    // 创建实例时，需要将：以下信息都传到小烟花的实例中
                        // 大框，坐标，半径，个数，当前烟花的索引
                    var sf = new SmallFire({
                        cont:this.cont,
                        x:this.x,
                        y:this.y,
                        r:r,
                        sum:randomNum,
                        i:i
                    });
                    // 执行创建方法
                    sf.create();
                }
            });
        }
    }

    class SmallFire{
        constructor(obj){
            // 接收并解析：大框，坐标，半径，个数，当前烟花的索引
            this.cont = obj.cont;
            this.x = obj.x;
            this.y = obj.y;
            this.r = obj.r;
            this.sum = obj.sum;
            this.i = obj.i;
        }
        create(){
            // 创建小烟花的元素，设置位置，和样式
            this.f = document.createElement("div");
            this.f.className = "small-fire";
            this.f.style.background = randomColor();
            this.cont.appendChild(this.f);
            this.f.style.left = this.x + "px";
            this.f.style.top = this.y + "px";
            // 小烟花开始运动
            this.smallMove();
        }
        smallMove(){
            // 为了炸成一个圆，计算目标，根据三角函数和角度转弧度公式，和计算多个点在圆上的平均角度公式
            move(this.f,{
                left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
                top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y
            },()=>{
                this.f.remove();
            });
        }
    }

    var ocont = document.getElementById("container");
    ocont.onclick = function(eve){
        var e = eve || window.event;
        // 获取坐标，准备给将来的烟花元素使用
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // 创建烟花元素，时，将坐标传进去，方便将来使用
        var f = new Fire({
            x:x,
            y:y
        });
        // 执行创建烟花的方法
        f.create();
    }


    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
    }

html如下：

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