小程序纯js模拟烟花特效

最新推荐文章于 2024-09-14 09:16:59 发布

NEOS55555

最新推荐文章于 2024-09-14 09:16:59 发布

阅读量9.9k

点赞数 2

分类专栏：烟花特效

本文链接：https://blog.csdn.net/u013891628/article/details/78938438

版权

本文介绍如何使用JavaScript模拟烟花绽放的动画效果。通过创建圆周运动的方块，模拟烟花从圆心向四周扩散的轨迹。通过改变半径和运用CSS3动画，使得效果更加逼真。通过封装动画和利用jQuery控制，可以实现一个简单的烟花特效，并可通过更换背景图以展示不同样式。

摘要由CSDN通过智能技术生成

如下图
这是把特效放到鼠标后的效果

首先描绘圆周运动

// d1
/*css*/
div{
    height: 4px;
    width: 4px;
    background: red;
    position: absolute;
}
//js
var div = document.getElementById('div'); // 画运动点
document.getElementsByTagName('body')[0].appendChild(tdiv); // 添加节点

var deg = 0;    // 运动角度
var r = 100;    // 半径
var center = [300, 300] // 圆心
var dd = Math.PI/180;   // PI和角度之间的转换

setInterval(function(){
   
    deg++;
    div.style.left = center[0] + Math.cos(deg * dd) * r + 'px';
    div.style.top = center[1] + Math.sin(deg * dd) * r + 'px';
},16);

以上代码运行后可以看到一个圆周运动红色方块
完成上述步骤后，有什么用呢？
烟花的绽放，想象一下，可以当成很多方块从一个从圆心开始向四周扩算的一种运动方式。
一束烟花，有10个绽放点，那就是每隔360 / 10 = 36度，就有一条运动轨迹。
这样就好办了

// d2
var divs = [];  // 保存烟花节点
var len = 10;   // 烟花节点个数
var temp = 360 / len;   // 运动轨迹所隔角度

for(var i = 0; i < len; i++){
    var tdiv = document.createElement('div');
    var tr1 = r;        // 半径
    var deg = i * temp;   // 当前轨迹所在的角度值

    var left = center[0] + Math.cos(deg * dd) * tr1
    var topLen = center[1] + Math.sin(deg * dd) * tr1
    tdiv.style.left = left +'px';
    tdiv.style.top = topLen +'px';

    tdiv.data = {      // 存放节点的位置信息
        deg : deg,
        r : tr1,
        left : left,
        top : topLen
    };
    document.getElementsByTagName('body')[0].appendChild(tdiv);
    divs.push(tdiv);
}