首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现烟花绽放动画效果

Posted in Javascript onAugust 04, 2020

      先编写一个烟花绽放的动画效果。

      放烟花时，一个烟花可分为两个阶段：（1）烟花上升到空中；（2）烟花炸开成碎片，炸开的碎片慢慢消散。

      为此抽象出两个对象类：Firework和Particle。其中，Firework用于表示一个烟花对象，Particle用于表示一个烟花炸开后的各碎片。

      Firework对象类定义6个属性：表示烟花上升轨迹中各点的坐标（x,y）、烟花弧状轨迹的偏转角度angle、上升阶段水平和垂直方向的位移改变量xSpeed和ySpeed、烟花的色彩色相hue。

      坐标属性值y的初始值取画布的高度，表示烟花从地面上升到空中，其余各属性的初始值采用随机数确定。具体定义如下：

function Firework()

  {

   this.x = canvas.width/4*(1+3*Math.random());

   this.y = canvas.height - 15;

   this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;

   this.xSpeed = Math.sin(this.angle) *(6+Math.random()*7);

   this.ySpeed = -Math.cos(this.angle) *(6+Math.random()*7);

   this.hue = Math.floor(Math.random() * 360);

  }

      Firework对象类定义3个方法：绘制烟花上升轨迹的方法draw()、烟花上升时坐标改变方法update()和烟花炸开方法explode()。绘制烟花轨迹时，在各点（x,y）处绘制一个宽度为5、高度为15的填充小矩形表示一个轨迹点。烟花上升时，垂直方向速度ySpeed初始值为负的，每次上升时，ySpeed加上一个正值，表示上升在减速，当ySpeed的值大于0时，烟花上升到顶了（不能再上升），就炸开为70个碎片。具体方法的实现见后面的HTML文件内容。

       Particle对象类定义8个属性：表示碎片散开轨迹中各点的坐标（x,y）、碎片弧状轨迹的偏转角度angle、散开时水平和垂直方向的位移改变量xSpeed和ySpeed、碎片的色彩色相hue、表示碎片小圆的半径size、碎片的亮度lightness。

function Particle(x,y,hue)

  {

   this.x = x;

   this.y = y;

   this.hue = hue;

   this.lightness = 50;

   this.size = 15 + Math.random() * 10;

   this.angle = Math.random() * 2 * Math.PI;

   this.xSpeed = Math.cos(this.angle) *(1+Math.random() * 6);

   this.ySpeed = Math.sin(this.angle) *(1+Math.random() * 6);

  }

       Particle对象类定义2个方法：绘制碎片散开轨迹的方法draw()、碎片散开时坐标改变方法update()。碎片散开时逐渐变小（属性size值减量），当size值小于1时，从碎片数组中删除该碎片，表示碎片已消亡。

       定义两个数组var fireworks=[];和var particles=[];分别存储烟花对象和炸开的碎片对象。

       模拟动画的函数loop中，每隔一段时间（用count计数来实现）向fireworks数组中添加一个烟花对象，烟花对象上升到顶炸开后，从fireworks数组中删除该对象元素，然后向particles数组中添加70个碎片对象。

      遍历两个数组的各对象，分别调用它们的draw()和update()方法。

编写的完整HTML文件内容如下。

<html> 
<head> 
<title>烟花绽放</title> 
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:3px double #996633;background:black;">
</canvas>
<script type="text/javascript">
  var canvas=document.getElementById('myCanvas');
  ctx= canvas.getContext('2d');
  var fireworks=[];
  var particles=[];
  var counter = 0;

  function Firework()
  {
   this.x = canvas.width/4*(1+3*Math.random());
   this.y = canvas.height - 15;
   this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;
   this.xSpeed = Math.sin(this.angle) *(6+Math.random()*7);
   this.ySpeed = -Math.cos(this.angle) *(6+Math.random()*7);
   this.hue = Math.floor(Math.random() * 360);
  }
  Firework.prototype.draw= function() 
  {
   ctx.save();
   ctx.translate(this.x, this.y);
   ctx.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
   ctx.fillStyle =`hsl(${this.hue}, 100%, 50%)`;
   ctx.fillRect(0, 0, 5, 15);
   ctx.restore();
  }
  Firework.prototype.update= function() 
  {
   this.x = this.x + this.xSpeed;
   this.y = this.y + this.ySpeed;
   this.ySpeed += 0.1;
  }
  Firework.prototype.explode= function() 
  {
    for (var i = 0; i < 70; i++) 
    {
     particles.push(new Particle(this.x, this.y, this.hue));
    }
  }

  function Particle(x,y,hue) 
  {
   this.x = x;
   this.y = y;
   this.hue = hue;
   this.lightness = 50;
   this.size = 15 + Math.random() * 10;
   this.angle = Math.random() * 2 * Math.PI;
   this.xSpeed = Math.cos(this.angle) *(1+Math.random() * 6);
   this.ySpeed = Math.sin(this.angle) *(1+Math.random() * 6);
  }
  Particle.prototype.draw= function() 
  {
    ctx.fillStyle = `hsl(${this.hue}, 100%, ${this.lightness}%)`;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  }
  Particle.prototype.update= function(index) 
  {
    this.ySpeed += 0.05;
    this.size = this.size*0.95;
    this.x = this.x + this.xSpeed;
    this.y = this.y + this.ySpeed;
    if (this.size<1) 
    {
      particles.splice(index,1);
    }
  }
  function loop() 
  {
   ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
   ctx.fillRect(0,0,canvas.width,canvas.height);
   counter++;
   if (counter==15) 
   {
     fireworks.push(new Firework());
     counter=0;
   }
   var i=fireworks.length;
   while (i--) 
   {
     fireworks[i].draw();
     fireworks[i].update();
     if (fireworks[i].ySpeed > 0) 
     {
       fireworks[i].explode();
       fireworks.splice(i, 1);
     }
   }
   var i=particles.length;
   while (i--) 
   {   
     particles[i].draw();
     particles[i].update(i);
   }
   requestAnimationFrame(loop);
  }
 loop();
