Schnellstart mit der Mojs-Animationsbibliothek: Eine Anleitung zum Explosionsmodul

Wir beginnen diese Serie damit, dass wir lernen, wie man HTML-Elemente mithilfe von Mojs animiert. In diesem zweiten Tutorial fahren wir mit weiteren Möglichkeiten fort, SVG-Formen mithilfe des Shape 模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl 和 stagger-Moduls zu animieren.

Jetzt lernen wir, wie man mit dem Burst-Modul verschiedene SVG-Formen in Bursts animiert. Dieses Tutorial basiert auf den Konzepten, die wir in den ersten drei Tutorials behandelt haben. Wenn Sie sie noch nicht gelesen haben, empfehle ich Ihnen, sie zuerst zu lesen.

Erstellen Sie eine einfache Burst-Animation

Das erste, was wir tun müssen, bevor wir Burst-Animationen erstellen, ist das Burst 对象。之后，我们可以指定不同属性的值来控制动画的播放方式。 Burst 模块中的许多属性名称与 Shape-Objekt zu instanziieren. Anschließend können wir Werte für verschiedene Eigenschaften angeben, um zu steuern, wie die Animation abgespielt wird.

Viele Eigenschaften im Modul haben die gleichen Namen wie die im Modul Shape. Allerdings erfüllen diese Eigenschaften in diesem Fall ganz unterschiedliche Aufgaben.

left 和 right 属性决定突发的初始位置，而不是突发内部的粒子。同样，x 和 y

Eigenschaften bestimmen die Bewegung des gesamten Ausbruchs und nicht die Bewegung einzelner Partikel.

radius 属性控制。这与单个形状的 radiusDie Radien der von allen geplatzten Partikeln gebildeten Kreise unterscheiden sich stark durch die

-Eigenschaft, die die Größe dieser Formen bestimmt. Bei einem Burst bestimmt der Radius den Abstand zwischen den einzelnen Formen darin.

countMit dem Attribut

können Sie die Anzahl der Formen oder Partikel in einem einzelnen Burst angeben. Standardmäßig enthält jeder von Ihnen erstellte Burst fünf Partikel. Alle diese Partikel sind gleichmäßig über den Umfang des Ausbruchs verteilt. Wenn es beispielsweise vier Partikel gibt, werden diese im 90-Grad-Winkel zueinander platziert. Wenn drei Partikel vorhanden sind, werden sie im Winkel von 120 Grad platziert.

DegreeWenn Sie nicht möchten, dass der Partikelausbruch die gesamten 360 Grad abdeckt, können Sie mit dem Attribut

den Teil angeben, der abgedeckt werden soll. Für diese Eigenschaft ist jeder Wert größer 0 gültig. Der angegebene Grad wird gleichmäßig auf alle Partikel verteilt. Wenn der Grad 360 überschreitet, können sich die Formen überlappen.

angleDer mit dem Attribut

angegebene Winkel bestimmt den Winkel des gesamten Bursts. In diesem Fall rotieren die einzelnen Teilchen nicht um ihr eigenes Zentrum, sondern um das Zentrum des Ausbruchs. Dies ähnelt der Drehung der Erde um die Sonne und unterscheidet sich von der Drehung der Erde um ihre Achse.

scale 属性可缩放突发的所有物理属性的值，进而缩放各个形状。就像其他突发属性一样，其中的所有形状都会立即缩放。将突发 scale

Bei der Einstellung 3 wird der Radius des gesamten Bursts sowie die Größe einzelner Formen um 3 erhöht.

Im folgenden Codeausschnitt erstellen wir fünf verschiedene Bursts mit den gerade besprochenen Eigenschaften.

var burstA = new mojs.Burst({
  count: 20
});

var burstB = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: 10
});

