当前位置：科技动态 > JavaScript实现烟花绽放的动画效果

JavaScript实现烟花绽放的动画效果

发布：2023-10-05 06:05

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

燃放烟花时，烟花可分为两个阶段：（1）烟花升到空中；（2）烟花升到空中；（3）烟花升起。 (2)烟花爆炸成碎片，爆炸的碎片慢慢消散。

为此目的抽象了两个对象类：Firework 和 Particle。其中Firework用于表示烟花对象，Particle用于表示烟花爆炸后的碎片。

Firework对象类定义了6个属性：代表烟花上升轨迹中各点的坐标(x,y)、烟花弧形轨迹的偏转角度、水平和垂直位移变化xSpeed和ySpeed在上升阶段，烟花的Color色调色调。

坐标属性值y的初始值为画布的高度，也就是说烟花从地面升到天空。其他属性的初始值由随机数确定。具体定义如下：

  函数烟花()

  {

   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对象类定义了三个方法：draw()，绘制烟花上升轨迹的方法；update()，烟花上升时改变坐标的方法；explode()，烟花爆炸的方法。绘制烟花轨迹时，在每个点(x,y)处绘制一个宽为5、高为15的小实心矩形来表示一个轨迹点。当烟花上升时，垂直速度ySpeed初始值为负值。每上升一次，ySpeed就加一个正值，表明上升速度在减慢。当ySpeed的值大于0时，烟花已经上升到顶部（不能再上升了）。爆炸成 70 块碎片。具体方法的实现请参见下面HTML文件的内容。

碎片飞散轨迹中各点的坐标（x，y），碎片弧形轨迹的偏转角度，水平和垂直位移变化xSpeed和ySpeed，片段的色调，代表片段的小圆圈的半径大小，以及片段的亮度。

  函数粒子(x,y,色调)

  {

   这个.x = x;

   这个.y = y;

   this.hue = 色调;

   this.亮度 = 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);

  }

定义两个方法：draw()，绘制碎片分散轨迹的方法；update()，改变碎片分散时坐标的方法。随着碎片散开，它们逐渐变小（属性大小值递减）。当size值小于1时，该片段从片段数组中删除，表明该片段已经消亡。

定义两个数组 var fireworks=[];和 var 粒子=[];分别存放烟花物品和爆炸碎片物品。

在模拟动画的函数循环中，每隔一段时间（通过count实现）向fireworks数组中添加一个fireworks对象。烟花对象升到顶部并爆炸后，从烟花数组中删除该对象元素，然后将其添加到粒子数组中，然后将 70 个片段对象添加到数组中。

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

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