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

发布日期： 2023-09-04 阅读量： 作者： ADMIN

从 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
});

登录后复制

上一篇: 微信小程序中小说阅读小程序的实现

下一篇: 当给列表增加动画时，为什么 nth-child 特性只作用于

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

随便看看