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

redmaomail 2024-07-24 21:54 阅读数 62 #wordpress

快速入门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
});

登录后复制

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

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

请务必记住，您无法直接控制突发动画的持续时间、延迟或缓动功能。该模块根据正在动画的不同子项的值自动确定所有这些值。

操纵单个爆发粒子

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

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

您未指定的任何子属性值都将设置为 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
  }
});

登录后复制

在第一个突发动画中，直接应用于 Burst 对象的 angle 会围绕突发对象的中心旋转整个组。然而，在children属性中应用的angle会围绕它们自己的中心旋转所有三角形。我们还通过将所有子级的动画持续时间更改为 4000 毫秒来减慢突发动画的速度。

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

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

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