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.

Créer une animation de base en rafale

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.

De nombreuses propriétés du module ont les mêmes noms que celles du module Shape. Cependant, dans ce cas, ces propriétés remplissent des tâches très différentes.

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

Les propriétés déterminent le mouvement de l'ensemble de l'éclat plutôt que le mouvement des particules individuelles.

radius 属性控制。这与单个形状的 radiusLes rayons des cercles formés par toutes les particules éclatées sont très différents par la propriété

, qui détermine la taille de ces formes. Dans le cas d'une rafale, le rayon détermine la distance des formes individuelles à l'intérieur.

countVous pouvez spécifier le nombre de formes ou de particules dans une seule rafale à l'aide de l'attribut

. Par défaut, il y aura cinq particules dans chaque rafale que vous créez. Toutes ces particules sont réparties uniformément sur la circonférence de l’éclatement. Par exemple, s’il y a quatre particules, elles seront placées à 90 degrés les unes des autres. S’il y a trois particules, elles seront placées à 120 degrés.

DegreeSi vous ne souhaitez pas que l'éclatement de particules couvre la totalité des 360 degrés, vous pouvez utiliser l'attribut

pour spécifier la partie qui doit être couverte. Toute valeur supérieure à 0 est valide pour cette propriété. Le degré spécifié sera réparti uniformément entre toutes les particules. Si le degré dépasse 360, les formes peuvent se chevaucher.

angleL'angle spécifié à l'aide de l'attribut

détermine l'angle de l'ensemble de la rafale. Dans ce cas, les particules individuelles ne tournent pas autour de leur propre centre, mais autour du centre de l’éclatement. Ceci est similaire à la révolution de la Terre autour du Soleil et diffère de la rotation de la Terre sur son axe.

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

Le réglage sur 3 augmentera le rayon de l'ensemble de l'éclat ainsi que la taille des formes individuelles de 3.

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 = 180Vous 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.

Manipuler des particules éclatées individuelles

BurstJusqu'à 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

ne dispose pas d'un ensemble de propriétés pouvant modifier directement toutes ces valeurs. Cependant, nous pouvons spécifier des valeurs d'animation pour des particules individuelles, ce qui affecte à son tour l'animation en rafale. 🎜

爆发动画中的所有粒子都被视为原始 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!