Mojs动画库入门教程：形状模块

在上一个教程中，我们使用 mojs 为网页上的不同 html 元素设置动画。我们使用该库主要为看起来像正方形或圆形的元素设置动画。但是，您可以使用该模块为图像或标题等各种元素设置动画。如果您真的打算使用 mojs 为基本形状制作动画，您可能应该使用库中的Shape 模块。divHtml该Shape模块允许您使用svg在dom中创建基本形状。您所要做的就是指定您想要创建的形状类型，其余的将由 mojs 处理。此模块还允许您为创建的不同形状设置动画。

在本教程中，我们将介绍该 Shape模块的基础知识以及如何使用它来创建不同的形状并为其设置动画。

在 Mojs 中创建形状

您需要实例化一个 mojsShape对象以创建不同的形状。该对象将接受不同的参数，这些参数可用于控制您创建的形状的颜色、大小、角度等。

默认情况下，您创建的任何形状都将使用文档正文作为其父级。parent 您可以使用该属性将任何其他元素指定为其父元素。您还可以将类分配给您在 className 属性的帮助下创建的任何形状。如果您跳过此属性，库将不会分配任何默认类。

Mojs 内置了八种不同的形状，因此您可以通过设置shape属性值直接创建它们。您可以将其值设置circle为创建圆形、rect创建矩形和polygon创建多边形。shape您还可以通过将的值设置为来绘制直线lines。如果值为，库将绘制两条垂直线，如果shape值为，则绘制cross多条平行线。同样，可以通过将属性值设置为来创建曲折线。shapeequalzigzag

形状对象还具有points对不同形状具有不同含义的属性。它确定 a 中的总边数和形状polygon中平行线的总数。equal该points属性还可用于设置一条zigzag线的折弯数。

正如我之前提到的，mojs 使用 SVG 创建所有这些形状。这意味着该Shape对象还将具有一些 SVG 特定的属性来控制这些形状的外观。fill您可以使用该属性设置 mojs 形状的填充颜色。当没有指定颜色时，库将使用deeppink颜色来填充形状。stroke同样，您可以使用该属性指定形状的笔触颜色。当没有指定描边颜色时，mojs 保持描边透明。fillOpacity您可以使用和strokeOpacity属性控制形状的填充和描边不透明度。它们可以具有 0 到 1 之间的任何值。

Mojs 还允许您控制形状的其他与笔划相关的属性。例如，您可以使用该 strokeDasharray属性在笔划路径中指定破折号和间隙的模式。此属性接受字符串和数字作为有效值。它的默认值为零，这意味着笔划将是一条实线。可以使用该strokeWidth属性指定笔划的宽度。默认情况下，所有笔划都是 2px 宽。strokeLinecap可以使用该属性指定不同线在其端点处的形状。strokeLinecap的有效值为butt、round和square。

默认情况下，您创建的任何形状都放置在其父元素的中心。这是因为形状的left和right属性分别设置为 50%。您可以更改这些属性的值以将元素放置在不同的位置。控制形状位置的另一种方法是借助 x和y属性。它们分别决定了一个形状应该在水平和垂直方向上移动多少。

radius您可以使用该属性指定形状的半径。该值用于确定特定形状的大小。您还可以使用radiusX和radiusY指定形状在特定方向上的大小。另一种控制形状大小的方法是借助 scale属性。默认值为scale1，但您可以将其设置为您喜欢的任何其他数字。scaleX您还可以使用和scaleY属性在特定方向上缩放形状。

默认情况下，形状的所有这些变换的原点是它的中心。例如，如果您通过指定angle属性值来旋转任何形状，则该形状将围绕其中心旋转。如果要围绕其他点旋转形状，可以使用origin属性指定它。此属性接受一个字符串作为其值。将其设置为'0% 0%'将围绕其左上角旋转、缩放或平移形状。同样，将其设置为'50% 0%'将围绕其顶部边缘的中心旋转、缩放或平移形状。

您可以使用我们刚刚讨论的所有这些属性来创建各种各样的形状。这里有一些例子：

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 0,
  fill: "orange",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var circleB = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "orange",
  stroke: "red",
  radiusX: 80,
  strokeWidth: 25,
  strokeDasharray: 2,
  isShowStart: true
});

var rectA = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 350,
  fill: "red",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var rectB = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 500,
  fill: "blue",
  stroke: "blue",
  radiusX: 40,
  radiusY: 100,
  strokeWidth: 25,
  strokeDasharray: 20,
  isShowStart: true
});

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 300,
  left: 0,
  fill: "yellow",
  stroke: "black",
  strokeWidth: 10,
  points: 8,
  isShowStart: true
});

var polyB = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 350,
  left: 175,
  radiusX: 100,
  radiusY: 100,
  fill: "violet",
  stroke: "black",
  strokeWidth: 6,
  strokeDasharray: "15, 10, 5, 10",
  strokeLinecap: "round",
  points: 3,
  isShowStart: true
});

var lineA = new mojs.Shape({
  parent: ".container",
  shape: "cross",
  top: 350,
  left: 375,
  stroke: "red",
  strokeWidth: 40,
  isShowStart: true
});

var zigzagA = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 50,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 4,
  radiusX: 100,
  points: 10,
  isShowStart: true
});

var zigzagB = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 350,
  fill: "blue",
  stroke: "transparent",
  radiusX: 100,
  points: 50,
  isShowStart: true
});

上面代码创建的形状显示在下面的 CodePen 演示中：

Mojs 中的动画形状

您可以为我们在上一节中讨论的形状的几乎所有属性设置动画。例如，您可以通过指定不同的初始值和最终值来为多边形中的点数设置动画。您还可以将形状的原点从动画设置'50% 50%'为任何其他值，例如'75% 75%'. 其他属性与它们在模块中的行为相似angle并且scale 行为与它们一样。Html

不同动画的持续时间、延迟和速度可以分别使用duration,delay和speed属性来控制。repeat 属性也像在Html模块中一样工作。如果只想播放一次动画，可以将其设置为 0。同样，您可以将其设置为 3 以播放动画 4 次。对模块有效的所有缓动值也对Html模块有效Shape。

这两个模块的动画功能之间的唯一区别是您不能为 Shape模块中的属性单独指定动画参数。您制作动画的所有属性都将具有相同的持续时间、延迟、重复次数等。

这是一个示例，我们为圆的 x 位置、比例和角度设置动画：

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "red",
  stroke: "black",
  strokeWidth: 100,
  strokeDasharray: 18,
  isShowStart: true,
  x: {
    0: 300
  },
  angle: {
    0: 360
  },
  scale: {
    0.5: 1.5
  },
  duration: 1000,
  repeat: 10,
  isYoyo: true,
  easing: "quad.in"
});

控制不同动画播放的一种方法是使用该.then()方法指定一组新的属性，以便在第一个动画序列完全完成后进行动画处理。你可以在里面给所有动画属性新的初始值和最终值.then()。这是一个例子：

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  fill: "red",
  stroke: "black",
  isShowStart: true,
  points: 4,
  left: 100,
  x: {
    0: 500
  },
  strokeWidth: {
    5: 2
  },
  duration: 2000,
  easing: 'elastic.in'
}).then({
  strokeWidth: 5,
  points: {
    4: 3
  },
  angle: {
    0: 720
  },
  scale: {
    1: 2
  },
  fill: {
    'red': 'yellow'
  },
  duration: 1000,
  delay: 200,
  easing: 'elastic.out'
});