Mojs动画库入门教程：Burst模块

Web 开发 这篇文章是 Mojs 动画库入门系列的一部分。 Mojs 动画库入门：ShapeSwirl 和 Stagger 模块

我们通过学习如何使用 mojs为html 元素设置动画来开始这个系列。在第二个教程中，我们继续使用该模块制作内置 svg 形状的动画。第三个教程介绍了使用和模块为svg形状 设置动画的更多方法Shape。ShapeSwirlstagger

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

创建基本连拍动画

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

left和right属性决定了爆发的初始位置，而不是其中的粒子。类似地，x和y属性决定了整个爆发而不是单个粒子的移动。

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

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

degree 如果您不希望爆发粒子覆盖整个 360 度，您可以使用该属性指定应覆盖的部分。任何高于 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
});

您可以看到这一点，burstA并且burstE仅在它们必须覆盖的度数上有所不同。由于其中的粒子burstA必须覆盖 360 度（默认值），因此它们以360/20 = 18度数分开放置。另一方面，其中的粒子以度数分开burstE放置 。3600/20 = 180从零开始，第一个粒子放置在 0 度，下一个放置在 180 度。 

然后将第三个粒子放置在 360 度，基本等于 0 度。然后将第四个粒子放置在 540 度，但这基本上等于 180 度。换句话说，所有奇数粒子放置在 0 度，所有偶数粒子放置在 180 度。最后，您只看到两个粒子，因为所有其他粒子都与前两个重叠。

重要的是要记住，您不能直接控制突发动画的持续时间、延迟或缓动功能。该模块会根据动画中不同子项的值自动确定所有这些值。

操纵单个爆发粒子

到目前为止，在本教程中，爆发中的所有粒子都应用了相同的动画。它们的角度、比例、半径和位置都改变了相同的值。此外，我们无法控制单个粒子或整个爆发的持续时间和延迟。mojsBurst模块没有一组可以直接更改所有这些值的属性。但是，我们可以为单个粒子指定动画值，这反过来会影响爆发动画。

爆发动画中的所有粒子都被认为是原始对象的子Burst对象。因此，mojs 允许我们使用一个属性来控制单个爆发粒子的动画，该children属性接受一个对象作为其值。您可以使用除子对象之外的所有ShapeSwirl属性。这是有道理的，因为爆发动画中的单个粒子必须出现在某些位置，并且允许我们随机更改单个粒子的位置会改变配置。xy

您未指定的任何子属性值都将设置为ShapeSwirl模块提供的默认值。在下面的示例中，我们正在制作 20 条不同的连拍动画线。这一次，该angle属性已设置在单个粒子而不是Burst对象上，因此只有线条围绕它们的中心而不是整个对象旋转。正如我们在上一个教程中所了解的，默认情况下，所有ShapeSwirl对象都从 1 缩小到 0。这就是为什么动画中线条的长度从 40 变为 0 的原因。

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

正如我之前提到的，我们可以ShapeSwirl为爆发动画中的所有属性设置动画。动画中的每个孩子都可以有自己的一组属性。如果只提供一个值，它将应用于所有子粒子。如果值作为数组提供，它们将按顺序应用，一次一个粒子。

这是使用我们目前所学的所有概念创建五种不同爆发动画的javascript代码。

var burstA = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    stroke: "black",
    radius: 20,
    angle: {
      0: 360
    },
    duration: 4000
  }
});

var burstB = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    fill: ["yellow", "cyan", "orange"],
    stroke: "black",
    radius: 20,
    scale: {
      1: 2
    },
    duration: 2000
  },
  isShowEnd: false
});

var burstC = new mojs.Burst({
  count: 20,
  angle: {
    0: -180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "black", "blue"],
    radius: {
      10: "stagger(5, 1)"
    }
  }
});

var burstD = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    scale: {
      1: "rand(1, 10)"
    }
  },
  isShowEnd: false
});

var burstE = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    stroke: "black",
    scale: {
      1: "rand(1, 10)"
    }
  }
}).then({
  angle: {
    0: 360
  },
  radius: {
    100: 0
  },
  scale: {
    1: 0
  }
});

在第一个连拍动画中，angle直接应用在Burst对象上会围绕连拍对象的中心旋转整个组。然而，anglechildren 属性内部的 apply 会围绕它们自己的中心旋转所有三角形。我们还通过将所有孩子的动画持续时间更改为 4000 毫秒来减慢爆发动画。

在第二个爆发动画中，所有三角形的颜色取自传递给fill属性的数组。我们只指定了三种填充颜色，但三角形的总数为 20。在这种情况下，mojs 会不断循环遍历数组元素，并一次又一次地用相同的三种颜色填充三角形。

在第四个动画中，我们使用在上一个教程rand中学习过的字符串 来为所有子粒子随机选择一个比例值。我们还将属性的值设置为，以便在动画结束时隐藏粒子。isShowEndfalse

在第五个动画中，我们使用Shape 模块教程then()中的方法在第一个动画结束后播放另一个动画序列。

最后的想法

本系列的目的是让您熟悉 mojs 动画库的基础知识。每个教程都侧重于单个模块以及如何使用该模块中的属性来创建基本动画。 

最后一个教程使用了之前教程中的概念来创建稍微复杂的动画。Mojs 是一个非常强大的动画库，你得到的最终结果取决于你对所有属性的创造性，所以继续试验。