Maison > Article > Tutoriel CMS > Démarrage rapide avec la bibliothèque d'animation Mojs : un guide du module Explosion
Nous commençons cette série en apprenant à animer des éléments HTML à l'aide de mojs. Dans ce deuxième tutoriel, nous continuons avec d'autres façons d'animer des formes SVG à l'aide du module Shape
模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl
和 stagger
.
Nous allons maintenant apprendre à animer différentes formes SVG en rafales à l'aide du module Burst
. Ce tutoriel dépendra des concepts que nous avons abordés dans les trois premiers tutoriels. Si vous ne les avez pas encore lus, je vous recommande de les lire d'abord.
La première chose que nous devons faire avant de créer des animations en rafale est d'instancier l'objet Burst
对象。之后,我们可以指定不同属性的值来控制动画的播放方式。 Burst
模块中的许多属性名称与 Shape
. Ensuite, nous pouvons spécifier des valeurs pour différentes propriétés afin de contrôler la façon dont l'animation est jouée.
Shape
. Cependant, dans ce cas, ces propriétés remplissent des tâches très différentes.
left
和 right
属性决定突发的初始位置,而不是突发内部的粒子。同样,x
和 y
radius
属性控制。这与单个形状的 radius
Les rayons des cercles formés par toutes les particules éclatées sont très différents par la propriété
count
Vous pouvez spécifier le nombre de formes ou de particules dans une seule rafale à l'aide de l'attribut
Degree
Si vous ne souhaitez pas que l'éclatement de particules couvre la totalité des 360 degrés, vous pouvez utiliser l'attribut
angle
L'angle spécifié à l'aide de l'attribut
scale
属性可缩放突发的所有物理属性的值,进而缩放各个形状。就像其他突发属性一样,其中的所有形状都会立即缩放。将突发 scale
Dans l'extrait de code ci-dessous, nous allons créer cinq rafales différentes en utilisant les propriétés qui viennent d'être évoquées.
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 = 180
Vous pouvez voir le placement du diplôme. En partant de zéro, la première particule est placée à 0 degré et la particule suivante est placée à 180 degrés. Placez ensuite la troisième particule à 360 degrés, ce qui est fondamentalement égal à 0 degré. Placez ensuite la quatrième particule à 540 degrés, mais cela équivaut fondamentalement à 180 degrés. En d’autres termes, toutes les particules impaires sont placées à 0 degré et toutes les particules paires à 180 degrés. En fin de compte, vous ne voyez que deux particules car toutes les autres particules se chevauchent avec les deux premières particules.
Il est important de se rappeler que vous n’avez pas de contrôle direct sur la durée, le délai ou la fonctionnalité d’assouplissement de l’animation en rafale. Le module détermine automatiquement toutes ces valeurs en fonction des valeurs des différents enfants animés.
Burst
Jusqu'à présent dans ce didacticiel, la même animation a été appliquée à toutes les particules de l'éclatement. Leur angle, leur échelle, leur rayon et leur position changent tous de la même valeur. De plus, nous n’avons aucun contrôle sur la durée et la latence des particules individuelles ou sur l’ensemble du burst. Le module mojs
爆发动画中的所有粒子都被视为原始 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 是一个非常强大的动画库,您获得的最终结果取决于您对所有属性的创意程度,因此请不断尝试。
如果您希望我在本教程中澄清任何内容,请在评论中告诉我。
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!