Premiers pas avec la bibliothèque d'animation Mojs : explorez le module Formes

Dans le tutoriel précédent, nous avons utilisé des mojs pour ajouter des effets d'animation à différents éléments HTML de la page Web. Nous utilisons cette bibliothèque principalement avec des modules div 元素进行动画处理。但是，您可以使用 Html qui ressemblent à des carrés ou des cercles pour animer divers éléments comme des images ou des titres. Si vous avez l'intention d'utiliser des mojs pour animer des formes de base, vous devriez probablement utiliser le module Shape de la bibliothèque.

Shape Le module vous permet de créer des formes de base dans le DOM en utilisant SVG. Tout ce que vous avez à faire est de spécifier le type de forme que vous souhaitez créer et mojs s'occupe du reste. Ce module vous permet également d'animer différentes formes que vous créez.

Dans ce tutoriel, nous aborderons les bases du module Shape et comment l'utiliser pour créer et animer différentes formes.

Créer des formes dans Mojs

Vous devez instancier des objets mojs Shape pour créer différentes formes. L'objet acceptera différents paramètres pouvant être utilisés pour contrôler la couleur, la taille, l'angle, etc. de la forme que vous créez.

Par défaut, toute forme que vous créez utilisera le corps du document comme parent. Vous pouvez attribuer une classe à n'importe quelle forme que vous créez à l'aide de l'attribut parent 属性将任何其他元素指定为其父元素。您还可以借助 className. Si vous ignorez cette propriété, la bibliothèque n'attribuera aucune classe par défaut.

Mojs est livré avec huit formes différentes intégrées, vous pouvez donc créer des lignes en zigzag en donnant shape 属性设置值来直接创建它们。您可以将其值设置为 circle 创建圆形，rect 创建矩形，polygon 创建多边形。您还可以通过将 shape 的值设置为 lines 来绘制直线。如果 shape 值为 cross，则库将绘制两条垂直线；如果 shape 值为 equal。同样，可以通过将属性值设置为 zigzag .

Les objets de forme ont également une points 属性，该属性对于不同的形状具有不同的含义。它确定 polygon 形状中的总边数和 equal 形状中的平行线总数。 points 属性也可用于设置 zigzag courbure de la ligne.

Comme je l'ai déjà mentionné, mojs utilise SVG pour créer toutes ces formes. Cela signifie que l'objet Shape 对象还将具有一些 SVG 特定属性来控制这些形状的外观。您可以使用 fill 属性设置 mojs 形状的填充颜色。当未指定颜色时，库将使用 deepink 颜色来填充形状。同样，您可以使用 Stroke 属性指定形状的描边颜色。当未指定描边颜色时，mojs 会保持描边透明。您可以使用 fillOpacity 和 StrokeOpacity aura également des propriétés spécifiques au SVG pour contrôler l'apparence de ces formes. Vous pouvez définir la couleur de remplissage d'une forme mojs à l'aide de l'attribut fill. Lorsqu'aucune couleur n'est spécifiée, la bibliothèque utilisera la couleur deepink pour remplir la forme. De même, vous pouvez spécifier la couleur du trait d'une forme à l'aide de l'attribut Stroke. Lorsqu'aucune couleur de trait n'est spécifiée, mojs garde le trait transparent. Vous pouvez contrôler l'opacité du remplissage et du contour d'une forme à l'aide des propriétés fillOpacity et StrokeOpacity. Ils peuvent avoir n’importe quelle valeur comprise entre 0 et 1.

Mojs vous permet également de contrôler d'autres propriétés de la forme liées aux traits. Par exemple, vous pouvez utiliser StrokeDasharray 属性指定笔划路径中的破折号和间隙的模式。此属性接受字符串和数字作为有效值。它的默认值为零，这意味着笔划将是实线。可以使用 StrokeWidth 属性指定笔画的宽度。默认情况下，所有笔画的宽度均为 2px。可以使用 StrokeLinecap 属性指定不同线条端点处的形状。 StrokeLinecap 的有效值为 butt、round 和 square.

Par défaut, toute forme que vous créez sera placée au centre de son élément parent. Cela est dû à la propriété left 和 right 属性均设置为 50%。您可以更改这些属性的值以将元素放置在不同的位置。控制形状位置的另一种方法是借助 x 和 y des formes. Ils déterminent dans quelle mesure la forme doit se déplacer respectivement horizontalement et verticalement.

您可以使用 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'
});

最终想法

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!