Mojs动画库入门：形状模块

在上一教程中，我们使用mojs为网页上的不同HTML元素设置了动画 。 我们使用该库主要为看起来像正方形或圆形的div元素设置动画。 但是，您可以使用Html模块为各种元素设置动画，例如图像或标题。 如果您实际上打算使用mojs为基本形状制作动画，则应该使用库中的Shape模块 。

Shape模块允许您使用SVG在DOM中创建基本形状。 您所要做的就是指定要创建的形状类型，其余的将由mojs负责。 该模块还允许您为创建的不同形状设置动画。

在本教程中，我们将介绍Shape模块的基础知识，以及如何使用它创建不同的形状并对它们进行动画处理。

在Mojs中创建形状

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

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

Mojs内置了八个不同的形状，因此您可以通过为shape属性设置一个值来直接创建它们。 您可以将其值设置为circle来创建圆， rect来创建矩形， polygon来创建多边形。 您也可以通过设置的值绘制直线shape是lines 。 如果shape值为cross ，则库将绘制两条垂直线，如果shape equal则库将绘制多条平行线。 同样，可以通过将属性值设置为zigzag来创建锯齿形线。

形状对象还具有points属性，该属性对于不同的形状具有不同的含义。 它确定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属性指定形状的radius 。 此值用于确定特定形状的大小。 您还可以使用radiusX和radiusY在特定方向上指定形状的大小。 控制形状大小的另一种方法是借助scale属性。 scale的默认值为1，但是您可以将其设置为任意其他数字。 您还可以使用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属性来控制不同动画的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'
});

最后的想法

在本教程中，我们学习了如何使用mojs创建不同的形状以及如何对这些形状的属性进行动画处理。

Shape模块具有Html模块的所有动画功能。 唯一的区别是属性不能单独设置动画。 它们只能作为一组进行动画处理。 您还可以通过使用不同的方法在任何时候播放，暂停，停止和恢复动画来控制动画的播放。 我在本系列的第一个教程中详细介绍了这些方法。

如果您对本教程有任何疑问，请随时发表评论。 在下一个教程中，您将学习ShapeSwirl和stagger模块。

翻译自: https://code.tutsplus.com/tutorials/getting-started-with-mojs-animation-library-shape-module--cms-30389