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

在上一个教程中，我们使用mojs为网页上的不同HTML元素添加动画效果。我们主要使用这个库来制作看起来像正方形或圆形的div元素的动画。但是，您可以使用Html模块将各种元素（如图像或标题）制作成动画。如果你真的打算使用mojs来制作基本形状的动画，那么你可能应该使用库中的形状模块。

Shape模块允许您使用SVG在DOM中创建基本形状。你所要做的就是指定你想要创建的形状类型，mojs会处理剩下的事情。此模块还允许您制作不同形状的动画。

在本教程中，我们将介绍形状模块的基础知识以及如何使用它来创建和动画制作不同的形状。

在Mojs中创建形状您需要实例化mojshape对象来创建不同的形状。该对象将接受不同的参数，这些参数可用于控制颜色、大小、角度等。你创造的形状。

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

Mojs内置了八种不同的形状，因此您可以通过设置shape属性的值来直接创建它们。您可以将其值设置为circle以创建圆形，rect以创建矩形，polygon以创建多边形。还可以通过将“形状”的值设置为“线条”来绘制直线。如果形状值为十字形，则库将绘制两条垂直线；如果形状值相等。同样，您可以通过将属性值设置为zigzag来创建锯齿状线条。

shape对象还有一个points属性，它对不同的形状有不同的含义。它确定多边形形状的边的总数和相等形状的平行线的总数。points属性也可用于设置要弯曲的之字形线条的数量。

正如我之前提到的，mojs使用SVG来创建所有这些形状。这意味着形状对象也将具有一些特定于SVG的属性来控制这些形状的外观。您可以使用fill属性设置mojs形状的填充颜色。如果未指定颜色，库将使用深墨迹颜色填充形状。同样，可以使用Stroke属性指定形状的笔触颜色。如果未指定描边颜色，mojs会保持描边透明。您可以使用fillOpacity和StrokeOpacity属性控制形状的填充和描边不透明度。它们可以是0到1之间的任何值。

Mojs还允许您控制形状的其他笔画相关属性。例如，可以使用StrokeDasharray属性指定描边路径中的虚线和间隙图案。该属性接受字符串和数字作为有效值。其默认值为零，这意味着笔画将是实线。可以使用StrokeWidth属性指定描边的宽度。默认情况下，所有笔画的宽度都是2px。您可以使用StrokeLinecap属性指定不同线条端点的形状。StrokeLinecap的有效值为对接、圆形和方形。

默认情况下，您创建的任何形状都放置在其父元素的中心。这是因为形状的左属性和右属性都设置为50%。您可以变更这些性质的值，将元素放置在不同的位置。控制形状位置的另一种方法是使用x和y属性。它们分别确定形状应该水平和垂直移动的程度。

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

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

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

var circleA =新mojs。形状（{ parent:“。container“，shape:“circle“，left: 0，fill:“orange“，stroke:“black“，strokeWidth: 5，isShowStart:true }）；var circleB =新mojs。形状（{ parent:“。container“，shape:“circle“，left: 175，fill:“orange“，stroke:“red“，radiusX: 80，strokeWidth: 25，strokeDasharray: 2，isShowStart:true }）；var rectA =新mojs。形状（{ parent:“。container“，shape:“rect“，left: 350，fill:“red“，stroke:“black“，strokeWidth: 5，isShowStart:true }）；var rectB =新mojs。形状（{ parent:“。container“，shape:“rect“，left: 500，fill:“blue“，stroke:“blue“，radiusX: 40，radiusY: 100，strokeWidth: 25，strokeDasharray: 20，isShowStart:true }）；var polyA =新的mojs。形状（{ parent:“。container“，shape:“多边形“，top: 300，left: 0，fill:“黄色“，stroke:“黑色“，strokeWidth: 10，points: 8，isShowStart:true }）；var polyB =新mojs。形状（{ parent:“。容器“，形状:“多边形“，顶部:350，左侧:175，半径:100，半径:100，填充:“紫罗兰色“，描边:“黑色“，描边宽度:6，strokeDasharray:“15，10，5，10“，strokeLinecap:“圆形“，点数:3，isShowStart:true }）；var lineA =新的mojs。形状（{ parent:“。container“，形状:“十字“，顶部:350，左侧:375，笔画:“红色“，笔画宽度:40，isShowStart:true }）；var zigzagA =新的mojs。形状（{ parent:“。容器“，形状:“之字形“，顶部:500，左侧:50，填充:“透明“，描边:“黑色“，描边宽度:4，半径X: 100，磅值:10，isShowStart:true }）；var zigzagB =新的mojs。形状（{ parent:“。容器“，形状:“之字形“，顶部:500，左侧:350，填充:“蓝色“，描边:“透明“，半径:100，点数:50，isShowStart:true }）；由上述代码创建的形状如下面的CodePen演示所示:

在Mojs中制作形状动画您可以制作我们在上一节中讨论的形状的几乎所有属性的动画。例如，可以通过指定不同的初始值和最终值来制作多边形中的点的动画。您还可以将形状的原点从“50% 50%”更改为任何其他值，例如“75% 75%”。其他属性（如角度和比例）的行为与Html模块中的相同。

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

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

以下是我们制作的圆的X位置、比例和角度的动画示例:

var circleA =新mojs。形状（{ parent:“。容器“，形状:“圆形“，左:175，填充:“红色“，描边:“黑色“，strokeWidth: 100，strokeDasharray: 18，isShowStart: true，x: { 0: 300 }，角度:{ 0: 360 }，刻度:{ 0.5: 1.5 }，持续时间:1000，重复:10，isYoyo: true，缓动:“quad . in“}）；

控制不同动画播放的一种方法是使用。then（）方法指定在第一个动画序列完全完成后要制作动画的一组新属性。您可以为中的所有动画属性指定新的初始值和最终值。然后（）。这是一个例子:

var polyA =新的mojs。形状（{ 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“}）。然后（{ strokeWidth: 5，点数:{ 4: 3 }，角度:{ 0: 720 }，比例:{ 1: 2 }，填充:{‘red‘:‘yellow‘}，持续时间:1000，延迟时间:200，缓动:“elastic . out‘}）；

在本教程中，我们学习了如何使用mojs创建不同的形状以及如何将这些形状的属性制作成动画。

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

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

以上是从Mojs动画库开始:探索形状模块的详细信息，请关注主机参考其他相关文章了解更多内容！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：从Mojs动画库开始:探索形状模块 https://zhujicankao.com/104103.html