JS烟花案例优化版

标签：inter   包括   red   tail   ati   tno   get   cti   col   

不明白为什么是烟花优化版本的先参考作者的烟花基础版本

烟花优化版本主要实在优化爆炸的范围和运动上做了优化，爆炸范围我们采用已圆的爆炸方式，以鼠标点击的位置为圆形爆炸的烟花效果

运动函数部分

/*
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-17 18:01:21
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-18 20:49:13
 */
/**
 * 多属性的动画函数
 * @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 

工具类

 let res = "#";
        for (let i = 0; i 

核心烟花JS代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-18 19:16:48
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-21 13:51:37
 */
class FireWork {
    // 构造器
    /**
     * 
     * @param {*} x x轴坐标
     * @param {*} y y轴坐标
     * @param {*} seletor 选择器名
     */
    constructor(x, y, seletor, blastType) {
        // 父容器的节点 单例模式，因为这个父盒子只有一个随意每次创建烟花的时候我们需要判断一下，如果存在了这个父盒子我们就不需要再去冲去获取节点元素了
        if(FireWork.main && FireWork.main.seletor === seletor){
            this.main = FireWork.main.ele;
            console.log("dasd");
        }else {
            FireWork.main = {
                ele : document.querySelector(seletor),
                seletor : seletor,
            }
            this.main = FireWork.main.ele;
        }
        this.blastType = blastType;

        // 初始化
        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)
            });
        }
    }

    /**
     * 原型烟花爆炸状态
     * @param {*} now_index 当前的元素下标
     * @param {*} total 总共的下标
     */
    circularBlast(now_index, total) {
        // 设定圆的半径为100
        let r = 100;
        // 我们需要计算圆的角度
        let deg = now_index / total * 360;
        // 在计算弧度
        let reg = Math.PI / 180 * deg;

        // 返回结果
        return {
            left: parseInt(Math.cos(reg) * r) + this.x,
            top: parseInt(Math.sin(reg) * r) + this.y,
        }
    }

    /**
     * 随机获取坐标点
     */
    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();
    }

}

JS烟花案例优化版

标签：inter   包括   red   tail   ati   tno   get   cti   col   

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