从 Mojs 动画库开始：探索形状模块

redmaomail 2024-07-24 21:56 阅读数 58 #wordpress

从 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 形状的填充颜色。当未指定颜色时，库将使用 deepink 颜色来填充形状。同样，您可以使用 Stroke 属性指定形状的描边颜色。当未指定描边颜色时，mojs 会保持描边透明。您可以使用 fillOpacity 和 StrokeOpacity 属性控制形状的填充和描边不透明度。它们可以是 0 到 1 之间的任何值。

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

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

您可以使用 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 属性来控制。 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'
});

登录后复制