烟花动画实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44381873/article/details/105036881

一、先来一个基础布局

 <style>
        #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%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>

二、引入外部封装的运动文件

<script src="js/move.2.0.js"></script>

这个代码内容如下

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];
    }
}

三、核心代码

 class Fire{
        constructor(pos){
            this.cont = document.getElementById("container");
            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);
                
                // 根据个数，重复创建小烟花实例
                for(var i=0;i<randomNum;i++){
                    // 创建实例时，需要将：以下信息都传到小烟花的实例中
                        // 大框，坐标
                    var sf = new SmallFire({
                        cont:this.cont,
                        x:this.x,
                        y:this.y
                    });
                    // 执行创建方法
                    sf.create();
                }
            });
        }
    }

    class SmallFire{
        constructor(obj){
            // 接收并解析：大框，坐标
            this.cont = obj.cont;
            this.x = obj.x;
            this.y = obj.y;
        }
        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(){

            // 因为要做自由落体效果，所以，小烟花的运动不适合使用曾经的缓冲运动
            // 适合加速运动
            // 所以当前的运动属于，重新写的

            // 计算随机的步长
            var speedX = random(-10,10);
            var speedY = random(-20,0);
            // 开启计时器
            this.f.t = setInterval(() => {
                // 因为是自由落体，判断元素是否超过了大框
                if(this.f.offsetTop > this.cont.offsetHeight){
                    // 超出了，清除计时器，删除对应小烟花
                    clearInterval(this.f.t);
                    this.f.remove();
                }else{
                    // 没有超出，正常根据步长移动
                    this.f.style.left = this.f.offsetLeft + speedX + "px";
                    // 过程中，将Y的步长，不断的增大，造成重力加速效果
                    this.f.style.top = this.f.offsetTop + speedY++ + "px";
                }
            }, 30);
        }
    }

    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)})`;
    }