var burstC = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstD = new mojs.Burst({
  degree: 180,
  radiusX: 10,
  angle: -90,
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstE = new mojs.Burst({
  count: 20,
  degree: 3600
});

burstA 和 burstE 仅在它们必须覆盖的度数上有所不同。由于 burstA 中的粒子必须覆盖 360 度（默认值），因此它们的放置间隔为 360/20 = 18 度。另一方面，burstE 中的粒子以 3600/20 = 180Sie können

die Studienplatzierung sehen. Ausgehend von Null wird das erste Partikel bei 0 Grad und das nächste Partikel bei 180 Grad platziert.

Dann platzieren Sie das dritte Teilchen bei 360 Grad, was im Grunde 0 Grad entspricht. Platzieren Sie dann das vierte Teilchen bei 540 Grad, aber das entspricht im Grunde 180 Grad. Mit anderen Worten: Alle ungeraden Partikel werden bei 0 Grad und alle geraden Partikel bei 180 Grad platziert. Am Ende sehen Sie nur zwei Partikel, da alle anderen Partikel mit den ersten beiden Partikeln überlappen.

Es ist wichtig zu bedenken, dass Sie keine direkte Kontrolle über die Dauer, Verzögerung oder Beschleunigungsfunktion der Burst-Animation haben. Das Modul ermittelt alle diese Werte automatisch anhand der Werte der verschiedenen animierten Kinder.

Einzelne geplatzte Partikel manipulieren

BurstBisher wurde in diesem Tutorial auf alle Partikel im Burst die gleiche Animation angewendet. Ihr Winkel, Maßstab, Radius und Position ändern sich alle um den gleichen Wert. Darüber hinaus haben wir keine Kontrolle über die Dauer und Latenz einzelner Partikel oder des gesamten Ausbruchs. Das Modul mojs

verfügt nicht über eine Reihe von Eigenschaften, die alle diese Werte direkt ändern können. Wir können jedoch Animationswerte für einzelne Partikel festlegen, was sich wiederum auf die Burst-Animation auswirkt. 🎜

爆发动画中的所有粒子都被视为原始 Burst 对象的子级。因此，mojs 允许我们使用 children 属性来控制单个爆发粒子的动画，该属性接受一个对象作为其值。您可以在子对象内使用除 x 和 y 之外的所有 ShapeSwirl 属性。这是有道理的，因为爆发动画中的单个粒子必须出现在某些位置，并且允许我们随机更改单个粒子的位置将改变配置。

您未指定的任何子属性值都将设置为 ShapeSwirl 模块提供的默认值。在下面的示例中，我们对突发动画的 20 条不同线进行动画处理。这次，angle 属性已设置在单个粒子上，而不是 Burst 对象上，这样只有线绕其中心旋转，而不是整个对象。正如我们在上一篇教程中了解到的，所有 ShapeSwirl 对象默认情况下都会从 1 缩小到 0。这就是动画中线条长度从 40 变为 0 的原因。

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

正如我之前提到的，我们可以为连拍动画中的所有 ShapeSwirl 属性设置动画。动画中的每个子项都可以有自己的一组属性。如果仅提供一个值，它将应用于所有子粒子。如果这些值以数组形式提供，它们将按顺序应用，一次一个粒子。

下面是使用我们迄今为止学到的所有概念创建五种不同的突发动画的 JavaScript 代码。

var burstA = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    stroke: "black",
    radius: 20,
    angle: {
      0: 360
    },
    duration: 4000
  }
});

var burstB = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    fill: ["yellow", "cyan", "orange"],
    stroke: "black",
    radius: 20,
    scale: {
      1: 2
    },
    duration: 2000
  },
  isShowEnd: false
});

var burstC = new mojs.Burst({
  count: 20,
  angle: {
    0: -180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "black", "blue"],
    radius: {
      10: "stagger(5, 1)"
    }
  }
});

var burstD = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    scale: {
      1: "rand(1, 10)"
    }
  },
  isShowEnd: false
});

var burstE = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    stroke: "black",
    scale: {
      1: "rand(1, 10)"
    }
  }
}).then({
  angle: {
    0: 360
  },
  radius: {
    100: 0
  },
  scale: {
    1: 0
  }
});

在第一个突发动画中，直接应用于 Burst 对象的 angle 会围绕突发对象的中心旋转整个组。然而，在children属性中应用的angle会围绕它们自己的中心旋转所有三角形。我们还通过将所有子级的动画持续时间更改为 4000 毫秒来减慢突发动画的速度。

在第二个连拍动画中，所有三角形的颜色均取自传递给 fill 属性的数组。我们只指定了三种填充颜色，但三角形的总数为 20。在这种情况下，mojs 会不断循环数组元素，并一次又一次地用相同的三种颜色填充三角形。

在第四个动画中，我们使用在上一个教程中了解的 rand 字符串来为所有子粒子随机选择一个比例值。我们还将 isShowEnd 属性的值设置为 false 以隐藏动画结束时的粒子。

在第五个动画中，我们使用 Shape 模块教程中的 then() 方法在第一个动画序列完成后播放另一个动画序列。

最终想法

本系列的目的是让您熟悉 mojs 动画库的基础知识。每个教程都侧重于单个模块以及如何使用该模块中的属性来创建基本动画。

最后一个教程使用了之前教程中的概念来创建稍微复杂的动画。 Mojs 是一个非常强大的动画库，您获得的最终结果取决于您对所有属性的创意程度，因此请不断尝试。

如果您希望我在本教程中澄清任何内容，请在评论中告诉我。

Das obige ist der detaillierte Inhalt vonSchnellstart mit der Mojs-Animationsbibliothek: Eine Anleitung zum Explosionsmodul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!