Erste Schritte mit der Mojs-Animationsbibliothek: Entdecken Sie das Shapes-Modul-WordDrücken Sie-php.cn

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

Im vorherigen Tutorial haben wir Mojs verwendet, um Animationseffekte zu verschiedenen HTML-Elementen auf der Webseite hinzuzufügen. Wir verwenden diese Bibliothek hauptsächlich mit div 元素进行动画处理。但是，您可以使用 Html Modulen, die wie Quadrate oder Kreise aussehen, um verschiedene Elemente wie Bilder oder Titel zu animieren. Wenn Sie beabsichtigen, Mojs zum Animieren grundlegender Formen zu verwenden, sollten Sie wahrscheinlich das Shape-Modul aus der Bibliothek verwenden.

Mit dem Modul

Shape können Sie mithilfe von SVG Grundformen im DOM erstellen. Sie müssen lediglich die Art der Form angeben, die Sie erstellen möchten, und mojs kümmert sich um den Rest. Mit diesem Modul können Sie auch die verschiedenen von Ihnen erstellten Formen animieren.

In diesem Tutorial behandeln wir die Grundlagen des Shape-Moduls und wie man es zum Erstellen und Animieren verschiedener Formen verwendet.

Erstellen Sie Formen in Mojs

Sie müssen Mojs Shape Objekte instanziieren, um verschiedene Formen zu erstellen. Das Objekt akzeptiert verschiedene Parameter, mit denen Sie Farbe, Größe, Winkel usw. der von Ihnen erstellten Form steuern können.

Standardmäßig verwendet jede von Ihnen erstellte Form den Dokumentkörper als übergeordnetes Element. Mit dem Attribut parent 属性将任何其他元素指定为其父元素。您还可以借助 className können Sie jeder von Ihnen erstellten Form eine Klasse zuweisen. Wenn Sie diese Eigenschaft überspringen, weist die Bibliothek keine Standardklasse zu.

Mojs verfügt über acht integrierte Formen, sodass Sie Zickzacklinien erstellen können, indem Sie shape 属性设置值来直接创建它们。您可以将其值设置为 circle 创建圆形，rect 创建矩形，polygon 创建多边形。您还可以通过将 shape 的值设置为 lines 来绘制直线。如果 shape 值为 cross，则库将绘制两条垂直线；如果 shape 值为 equal。同样，可以通过将属性值设置为 zigzag eingeben.

Formobjekte haben auch einen points 属性，该属性对于不同的形状具有不同的含义。它确定 polygon 形状中的总边数和 equal 形状中的平行线总数。 points 属性也可用于设置 zigzag Grad an Krümmung der Linie.

Wie ich bereits erwähnt habe, verwendet mojs SVG, um all diese Formen zu erstellen. Das bedeutet, dass das Shape 对象还将具有一些 SVG 特定属性来控制这些形状的外观。您可以使用 fill 属性设置 mojs 形状的填充颜色。当未指定颜色时，库将使用 deepink 颜色来填充形状。同样，您可以使用 Stroke 属性指定形状的描边颜色。当未指定描边颜色时，mojs 会保持描边透明。您可以使用 fillOpacity 和 StrokeOpacity-Objekt auch über einige SVG-spezifische Eigenschaften verfügt, um das Erscheinungsbild dieser Formen zu steuern. Sie können die Füllfarbe einer Mojs-Form mithilfe des Attributs fill festlegen. Wenn keine Farbe angegeben ist, verwendet die Bibliothek die Farbe deepink, um die Form zu füllen. Ebenso können Sie die Strichfarbe einer Form mithilfe des Attributs Stroke angeben. Wenn keine Strichfarbe angegeben ist, hält mojs den Strich transparent. Sie können die Füll- und Strichdeckkraft einer Form mithilfe der Eigenschaften fillOpacity und StrokeOpacity steuern. Sie können einen beliebigen Wert zwischen 0 und 1 annehmen.

Mojs ermöglicht Ihnen auch die Steuerung anderer strichbezogener Eigenschaften der Form. Sie können beispielsweise StrokeDasharray 属性指定笔划路径中的破折号和间隙的模式。此属性接受字符串和数字作为有效值。它的默认值为零，这意味着笔划将是实线。可以使用 StrokeWidth 属性指定笔画的宽度。默认情况下，所有笔画的宽度均为 2px。可以使用 StrokeLinecap 属性指定不同线条端点处的形状。 StrokeLinecap 的有效值为 butt、round 和 square verwenden.