</script>
</body> 
</html>

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图所示的烟花绽放动画效果。

JavaScript实现烟花绽放动画效果

      实现了烟花绽放的效果，我们还可以继续让一定区域内的绽放的烟花碎片拼成“Happy New Year”粒子文本。

      编写如下的HTML代码。

<html> 
<head> 
<title>迎新年烟花绽放</title> 
<style>
 body { margin: 0; background: black; }
 canvas { position: absolute; }
</style>
</head>
<body>
<canvas id="myCanvas1"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3"></canvas>
<script type="text/javascript">
  function Particle(x, y, hue)
  {
   this.x = x;
   this.y = y;
   this.hue = hue;
   this.lightness = 50;
   this.size = 15 + Math.random() * 10;
   this.angle = Math.random() * 2 * Math.PI;
   this.xSpeed = Math.cos(this.angle) * (1 + Math.random() * 6);
   this.ySpeed = Math.sin(this.angle) * (1 + Math.random() * 6);
   this.target = getTarget();
   this.timer = 0;
  }
  Particle.prototype.draw= function() 
  {
   ctx2.fillStyle =`hsl(${this.hue}, 100%, ${this.lightness}%)`;
   ctx2.beginPath();
   ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
   ctx2.closePath();
   ctx2.fill();
  }
  Particle.prototype.update= function(idx) 
  {
   if (this.target) 
   {
     var dx = this.target.x - this.x;
     var dy = this.target.y - this.y;
     var dist = Math.sqrt(dx * dx + dy * dy);
     var a = Math.atan2(dy, dx);
     var tx = Math.cos(a) * 5;
     var ty = Math.sin(a) * 5;
     this.size = lerp(this.size, 1.5, 0.05);
     if (dist < 5) 
     {
       this.lightness = lerp(this.lightness, 100, 0.01);
       this.xSpeed = this.ySpeed = 0;
       this.x = lerp(this.x, this.target.x + fidelity / 2, 0.05);
       this.y = lerp(this.y, this.target.y + fidelity / 2, 0.05);
       this.timer += 1;
     }
     else if (dist < 10) 
     {
       this.lightness = lerp(this.lightness, 100, 0.01);
       this.xSpeed = lerp(this.xSpeed, tx, 0.1);
       this.ySpeed = lerp(this.ySpeed, ty, 0.1);
       this.timer += 1;
     } 
     else
     {
       this.xSpeed = lerp(this.xSpeed, tx, 0.02);
       this.ySpeed = lerp(this.ySpeed, ty, 0.02);
     }
   } 
   else
   {
     this.ySpeed += 0.05;
     this.size = this.size*0.95;
     if (this.size<1) 
     {
       particles.splice(idx,1);
     }
   }
   this.x = this.x + this.xSpeed;
   this.y = this.y + this.ySpeed;
  }

  function Firework() 
  {
   this.x = canvas2.width*(1+ 3*Math.random())/4;
   this.y = canvas2.height - 15;
   this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;
   this.xSpeed = Math.sin(this.angle) * (6 + Math.random() * 7);
   this.ySpeed = -Math.cos(this.angle) * (6 + Math.random() * 7);
   this.hue = Math.floor(Math.random() * 360);
  }
  Firework.prototype.draw= function() 
  {
   ctx2.save();
   ctx2.translate(this.x, this.y);
   ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
   ctx2.fillStyle = `hsl(${this.hue}, 100%, 50%)`;
   ctx2.fillRect(0, 0, 5, 15);
   ctx2.restore();
  }
  Firework.prototype.update= function() 
  {
   this.x = this.x + this.xSpeed;
   this.y = this.y + this.ySpeed;
   this.ySpeed += 0.1;
  }
  Firework.prototype.explode= function() 
  {
   for (var i = 0; i < 70; i++) 
   {
     particles.push(new Particle(this.x, this.y, this.hue));
   }
  }

  function lerp(a, b, t)
  {
    return Math.abs(b - a)> 0.1 ? a + t * (b - a) : b;
  }
  function getTarget() 
  {
    if (targets.length > 0) 
    {
      var idx = Math.floor(Math.random() * targets.length);
      var { x, y } = targets[idx];
      targets.splice(idx, 1);
      x += canvas2.width / 2 - textWidth / 2;
      y += canvas2.height / 2 - fontSize / 2;
      return { x, y };
    }
  }

  var canvas1=document.getElementById('myCanvas1');
  ctx1= canvas1.getContext('2d');
  var canvas2=document.getElementById('myCanvas2');
  ctx2= canvas2.getContext('2d');
  var canvas3=document.getElementById('myCanvas3');
  ctx3= canvas3.getContext('2d');
  var fontSize = 200;
  var fireworks = [];
  var particles = [];
  var targets = [];
  var fidelity = 3;
  var counter = 0;
  canvas2.width = canvas3.width = window.innerWidth;
  canvas2.height = canvas3.height = window.innerHeight;
  ctx1.fillStyle = '#000';
  var text = 'Happy New Year';
  var textWidth = 999999;
  while (textWidth > window.innerWidth) 
  {
   ctx1.font = `900 ${fontSize--}px Arial`;
   textWidth = ctx1.measureText(text).width;
  }
  canvas1.width = textWidth;
  canvas1.height = fontSize * 1.5;
  ctx1.font = `900 ${fontSize}px Arial`;
  ctx1.fillText(text, 0, fontSize);
  var imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  for (var i = 0, max = imgData.data.length; i < max; i += 4) 
  {
    var alpha = imgData.data[i + 3];
    var x = Math.floor(i / 4) % imgData.width;
    var y = Math.floor(i / 4 / imgData.width);
    if (alpha && x % fidelity === 0 && y % fidelity === 0) 
    {
      targets.push({ x, y });
    }
  }
  ctx3.fillStyle = '#FFF';
  ctx3.shadowColor = '#FFF';
  ctx3.shadowBlur = 25;

  function loop() 
  {
   ctx2.fillStyle = "rgba(0, 0, 0, .1)";
   ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
   counter += 1;
   if (counter==15) 
   {
     fireworks.push(new Firework());
     counter=0;
   }
   var i=fireworks.length;
   while (i--) 
   {
     fireworks[i].draw();
     fireworks[i].update();
     if (fireworks[i].ySpeed > 0) 
     {
       fireworks[i].explode();
       fireworks.splice(i, 1);
     }
   }
   var i=particles.length;
   while (i--) 
   {   
     particles[i].draw();
     particles[i].update(i);
     if (particles[i].timer >= 100 || particles[i].lightness >= 99) 
     {
       ctx3.fillRect(particles[i].target.x, particles[i].target.y, fidelity + 1, fidelity + 1);
       particles.splice(i, 1);
     }
   }
   requestAnimationFrame(loop);
  }
  loop();
