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

最新推荐文章于 2024-08-12 08:32:13 发布

cunjie3951

最新推荐文章于 2024-08-12 08:32:13 发布

阅读量422

点赞数

文章标签： java python webgl 编程语言大数据

本文介绍了mojs动画库中的ShapeSwirl和Stagger模块，讲解了如何使用这两个模块为HTML元素和SVG形状添加旋转运动和同时创建多个形状的动画，包括相关属性的设置和使用示例。

摘要由CSDN通过智能技术生成

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

使用ShapeSwirl模块

ShapeSwirl中的ShapeSwirl模块具有一个构造函数，该构造函数接受Shape模块的所有属性。它还接受一些其他属性，以使其产生旋转运动。

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

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

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

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的值时，可通过连续循环遍历数组直到所有形状都被赋值来确定不同形状的值。例如，在指定前四个多边形的颜色之后，第五个多边形的颜色将是橙色，第六个多边形的颜色将是黄色，依此类推。

交错字符串将第一个多边形的半径设置为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
});