Standardmäßig wird jede von Ihnen erstellte Form in der Mitte des übergeordneten Elements platziert. Dies liegt an der left 和 right 属性均设置为 50%。您可以更改这些属性的值以将元素放置在不同的位置。控制形状位置的另一种方法是借助 x 和 y-Eigenschaft von Formen. Sie bestimmen, wie stark sich die Form horizontal bzw. vertikal bewegen soll.

Mit dem Attribut radius 属性指定形状的半径。该值用于确定特定形状的大小。您还可以使用 radiusX 和 radiusY 指定形状在特定方向上的大小。控制形状大小的另一种方法是借助 scale 属性。 scale 的默认值为 1，但您可以将其设置为您喜欢的任何其他数字。您还可以使用 scaleX 和 scaleY können Sie eine Form in eine bestimmte Richtung skalieren.

Standardmäßig ist der Ursprung all dieser Transformationen einer Form ihr Mittelpunkt. Wenn Sie beispielsweise angle 属性的值来旋转任何形状，则该形状将绕其中心旋转。如果要围绕其他点旋转形状，可以使用 origin 属性指定它。此属性接受字符串作为其值。将其设置为 '0% 0%' 将围绕其左上角旋转、缩放或平移形状。同样，将其设置为 '50% 0%' angeben, wird die Form um die Mitte ihrer Oberkante gedreht, skaliert oder verschoben.

Mit all diesen Eigenschaften, die wir gerade besprochen haben, können Sie eine Vielzahl von Formen erstellen. Hier einige Beispiele:

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

Nach dem Login kopieren

Die durch den obigen Code erstellte Form wird in der CodePen-Demo unten gezeigt:

Animieren Sie Formen in Mojs

Sie können fast jede Eigenschaft der Form animieren, die wir im vorherigen Abschnitt besprochen haben. Sie können beispielsweise die Anzahl der Punkte in einem Polygon animieren, indem Sie unterschiedliche Anfangs- und Endwerte angeben. Sie können den Ursprung der Form auch im '50% 50%' 更改为任何其他值，例如 '75% 75%'。 angle 和 scale 等其他属性的行为与 Html-Modul ändern, das sich genauso verhält.

Die Dauer, Verzögerung und Geschwindigkeit verschiedener Animationen können mithilfe von duration、delay 和 speed 属性来控制。 Repeat 属性的工作方式也与 Html 模块中的工作方式相同。如果只想播放一次动画，可以将其设置为 0。同样，您可以将其设置为3以播放动画4次。对 Html 模块有效的所有缓动值也对 Shape Modulen separat verwendet werden.

Der einzige Unterschied zwischen den Animationsmöglichkeiten dieser beiden Module besteht darin, dass Sie Animationsparameter nicht einzeln für Eigenschaften im Shape-Modul angeben können. Alle von Ihnen animierten Eigenschaften haben die gleiche Dauer, Verzögerung, Wiederholungsanzahl usw.

Hier ist ein Beispiel, in dem wir die X-Position, den Maßstab und den Winkel eines Kreises animieren:

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

Nach dem Login kopieren

Eine Möglichkeit, die Wiedergabe verschiedener Animationen zu steuern, besteht darin, mit .then() 方法来指定在第一个动画序列完全完成后要设置动画的一组新属性。您可以在 .then() neue Anfangs- und Endwerte für alle Animationseigenschaften anzugeben. Hier ein Beispiel:

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

Nach dem Login kopieren

Abschließende Gedanken

In diesem Tutorial haben wir gelernt, wie man mit Mojs verschiedene Formen erstellt und wie man die Eigenschaften dieser Formen animiert.

Shape 模块具有 Html Das Modul verfügt über alle Animationsfunktionen des Html-Moduls. Der einzige Unterschied besteht darin, dass Eigenschaften nicht einzeln animiert werden können. Sie können nur als Gruppe animiert werden. Sie können die Animationswiedergabe auch steuern, indem Sie verschiedene Methoden verwenden, um die Animation jederzeit abzuspielen, anzuhalten, zu stoppen und fortzusetzen. Ich habe diese Methoden im ersten Tutorial dieser Serie detailliert beschrieben.

Wenn Sie Fragen zu diesem Tutorial haben, können Sie gerne einen Kommentar hinterlassen. Im nächsten Tutorial erfahren Sie mehr über das ShapeSwirl 和 stagger-Modul in Mojs.

Das obige ist der detaillierte Inhalt vonErste Schritte mit der Mojs-Animationsbibliothek: Entdecken Sie das Shapes-Modul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!