原生JS实现烟花炸开为圆形的效果【附源码及运动的封装】
2020-03-11 12:23
267 查看
用JS实现烟花炸开主要的过程包括
- 首先要知道烟花就是一个实例,所以实例包括两个:主体烟花实例和炸开的小烟花实例
- 主体烟花实例需要创建元素,设置默认位置,颜色。当运动到点击的位置的时候删除主体烟花并且创建小烟花。
- 炸开的小烟花实例需要创建,设置位置和颜色,并计算应该运动到哪个位置删除。
下边就是实现的代码:
css样式如下:
/*css样式部分*/ #container{ width: 80%; height: 600px; border: 2px solid red; background: #000; margin:20px auto; cursor: pointer; position: relative; overflow: hidden; } .fire{ width: 10px; height:10px; position: absolute; bottom: 0; } .small-fire{ width: 10px; height:10px; position: absolute; border-radius: 50%; }
外部需要引用的封装运动的js文件,代码如下:
//外部需要引用的js文件,也就是运动时的封装 // 带有px的css属性和透明度,可以运动 // 背景色不可以 // 参数2被修改成了对象,那么在使用之前需要解析(遍历) function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { // 假设状态为:可以清除计时器 var i = true; // 因为在计时器中才开始使用到对象中的信息,所以在计时器中遍历 // 并提前换来的属性和目标变量 for(var attr in obj){ if(attr == "opacity"){ var iNow = getStyle(ele,attr) * 100; }else{ var iNow = parseInt(getStyle(ele,attr)); } let speed = (obj[attr] - iNow)/10; speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed); // 只要有一个属性到目标,就停了,不对 // 必须所有属性到目标,才能停 // 只要有一个属性没到目标,绝对不能停 // 用状态来标记到底要不要停止计时器 // 只要有一个属性没到目标:绝对不能清除计时器 if(iNow !== obj[attr]){ i = false; } if(attr == "opacity"){ ele.style.opacity = (iNow + speed)/100; }else{ ele.style[attr] = iNow + speed + "px"; } } // 如果每次计时器执行结束,所有属性都执行了一遍之后,状态还是true,表示,没有被改成false,如果没有被改成false,表示没有属性没到终点,那么状态还是false就不清除 if(i){ clearInterval(ele.t); // 用户决定在动画结束时要执行的功能,万一用户没传参,做个默认判断 if(cb){ cb(); } // cb && cb(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
js主要代码如下:
class Fire{ constructor(pos){ this.cont = document.getElementById("container"); // 因为传给了new的方法,那么constructor负责接收 // 接收之后,直接解析到this,方便在后续方法中使用 this.x = pos.x; this.y = pos.y; } create(){ // 创建元素设置样式和位置 this.f = document.createElement("div"); this.f.className = "fire"; this.f.style.background = randomColor(); this.cont.appendChild(this.f); // 位置为鼠标点击的坐标的位置 this.f.style.left = this.x + "px"; // 初始信息设置完成后,开始运动 this.fireMove(); } fireMove(){ // 调用了运动函数,传入要运动的元素,运动的属性和目标,结束后要做的事情 move(this.f,{ top:this.y },()=>{ // 当主体烟花运动到目标后,删除主体烟花 this.f.remove(); // 准备创建小烟花: // 准备总个数 var randomNum = random(10,20); // 准备小烟花炸出来的圆的半径 var r = random(100,200); // 根据个数,重复创建小烟花实例 for(var i=0;i<randomNum;i++){ // 创建实例时,需要将:以下信息都传到小烟花的实例中 // 大框,坐标,半径,个数,当前烟花的索引 var sf = new SmallFire({ cont:this.cont, x:this.x, y:this.y, r:r, sum:randomNum, i:i }); // 执行创建方法 sf.create(); } }); } } class SmallFire{ constructor(obj){ // 接收并解析:大框,坐标,半径,个数,当前烟花的索引 this.cont = obj.cont; this.x = obj.x; this.y = obj.y; this.r = obj.r; this.sum = obj.sum; this.i = obj.i; } create(){ // 创建小烟花的元素,设置位置,和样式 this.f = document.createElement("div"); this.f.className = "small-fire"; this.f.style.background = randomColor(); this.cont.appendChild(this.f); this.f.style.left = this.x + "px"; this.f.style.top = this.y + "px"; // 小烟花开始运动 this.smallMove(); } smallMove(){ // 为了炸成一个圆,计算目标,根据三角函数和角度转弧度公式,和计算多个点在圆上的平均角度公式 move(this.f,{ left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x, top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y },()=>{ this.f.remove(); }); } } var ocont = document.getElementById("container"); ocont.onclick = function(eve){ var e = eve || window.event; // 获取坐标,准备给将来的烟花元素使用 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // 创建烟花元素,时,将坐标传进去,方便将来使用 var f = new Fire({ x:x, y:y }); // 执行创建烟花的方法 f.create(); } function random(a,b){ return Math.round(Math.random()*(a-b)+b); } function randomColor(){ return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`; }
html如下:
<div id="container"></div>
- 点赞 2
- 收藏
- 分享
- 文章举报
相关文章推荐
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 原生JS实现网页烟花动画效果——前端工程师必备技能!
- 原生JS实现运动效果
- 原生js实现带运动的分页效果
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- js实现轮播图效果(附源码)--原生js的应用
- 原生Js实现简易烟花爆炸效果的方法
- 原生Js实现按的数据源均分时间点幻灯片效果(已封装)
- JS实现运动缓冲效果的封装函数示例
- 原生JS实现图片无缝滚动方法(附带封装的运动框架)
- JS实现匀速与减速缓慢运动的动画效果封装示例
- 原生JS实现网页烟花动画效果——前端工程师必备技能!
- 原生js实现图片的3d效果,附上源码
- 原生Js实现按数据源均分时间点幻灯效果(已封装)
- 原生Js实现按的数据源均分时间点幻灯片效果(已封装)
- 原生JS实现旋转轮播图+文字内容切换效果【附源码】
- 原生js--烟花效果
- 原生js实现淡入淡出效果
- 原生js实现简易购物车效果
- js原生实现移动端手指滑动轮播图效果