js模拟实现烟花特效

2023-07-29 12:39:03 295

本文实例为大家分享了js实现烟花特效的具体代码，供大家参考，具体内容如下

如下图

首先描绘圆周运动

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

vardeg=0;//运动角度
varr=100;//半径
varcenter=[300,300]//圆心
vardd=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
vardivs=[];//保存烟花节点
varlen=10;//烟花节点个数
vartemp=360/len;//运动轨迹所隔角度

for(vari=0;i
上述代码运行后可以看到

看起来是有点烟花的意思了，但是烟花的运动轨迹可没这么工整，同一个地点出发，同一个地点结束。

而这个结束点就是半径的长度值，所以只需将半径进行变化就可打乱。
//d3
functiongetRanR(a,b){//随机得到a-b的值
returnMath.floor(Math.random()*(b-a+1)+a);
}
将for循环里的tr1改为getRanR(0,200);

就可看到下图 



看着很乱，完全没点烟花的样子。没关系，让它运动起来就可以看出来了。

为了让这个动起来就要让上面d2的js代码进行修改。让各个节点的起始位置为圆心。同时为了省点力，用css3进行运动。
/*css*/
div{
height:4px;
width:4px;
background:red;
position:absolute;
transition:1sall;//就添加这一句
}
//js
tdiv.style.left=center[0]+'px';
tdiv.style.top=center[1]+'px';
运动轨迹从d2可以看出来已经全部存放到了节点里。用divs可以拿到各个节点。所以只需操作divs就可以了
document.onclick=function(){
for(vari=0;i
运动如下图：

这样就可以看到一个简易的烟花效果。就这么一个简易的烟花连续起来就可达到图1的效果。

所以首先要对这个简易的烟花效果进行封装。

动画方面为了方便操作，所以引入jquery。

以下为html+css

JS部分

varboom={
init:function(center,len,container,type){
this.len=len||20;//烟花节点个数
this.maxR=100;//最大半径
this.speed=1500;//速度
this.divs=[];//存放烟花节点
this.center=center;//圆心
this.type=type;//类型
this.container=container;//容器
this.paint();
},
getRanR:function(a,b){//得到随机数
returnMath.floor(Math.random()*(b-a+1)+a);
},
//画出烟花节点所在点，以及保存去往点信息
//圆心，半径，容器，类型
paint:function(){
varthat=this;
varcenter=that.center.slice(),
len=that.len,
container=that.container,
type=that.type,
dd=Math.PI/180,
temp=360/len;
for(vari=0;i
控制特效
varcontainer=$('#container')[0];
vararr=[];//存放鼠标点击位置
variCount=-1;
$(container).on('mousedown',function(e){
iCount++;
e=e||window.event;
boom.init([e.clientX,e.clientY],20,container,1)
arr[iCount]=[];//每点击一次，增加一个二位数组
$(container).on('mousemove',function(e){
e=e||window.event;
boom.init([e.clientX,e.clientY],20,container,1)
arr[iCount].push([e.clientX,e.clientY])//鼠标每移动一次，添加鼠标位置
})
$(container).on('mouseup',function(){
$(container).off('mousemove')
})
});
//重绘
$('#repaint').click(function(){
//console.log(arr)
if(!arr.length){
return;
}
vartempArr=[];
//将所有点取出来，转换为二维数组
for(vari=0;i=tempArr.length){
clearInterval(timmer)
}
boom.init(tempArr[count],20,container,1)
},16)
});
$('#zero').click(function(){
iCount=-1;
arr=[]
});
烟花节点可以用背景图代替，比如用小爱心或者五角星啥的，只是大小得适当调整。
更多JavaScript精彩特效分享给大家：
Javascript菜单特效大全
javascript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js模拟实现烟花特效

热门推荐

随机推荐