</script>
</body> 
</html>

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出如图所示的烟花绽放迎新年动画效果。图2中为了控制图片的大小，删除了大量的中间帧，因此和实际运行的效果有所不同。

JavaScript实现烟花绽放动画效果

以上就是JavaScript实现烟花绽放动画效果的详细内容，更多关于JavaScript动画效果的资料请关注三水点靠木其它相关文章！

JavaScript实现烟花绽放动画效果

- Author -

aTeacher

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
xmlplus组件设计系列之图标（ICON）(1）
May 05 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
相对定位(1) 索引树扫描(1) 全表扫描(1) into outfile(1) 匹配(1) lua(3) 逻辑备份(1) geoserver(1) 异步机制(1) sql模式(1)
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python中WSGI是什么，Python应用WSGI详解
2017/11/24 Python
python中退出多层循环的方法
2018/11/27 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
django admin组件使用方法详解
2019/07/19 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
如何利用Python写个坦克大战
2020/11/18 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
全球性的在线购物网站：Zapals
2017/03/22 全球购物
欧洲顶级体育电子商务网站：SportsShoes.com
2018/03/27 全球购物
台湾7-ELEVEN线上购物中心：7-11
2021/01/21 全球购物
《少年王冕》教学反思
2014/04/11 职场文书
事业单位年度考核评语
2014/12/31 职场文书
挂靠协议书
2015/01/27 职场文书
教师教育教学随笔
2015/08/15 职场文书
导游词之青岛太清宫
2019/12/13 职场文书