Mojs动画库入门：ShapeSwirl和Stagger模块

本系列的第一个和第二个教程介绍了如何使用 mojs为不同的html 元素和svg 形状设置动画。在本教程中，我们将学习另外两个模块，它们可以使我们的动画更有趣。该ShapeSwirl模块允许您为您创建的任何形状添加旋转运动。stagger另一方面，该模块允许您一次创建多个形状并为其设置动画。

使用 ShapeSwirl 模块

ShapeSwirlmojs 中的模块有一个构造函数，它接受Shape模块的所有属性。它还接受一些允许它创建旋转运动的附加属性。

您可以使用该swirlSize属性指定漩涡的幅度或大小。旋转运动期间的振荡频率由属性值确定 swirlFrequency。您还可以使用该pathScale属性按比例缩小漩涡形状的总路径长度。此属性的有效值介于 0 和 1 之间。可以使用该direction属性指定运动的方向。请记住，它 direction 只有两个有效值：-1 和 1。默认情况下，旋转运动中的形状将遵循正弦路径。isSwirl但是，您可以通过将属性的值设置为来沿直线为它们设置动画false。

除了这些附加属性之外，ShapeSwirl模块还更改了模块中某些属性的默认值Shape。默认情况下radius，任何旋转形状的都设置为 5。同样，该scale属性在模块中设置为从 1 到 0 动画ShapeSwirl。

在下面的代码片段中，我使用了所有这些属性来为旋转运动中的两个圆圈设置动画。

var circleSwirlA = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "red",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  repeat: 10
});

var circleSwirlB = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "green",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  swirlSize: 20,
  swirlFrequency: 10,
  isSwirl: true,
  pathScale: 0.5,
  repeat: 10
});

在下面的演示中，您可以单击“播放”按钮来为两个圆圈、一个三角形和一个十字形以旋转的方式制作动画。

使用交错模块

与我们到目前为止讨论的所有其他模块不同，stagger它不是构造函数。这个模块实际上是一个函数，它可以包裹在任何其他模块上，以一次为多个形状或元素设置动画。当您想在不同的形状上应用相同的动画序列但仍然独立地改变它们的大小时，这会非常有用。

将Shape模块包装在stagger()函数中后，您将能够使用该quantifier属性指定要设置动画的元素数量。之后，您可以指定所有其他Shape相关属性的值。现在，每个属性都可以接受一个值数组，依次应用于各个形状。如果您希望所有形状对特定属性具有相同的值，则可以将属性设置为等于该特定值而不是值数组。

以下示例应阐明如何将值分配给不同的形状：

var staggerShapes = mojs.stagger(mojs.Shape);

var triangles = new staggerShapes({
  quantifier: 5,
  shape: 'polygon',
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 5,
  radius: [20, 30, 40, 50, 60],
  left: 100,
  top: 200,
  x: [{0: 100}, {0: 150}, {0: 200}, {0: 250}, {0: 300}],
  duration: 2000,
  repeat: 10,
  easing: 'quad.in',
  isYoyo: true,
  isShowStart: true
});

我们首先将Shape模块包装在stagger()函数中。这允许我们一次创建多个形状。我们将该 quantifier属性的值设置为 5。这将创建五种不同的形状，在我们的例子中是多边形。每个多边形都是一个三角形，因为该 points属性的默认值为 3。我们已经在本系列的第二篇教程中介绍了所有这些属性。

fill、stroke和的值只有一个strokeWidth。这意味着所有的三角形都将被黄色填充，并有黑色的笔触。每种情况下的笔画宽度为 5px。radius另一方面，该属性的值是一个由五个整数组成的数组。每个整数确定组中一个三角形的半径。值 20 分配给第一个三角形，值 60 分配给最后一个三角形。

到目前为止，所有属性对于各个三角形都具有相同的初始值和最终值。这意味着不会对任何属性进行动画处理。但是，该 x属性的值是一个对象数组，其中包含每个三角形水平位置的初始值和最终值。第一个三角形将从转换x:0为x:100，最后一个三角形将从转换x:0为x:300。每种情况下的动画持续时间为 2000 毫秒。

如果一个属性的不同值之间存在固定步长，也可以使用交错字符串来指定初始值和增量。交错字符串接受两个参数。第一个是start值，它分配给组中的第一个元素。第二个值是step，它确定每个连续形状的值的增加或减少。当只有一个值被传递给交错字符串时，它被认为是step，并且start在这种情况下该值被假定为零。

上面的三角形示例可以重写为：

var staggerShapes = mojs.stagger(mojs.Shape);

var triangles = new staggerShapes({
  quantifier: 5,
  shape: 'polygon',
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 5,
  radius: 'stagger(20, 10)',
  left: 100,
  top: 200,
  x: {0: 'stagger(100, 50)'},
  duration: 2000,
  repeat: 10,
  easing: 'quad.in',
  isYoyo: true,
  isShowStart: true
});

您还可以使用 rand 字符串将随机值分配给组中的不同形状。您只需为 rand 字符串提供最小值和最大值，mojs 会自动将这些限制之间的值分配给组中的各个形状。

在以下示例中，我们使用 rand 字符串随机设置每个多边形的点数。您可能已经注意到，我们渲染的多边形总数为 25，但fill数组只有四种颜色。当数组长度小于的值时quantifier，不同形状的值通过不断循环遍历数组来确定，直到所有形状都被分配了一个值。例如，分配前四个多边形的颜色后，第五个多边形的颜色为橙色，第六个多边形的颜色为黄色，以此类推。

stagger 字符串将第一个多边形的半径设置为 10，然后将后续多边形的半径不断增加 1。每个多边形的水平位置同样增加 20，垂直位置随机确定。每个多边形的最终angle值随机设置在 -120 到 120 之间。这样，一些多边形按顺时针方向旋转，而另一些则按逆时针方向旋转。角度动画也被赋予了自己的缓动功能，这与其他属性的常见动画不同。

var staggerShapes = mojs.stagger(mojs.Shape);

var polygons = new staggerShapes({
  quantifier: 25,
  shape: 'polygon',
  points: 'rand(3, 6)',
  fill: ['orange', 'yellow', 'cyan', 'lightgreen'],
  stroke: 'black',
  radius: 'stagger(10, 1)',
  left: 100,
  top: 100,
  x: 'stagger(0, 20)',
  y: 'rand(40, 400)',
  scale: {1: 'rand(0.1, 3)'},
  angle: {0: 'rand(-120, 120)', easing: 'elastic.in'},
  duration: 1000,
  repeat: 10,
  easing: 'cubic.in',
  isYoyo: true,
  isShowStart: true
});