原生JS实现萤火虫动画效果

萤火虫效果实现概述

本文分享了一段使用JavaScript实现萤火虫视觉效果的完整代码示例，供读者参考学习。

在展示具体代码之前，先预览一下最终的运行效果。

CSS部分负责定义萤火虫的样式，此处使用HTML元素来模拟萤火虫的外观，背景图片可根据实际需求自行替换设置。

<style>
 .box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: 50%;}
 body{background: url(../img/bg.jpg) ;}
</style>

接下来是JavaScript核心逻辑部分，用于控制萤火虫的生成与运动行为。

<script>
class Glowworm{
 constructor(){
 // 获取屏幕的可视区域的宽高，用作将来的随机范围
 this.clientW = document.documentElement.clientWidth;
 this.clientH = document.documentElement.clientHeight;
 // 假设萤火虫的宽高
 this.w = 20;
 this.h = 20;
 }
 createEle(){
 var div = document.createElement("div");
 div.className = "box";
 document.body.appendChild(div);
 // 在创建元素之前一定得先生成随机坐标
 div.style.left = this.x + "px";
 div.style.top = this.y + "px";
 // 元素创建好之后，立即运动
 this.move(div);
 }
 randomPos(){
 // 随机生成坐标
 this.x = random(0,this.clientW - this.w);
 this.y = random(0,this.clientH - this.h);
 }
 move(ele){
 // 开始运动之前，还得随机生成目标
 this.randomPos();
 // 开始运动
 move(ele,{
  left:this.x,
  top:this.y
 },()=>{
  // 一个动画结束后，重复开启当前动画，即可
  this.move(ele);
 })
 }
}

for(var i=0;i<60;i++){
 // 先得到实例
 var g = new Glowworm();
 // 生成随机坐标
 g.randomPos();
 // 再创建元素
 g.createEle();
}

function random(a,b){
 return Math.round(Math.random()*(a-b)+b);
}
</script>

最后需要引入一个通用的运动辅助函数，该原生JS封装函数支持处理带有像素单位的CSS属性、透明度以及位移动画。

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";
  }
 }
 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];
 }
}

以上是本文的全部内容，希望这些代码能对读者的学习有所帮助，同时也欢迎大家继续支持本站获取更多资源。