小程序 纯js模拟烟花特效

本文介绍如何使用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);
}

上述代码运行后可以看到
这里写图片描述
看起来是有点烟花的意思了,但是烟花的运动轨迹可没这么工整,同一个地点出发,同一个地点结束。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值