Share
Nous avons commencé cette série en apprenant à animer des éléments HTML à l'aide de mojs. Dans le deuxième tutoriel, nous avons passé à l’animation de formes SVG intégrées à l’aide de la Forme module. Le troisième tutoriel couvrait plus de façons d’animer des formes SVG en utilisant le ShapeSwirl et échelonner modules.
Maintenant, nous allons apprendre à animer différentes formes SVG dans une formation en rafale en utilisant le Éclater module. Ce didacticiel dépendra des concepts abordés dans les trois didacticiels précédents. Si vous ne les avez pas déjà lues, je vous suggère de les parcourir en premier..
La première chose à faire avant de créer des animations en rafale est d’instancier un Éclater objet. Après cela, nous pouvons simplement spécifier les valeurs de différentes propriétés pour contrôler le déroulement de l'animation. Les noms de nombreuses propriétés dans le Éclater module sont les mêmes que les propriétés dans le Forme module. Cependant, ces propriétés remplissent des tâches très différentes dans ce cas.
le la gauche et droite les propriétés déterminent la position initiale de l'éclatement au lieu des particules qu'il contient. De même, le X et y les propriétés déterminent le décalage de la rafale au lieu de particules individuelles.
Le rayon du cercle formé par toutes les particules éclatées est contrôlé par la rayon propriété. Ceci est très différent de la rayon propriété des formes individuelles, qui détermine la taille de ces formes. Dans le cas d’une rafale, le rayon détermine l’éloignement des formes individuelles qui la composent..
Le nombre de formes ou de particules d’une même rafale peut être spécifié à l’aide des touches compter propriété. Par défaut, il y aura cinq particules dans chaque rafale que vous créez. Toutes ces particules sont régulièrement réparties sur la circonférence de la rafale. 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.
Si vous ne souhaitez pas que les particules éclatées couvrent la totalité des 360 degrés, vous pouvez spécifier la partie à couvrir à l'aide de la touche diplôme propriété. Toute valeur supérieure à 0 est valide pour cette propriété. Le nombre de degrés spécifié sera uniformément réparti entre toutes les particules. Si la valeur en degrés est supérieure à 360, les formes peuvent se chevaucher.
L'angle spécifié à l'aide du angle La propriété détermine l'angle de la rafale totale. Dans ce cas, les particules individuelles ne pivotent pas autour de leur propre centre mais autour du centre de la rafale. Ceci est similaire à la façon dont la Terre tourne autour du soleil, ce qui est différent de la rotation de la Terre sur son propre axe..
le échelle property met à l'échelle la valeur de toutes les propriétés physiques de la rafale et, à son tour, des formes individuelles. Tout comme les autres propriétés éclatées, toutes les formes qu’il contient seraient mises à l’échelle en même temps. Définir la rafale échelle 3 augmentera le rayon de la rafale totale ainsi que la taille des formes individuelles de 3.
Dans l'extrait de code suivant, nous créons cinq rafales différentes à l'aide des propriétés que nous venons de décrire..
var burstA = new mojs.Burst (count: 20); var burstB = new mojs.Burst (angle: 0: 360, échelle: 1: 2, rayon: 10); var burstC = new mojs.Burst (angle: 0: 360, échelle: 1: 2, rayon: 10: 100); var burstD = new mojs.Burst (degré: 180, rayon X: 10, angle: -90, échelle: 1: 2, rayon: 10: 100); var burstE = new mojs.Burst (count: 20, degree: 3600);
Tu peux voir ça éclaterA et éclater ne diffèrent que par le nombre de degrés qu’ils doivent couvrir. Depuis les particules dans éclaterA doivent couvrir 360 degrés (la valeur par défaut), ils sont placés 360/20 = 18 degrés à part. D'autre part, les particules dans éclater sont placés 3600/20 = 180 degrés à part. A partir de zéro, la première particule est placée à 0 degré et la suivante à 180 degrés.
La troisième particule est ensuite placée à 360 degrés, ce qui est fondamentalement égal à 0 degré. La quatrième particule est ensuite placée à 540 degrés, mais est fondamentalement égale à 180 degrés. En d'autres termes, toutes les particules impaires sont placées à 0 degré et toutes les particules paires sont placées à 180 degrés. En fin de compte, vous ne voyez que deux particules car toutes les autres se chevauchent avec les deux premières.
Il est important de se rappeler que vous ne pouvez pas contrôler directement la durée, le délai ou la fonction d'accélération des animations en rafale. Le module détermine automatiquement toutes ces valeurs en fonction des valeurs des différents enfants animés..
Jusqu'ici, dans ce didacticiel, la même animation était appliquée à toutes les particules d'une rafale. Leur angle, échelle, rayon et position ont tous été modifiés par la même valeur. De plus, nous n'avons pas été en mesure de contrôler la durée et le retard des particules individuelles ou de la rafale dans son ensemble. Les mojs Éclater Le module ne dispose pas d'un ensemble de propriétés pouvant modifier directement toutes ces valeurs. Cependant, nous pouvons spécifier la valeur d'animation pour des particules individuelles, ce qui affecte à son tour l'animation en rafale..
Toutes les particules d'une animation en rafale sont considérées comme des enfants de l'original. Éclater objet. Par conséquent, mojs nous permet de contrôler l’animation de particules de rafale individuelles à l’aide d’une les enfants propriété, qui accepte un objet comme valeur. Vous pouvez utiliser tous les ShapeSwirl propriétés sauf X et y à l'intérieur de l'objet enfants. Cela a du sens parce que les particules individuelles dans une animation en rafale doivent apparaître à certaines positions, et nous permettre de changer de manière aléatoire la position des particules individuelles changera la configuration.
Toutes les valeurs de propriété enfants que vous ne spécifiez pas seront définies sur la valeur par défaut fournie par ShapeSwirl module. Dans l'exemple suivant, nous animons 20 lignes différentes de notre animation en rafale. Cette fois, le angle propriété a été définie sur des particules individuelles au lieu de la Éclater objet de sorte que seules les lignes tournent autour de leur centre au lieu de tout l'objet. Comme nous l’avons appris dans le précédent tutoriel, tous les ShapeSwirl les objets passent de 1 à 0 par défaut. C'est pourquoi les longueurs des lignes passent de 40 à 0 dans l'animation.
var burstA = new mojs.Burst (nombre: 20, enfants: forme: 'ligne', trait: 'noir', rayon: 20, angle: 0: 180);
Comme je l’ai dit plus tôt, nous pouvons animer tous les ShapeSwirl propriétés à l'intérieur des animations en rafale. Chaque enfant de l'animation peut avoir son propre ensemble de propriétés. Si une seule valeur est fournie, elle sera appliquée à toutes les particules enfants. Si les valeurs sont fournies sous forme de tableau, elles seront appliquées séquentiellement, une particule à la fois..
Voici le code JavaScript pour créer cinq animations en rafales différentes en utilisant tous les concepts que nous avons appris jusqu'à présent..
var burstA = new mojs.Burst (count: 20, angle: 0: 180, rayon: 0: 100, enfants: forme: "polygone", contour: "noir", rayon: 20, angle: 0: 360, durée: 4000); var burstB = new mojs.Burst (count: 20, angle: 0: 180, rayon: 0: 100, enfants: forme: "polygone", remplissage: ["jaune", "cyan", " orange "], contour:" noir ", rayon: 20, échelle: 1: 2, durée: 2000, isShowEnd: false); var burstC = new mojs.Burst (count: 20, angle: 0: -180, rayon: 0: 100, enfants: forme: "cercle", remplissage: ["rouge", "noir", "bleu"], rayon: 10: "décalé (5, 1)"); var burstD = new mojs.Burst (count: 6, rayon: 0: 100, enfants: forme: "cercle", remplissage: ["rouge", "jaune", "bleu"], échelle: 1 : "rand (1, 10)", isShowEnd: false); var burstE = new mojs.Burst (compte: 6, rayon: 0: 100, enfants: forme: "cercle", remplissez: ["rouge", "jaune", "bleu"], contour: "noir ", échelle: 1:" rand (1, 10) "). alors (angle: 0: 360, rayon: 100: 0, échelle: 1: 0);
Dans la première animation en rafale, le angle appliqué directement sur le Éclater objet fait pivoter tout le groupe autour du centre de l'objet éclaté. Cependant, le angle appliquée à l'intérieur de la propriété children fait pivoter tous les triangles autour de leurs propres centres. Nous avons également ralenti l'animation en rafale en modifiant la durée de l'animation pour tous les enfants à 4000 ms..
Dans la seconde animation en rafale, la couleur de tous les triangles est prise du tableau passé à la remplir propriété. Nous n'avons spécifié que trois couleurs de remplissage, mais le nombre total de triangles est de 20. Dans ce cas, mojs continue de parcourir les éléments du tableau et remplit les triangles avec les mêmes trois couleurs..
Dans la quatrième animation, nous utilisons rand Les chaînes de caractères, décrites dans le didacticiel précédent, permettent de choisir de manière aléatoire une valeur d'échelle pour toutes les particules enfants. Nous fixons également la valeur de isShowEnd propriété à faux afin de cacher les particules à la fin de l'animation.
Dans la cinquième animation, nous utilisons le puis() méthode du tutoriel du module Shape pour lire une autre séquence d'animation une fois la première terminée.
Le but de cette série était de vous familiariser avec les bases de la bibliothèque d’animation de mojs. Chaque tutoriel est axé sur un seul module et explique comment vous pouvez utiliser les propriétés de ce module pour créer des animations de base..
Ce dernier tutoriel a utilisé les concepts des tutoriels précédents pour créer des animations légèrement plus compliquées. Mojs est une bibliothèque d'animation très puissante, et les résultats finaux obtenus dépendent de la créativité avec laquelle vous pouvez obtenir toutes les propriétés, alors continuez à expérimenter.
S'il y a quelque chose que vous voudriez que je clarifie dans ce tutoriel, merci de me le faire savoir dans les commentaires..
Accentsconagua