JS烟花案例

标签：callback   tar   false   pre   har   --   index   top   clear   

html代码部分

JS代码运动函数

/*
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-17 18:01:21
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-18 19:14:55
 */
/**
 * 多属性的动画函数
 * @param {*} ele 需要运动的节点
 * @param {*} attr_options 传入的是一个需要运动的属性包括运动的目标值，操作的节点属性 
 * @param {*} timefn 运动的形式，默认是缓冲运动
 * @param {*} speed  运动的速度
 */
function animate(ele, attr_options, callback, timefn = "swing", speed = 5) {

    // 我们需要把传入的options处理成
    /* 
        {“width : {
            target : 200,
            iNow : 100
        }}这个形式
    */

    for (var attr in attr_options) {
        attr_options[attr] = {
            target: attr === "opacity" ? parseInt(attr_options[attr] * 100) : attr_options[attr],
            // 需要计算得到
            iNow: attr === "opacity" ? parseInt(getComputedStyle(ele)[attr] * 100) : parseInt(getComputedStyle(ele)[attr])
        }
    }

    //    为了防止每个节点的定时器冲突，每次进入的时候我们需要先清理下节点的定时器
    clearInterval(ele.timer);
    //    然后再去设置定时器
    ele.timer = setInterval(function () {

        // 因为是多属性运动，我们首先循环遍历每一个属性
        for (var attr in attr_options) {

            var target = attr_options[attr].target;

            var iNow = attr_options[attr].iNow;

            // 计算speed 判断是不是缓冲运动
            if (timefn === "swing") {
                speed = (target - iNow) / 20;
                // 为了防止速度无法达到一个整数
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            }
            // 判断是不是匀速运动
            else if (timefn === "liner") {
                speed = attr_options[attr].iNow 

JS代码核心主业务代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-18 19:16:48
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-18 20:12:07
 */
class FireWork {
    // 构造器
    /**
     * 
     * @param {*} x x轴坐标
     * @param {*} y y轴坐标
     * @param {*} seletor 选择器名
     */
    constructor(x, y, seletor) {
        // 父容器的节点
        this.main = document.querySelector(seletor);

        this.init(x, y);
    }

    /**
     * 初始化方法
     * @param {*} x x的坐标 
     * @param {*} y y的坐标
     */
    init(x, y) {

        this.x = x;
        this.y = y;

        // 创建的烟花的节点
        this.ele = this.createFireWorkEle();
        // 运动的最大left值
        this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
        // 运动的最大的top值
        this.top_max = this.main.offsetHeight - this.ele.offsetHeight;

        // 设置烟花的开始颜色
        this.randomColor(this.ele);
        // 烟花开始运动
        this.fireworkUp(this.ele);
    }
    /**
     * 创建烟花的元素
     */
    createFireWorkEle() {
        // 创建节点
        let ele = document.createElement("div");
        // 设置类名
        ele.className = "fire";
        // 在父容器追加节点
        this.main.appendChild(ele);
        return ele;
    }

    /**
     * 
     * 烟花运动的方法
     * @param {*} ele 运动的这个烟花
     */
    fireworkUp(ele) {

        // 设置left
        ele.style.left = this.x + "px";
        // 烟花向上的运动我们使用animate动画
        animate(ele, {
            top: this.y,
        }, () => {

            // 等到这个烟花运动结束之后呢我们需要将这个烟花给删除了
            ele.parentNode.removeChild(ele);
            // 结束之后烟花开始爆炸
            this.fireworkBlast();

        });

    }

    /**
     * 烟花爆炸的方法
     */
    fireworkBlast() {
        // 我们设置爆炸的数量为20
        for (let i = 0; i  {
                // 删除烟花
                ele.parentNode.removeChild(ele)
            });
        }
    }

    /**
     * 随机获取坐标点
     */
    randomPos() {
        return {
            left: Math.round(Math.random() * this.left_max),
            top: Math.round(Math.random() * this.top_max)
        }
    }

    /**
     * 
     * 随机背景颜色
     * @param {*} ele 小烟花的元素
     */
    randomColor(ele) {

        return ele.style.backgroundColor = utils.randomColor();
    }

}

utils的随机生成颜色的函数

 let randomColor = function () {
        let res = "#";
        for (let i = 0; i 

JS烟花案例

标签：callback   tar   false   pre   har   --   index   top   clear   

原文地址：https://www.cnblogs.com/xfy196/p/12546162.html