js实现炫酷的烟花效果
程序员文章站
2022-06-22 16:39:25
本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下我们要理清整个流程的思路。首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一...
本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下
我们要理清整个流程的思路。
首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式。
所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同。
1.建立一块画布(div)用于展示烟花的效果
/*给画布设置css样式 */ #container { width: 80%; height: 600px; border: 1px red solid; position: relative; margin: 20px auto; cursor: pointer; background: black; } <!-- 设置一个div --> <div id="container"></div>
2.获取节点
//获取节点 var app = document.getelementbyid('container'); //给app设置一个绑定事件 app.onclick = function(event) { var e = event || window.event //获得鼠标点击的位置的坐标 var pos = { cy: e.offsety, cx: e.offsetx } new fire(app, pos) }
烟花的实现过程:先实现一个大的div运动到鼠标点击的位置,然后在散开成为很多个div
3.先实现大烟花(需要调用随机数方法,随机颜色方法,以及运动函数)
// 构造函数 function fire(app, pos) { //把属性设置成变量 this.app = app; this.pos = pos; //创建一个大的div this.bf = document.createelement('div'); //设置一个类名 this.bf.classname = 'fire'; //设置样式 this.bf.style.left = this.pos.cx + 'px'; this.bf.style.background = this.getcolor(); this.app.appendchild(this.bf); //调用运动函数 this.move(this.bf, { top: this.pos.cy }, () => { this.bf.remove(); this.smallfire(); }) }
3.1首先先设置fire的样式
这是fire的初始样式
.fire { background: red; position: absolute; /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */ bottom: 0px; width: 6px; height: 6px; }
3.2设置一个随机数和随机颜色的方法(原型对象)
//获得一个随机数方法 fire.prototype.rand = function(min, max) { return math.round(math.random() * (max - min) + min); } //获得一个随机颜色的方法 fire.prototype.getcolor = function() { let sum = '#'; for (let i = 0; i < 6; i++) { sum += this.rand(0, 15).tostring(16) } return sum; }
3.3封装一个运动函数(原型对象)
fire.prototype.move = function(ele, target, cb) { // clearinterval(times); let times = setinterval(function() { // console.log(this); var onoff = true; // 遍历运动的方向和目标 for (let attr in target) { // attr 表示运动的属性 // console.log(attr); // 获取元素属性的实时值 let tmpval = parseint(this.getpos(ele, attr)) // 计算speed // console.log(tmpval, attr); let speed = (target[attr] - tmpval) / 10; // 取整 speed = speed > 0 ? math.ceil(speed) : math.floor(speed); // 停止计时器,当一个属性运动到位置,设置开关状态 if (tmpval == target[attr]) onoff = true; // 让元素动起来 ele.style[attr] = tmpval + speed + 'px'; } // 判断开关状态,清除定时器 for (var moveattr in target) { // 如果不相等,就说明有属性没有运动到位置,定时器不能停止 if (target[moveattr] !== parseint(this.getpos(ele, moveattr))) { onoff = false; break; } } if (onoff) { clearinterval(times); cb && cb(); } // console.log(1111); }.bind(this), 30) } // 获取元素的实时位置的函数 fire.prototype.getpos = function(obj, attr) { if (obj.currentstyle) { // 获取css的样式 return obj.currentstyle[attr]; } else { return getcomputedstyle(obj)[attr] } }
通过以上几个步骤我们就可以得到大烟花的运动轨迹,大烟花运动到指定位置后就会消失,并且从消失的地方产生许多小烟花。由前面的分析可以知道,小烟花的运动轨迹和样式各不相同,接下来就是小烟花的实现
4.小烟花的实现
4.1设置samll-fire的样式
这是samll-fire的初始属性
.small-fire { width: 10px; height: 10px; position: absolute; border-radius: 50%; }
4.2设置小烟花的属性
//小烟花 fire.prototype.smallfire = function() { //首先我们设置小烟花的数量 let num = this.rand(50, 60) //遍历 给每一个小烟花设置不同的样式 for (let i = 0; i < num; i++) { let sf = document.createelement('div'); sf.classname = 'small-fire'; sf.style.left = this.pos.cx + 'px'; sf.style.top = this.pos.cy + 'px'; sf.style.background = this.getcolor(); //console.log(sf); //追加到页面中 this.app.appendchild(sf); //使小烟花的运动轨迹成圆周运动 //var top = parseint(math.sin(math.pi / 180 * 360 / num * i) * r) + this.pos.cy; //var left = parseint(math.cos(math.pi / 180 * 360 / num * i) * r) + this.pos.cx; //给小烟花一个随机的位置,可以是在画布里面的任意一个位置 let top = this.rand(0, this.app.offsetheight - sf.offsetheight); let left = this.rand(0, this.app.offsetwidth - sf.offsetwidth); //调用运动函数 this.move(sf, { top: top, left: left }, function() { sf.remove(); }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Python高效率处理图像显示图像方案
下一篇: c语言-switch