快速入门Mojs动画库：爆炸模块指南

我们通过学习如何使用 mojs 为 HTML 元素添加动画来开始本系列。在第二个教程中，我们继续使用 Shape 模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl 和 stagger 模块对 SVG 形状进行动画处理的更多方法。

现在，我们将学习如何使用 Burst 模块以突发形式制作不同 SVG 形状的动画。本教程将取决于我们在前三个教程中介绍的概念。如果您还没有阅读过它们，我建议您先阅读它们。

创建基本连拍动画

在创建任何突发动画之前，我们需要做的第一件事是实例化 Burst 对象。之后，我们可以指定不同属性的值来控制动画的播放方式。 Burst 模块中的许多属性名称与 Shape 模块中的属性名称相同。然而，在这种情况下，这些属性执行非常不同的任务。

left 和 right 属性决定突发的初始位置，而不是突发内部的粒子。同样，x 和 y 属性决定整个突发的移动而不是单个粒子的移动。

所有爆发粒子形成的圆的半径由 radius 属性控制。这与单个形状的 radius 属性非常不同，后者决定了这些形状的大小。在爆发的情况下，半径决定了其中各个形状的距离。

可以使用 count 属性指定单次突发中的形状或粒子数量。默认情况下，您创建的每个突发中将有五个粒子。所有这些粒子均匀分布在爆发的圆周上。例如，如果有四个粒子，它们将彼此成 90 度放置。如果有三个粒子，它们将被放置在 120 度处。

如果您不希望爆发粒子覆盖整个 360 度，您可以使用 Degree 属性指定应覆盖的部分。任何大于 0 的值对此属性都有效。指定的度数将均匀分布在所有粒子之间。如果度数超过 360，形状可能会重叠。

使用 angle 属性指定的角度决定了整个突发的角度。在这种情况下，单个粒子不是绕着它们自己的中心旋转，而是绕着爆发的中心旋转。这与地球绕太阳公转类似，与地球自转轴自转不同。

scale 属性可缩放突发的所有物理属性的值，进而缩放各个形状。就像其他突发属性一样，其中的所有形状都会立即缩放。将突发 scale 设置为 3 会将整个突发的半径以及单个形状的大小增加 3。

在下面的代码片段中，我们将使用刚刚讨论的属性创建五个不同的突发。

var burstA = new mojs.Burst({
  count: 20
});

var burstB = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: 10
});

var burstC = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstD = new mojs.Burst({
  degree: 180,
  radiusX: 10,
  angle: -90,
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstE = new mojs.Burst({
  count: 20,
  degree: 3600
});