js模拟实现烟花特效
本文实例为大家分享了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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。