原生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