Share
Les premier et deuxième tutoriels de cette série ont expliqué comment animer différents éléments HTML et formes SVG à l'aide de mojs. Dans ce tutoriel, nous allons apprendre deux autres modules qui peuvent rendre nos animations plus intéressantes. le ShapeSwirl Ce module vous permet d’ajouter un mouvement tourbillonnant à n’importe quelle forme créée. le échelonner module, d'autre part, vous permet de créer et d'animer plusieurs formes à la fois.
le ShapeSwirl le module de mojs a un constructeur qui accepte toutes les propriétés du Forme module. Il accepte également certaines propriétés supplémentaires qui lui permettent de créer un mouvement tourbillonnant.
Vous pouvez spécifier l’amplitude ou la taille du tourbillon à l’aide des touches tourbillonner propriété. La fréquence d’oscillation pendant le mouvement tourbillonnant est déterminée par la valeur du swirlFrequency propriété. Vous pouvez également réduire la longueur totale du chemin de la forme tourbillonnante à l’aide des touches pathScale propriété. Les valeurs valides pour cette propriété sont comprises entre 0 et 1. La direction du mouvement peut être spécifiée à l'aide de direction propriété. Garde en tête que direction a seulement deux valeurs valides: -1 et 1. Les formes dans un mouvement tourbillonnant suivront un chemin sinusoïdal par défaut. Cependant, vous pouvez les animer suivant des lignes droites en définissant la valeur de isSwirl propriété à faux.
Outre ces propriétés supplémentaires, le ShapeSwirl module modifie également la valeur par défaut de certaines propriétés de la Forme module. le rayon de toute forme tourbillonnante est défini sur 5 par défaut. De même, le échelle propriété est définie pour être animée de 1 à 0 dans le ShapeSwirl module.
Dans l'extrait de code suivant, j'ai utilisé toutes ces propriétés pour animer deux cercles dans un mouvement tourbillonnant.
var circleSwirlA = new mojs.ShapeSwirl (parent: ".container", forme: "circle", remplissage: "rouge", contour: "noir", rayon: 20, y: 0: 200, angle: 0 : 720, durée: 2000, répétition: 10); var circleSwirlB = new mojs.ShapeSwirl (parent: ".container", forme: "circle", remplissage: "green", contour: "black", rayon: 20, y: 0: 200, angle: 0 : 720, durée: 2000, swirlSize: 20, swirlFréquence: 10, isSwirl: true, pathScale: 0.5, repeat: 10);
Dans la démo suivante, vous pouvez cliquer sur le bouton Jouer bouton pour animer deux cercles, un triangle et une croix dans un mouvement tourbillonnant.
Contrairement à tous les autres modules que nous avons discutés jusqu'à présent, échelonner n'est pas un constructeur. Ce module est en fait une fonction qui peut être enroulée autour de tout autre module pour animer plusieurs formes ou éléments à la fois. Cela peut être très utile lorsque vous souhaitez appliquer la même séquence d'animation sur différentes formes tout en modifiant leur amplitude indépendamment..
Une fois que vous avez emballé le Forme module à l'intérieur du échelonner() fonction, vous pourrez spécifier le nombre d’éléments à animer en utilisant le quantificateur propriété. Après cela, vous pouvez spécifier la valeur de tous les autres Forme propriétés connexes. Il sera désormais possible pour chaque propriété d'accepter séquentiellement un tableau de valeurs à appliquer à des formes individuelles. Si vous voulez que toutes les formes aient la même valeur pour une propriété particulière, vous pouvez simplement définir la propriété pour qu'elle soit égale à cette valeur particulière au lieu d'un tableau de valeurs..
L'exemple suivant devrait préciser comment les valeurs sont affectées à différentes formes:
var staggerShapes = mojs.stagger (mojs.Shape); var triangles = new staggerShapes (quantificateur: 5, forme: 'polygone', remplissage: 'jaune', contour: 'noir', contour: largeur: 5, rayon: [20, 30, 40, 50, 60], gauche: 100 , top: 200, x: [0: 100, 0: 150, 0: 200, 0: 250, 0: 300], durée: 2000, répétition: 10, atténuation: ' quad.in ', isYoyo: true, isShowStart: true);
Nous commençons par emballer le Forme module à l'intérieur du échelonner() une fonction. Cela nous permet de créer plusieurs formes à la fois. Nous avons défini la valeur du quantificateur propriété à 5. Cela crée cinq formes différentes, qui dans notre cas sont des polygones. Chaque polygone est un triangle car la valeur par défaut de points la propriété est 3. Nous avons déjà couvert toutes ces propriétés dans le deuxième tutoriel de la série.
Il n'y a qu'une valeur de remplir, accident vasculaire cérébral, et largeur du trait. Cela signifie que tous les triangles seront remplis de jaune et auront un trait noir. La largeur de trait dans chaque cas serait de 5px. La valeur de la rayon La propriété, en revanche, est un tableau de cinq entiers. Chaque entier détermine le rayon d'un triangle du groupe. La valeur 20 est attribuée au premier triangle et la valeur 60 au dernier triangle..
Toutes les propriétés ont eu les mêmes valeurs initiales et finales pour les triangles individuels jusqu'à présent. Cela signifie qu'aucune des propriétés ne serait animée. Cependant, la valeur de la X propriété est un tableau d'objets contenant les valeurs initiale et finale de la position horizontale de chaque triangle. Le premier triangle traduira de x: 0 à x: 100, et le dernier triangle se traduira par x: 0 à x: 300. La durée de l'animation dans chaque cas serait de 2000 millisecondes..
S'il existe un pas fixe entre les différentes valeurs d'une propriété, vous pouvez également utiliser des chaînes décalées pour spécifier la valeur initiale et les incréments. Les chaînes Stagger acceptent deux paramètres. Le premier est le début valeur, qui est assignée au premier élément du groupe. La deuxième valeur est étape, qui détermine l’augmentation ou la diminution de valeur pour chaque forme successive. Quand une seule valeur est transmise à la chaîne de décalage, elle est considérée comme la étape, et le début la valeur dans ce cas est supposée être zéro.
L'exemple de triangle ci-dessus pourrait être réécrit comme suit:
var staggerShapes = mojs.stagger (mojs.Shape); var triangles = new staggerShapes (quantificateur: 5, forme: 'polygone', remplissage: 'jaune', contour: 'noir', contour: 5: rayon, 'décalé (20, 10)', gauche: 100, en haut: 200, x: 0: 'décalé (100, 50)', durée: 2000, répétition: 10, atténuation: 'quad.in', isYoyo: true, isShowStart: true);
Vous pouvez également affecter des valeurs aléatoires à différentes formes d'un groupe à l'aide de chaînes rand. Vous devez simplement fournir une valeur minimale et maximale à une chaîne rand, et mojs attribuera automatiquement une valeur comprise entre ces limites aux différentes formes du groupe..
Dans l'exemple suivant, nous utilisons les chaînes rand pour définir de manière aléatoire le nombre de points de chaque polygone. Vous avez peut-être remarqué que le nombre total de polygones que nous rendons est 25, mais le remplir tableau a seulement quatre couleurs. Lorsque la longueur du tableau est inférieure à la valeur de quantificateur, les valeurs des différentes formes sont déterminées par un cycle continu dans la matrice jusqu'à ce qu'une valeur soit affectée à toutes les formes. Par exemple, après avoir affecté la couleur des quatre premiers polygones, la couleur du cinquième polygone serait orange, la couleur du sixième polygone serait jaune, etc..
La chaîne de décalage définit le rayon du premier polygone égal à 10, puis continue d'augmenter le rayon des polygones suivants de 1. La position horizontale de chaque polygone est augmentée de la même manière de 20 et la position verticale est déterminée de manière aléatoire. Le final angle La valeur de chaque polygone est définie de manière aléatoire entre -120 et 120. Ainsi, certains polygones tournent dans le sens des aiguilles d'une montre, tandis que d'autres tournent dans le sens contraire des aiguilles d'une montre. L'animation d'angle reçoit également sa propre fonction d'accélération, différente de l'animation courante d'autres propriétés..
var staggerShapes = mojs.stagger (mojs.Shape); var polygones = new staggerShapes (quantificateur: 25, forme: 'polygone', points: 'rand (3, 6)', remplissage: ['orange', 'jaune', 'cyan', 'lightgreen'], contour: 'noir', rayon: 'décalé (10, 1)', gauche: 100, en haut: 100, x: 'décalé (0, 20)', y: 'rand (40, 400)', échelle: 1: 'rand (0,1, 3)', angle: 0: 'rand (-120, 120)', atténuation: 'elastic.in', durée: 1 000, répétition: 10, atténuation: 'cubic.in', isYoyo: true, isShowStart: true);
Nous avons couvert deux autres modules de mojs dans ce tutoriel. le ShapeSwirl module nous permet d’animer différentes formes dans un mouvement tourbillonnant. le échelonner module nous permet d'animer plusieurs éléments de forme à la fois.
Chaque forme dans un échelonner groupe peut être animé indépendamment, sans aucune interférence d'autres formes. Cela rend le échelonner module incroyablement utile. Nous avons également appris à utiliser des chaînes de décalage pour attribuer des valeurs avec des étapes fixes aux propriétés de différentes formes..
Si vous avez des questions concernant ce didacticiel, veuillez me le faire savoir dans les commentaires. Nous allons apprendre sur le Éclater module dans le prochain tutoriel de cette série.
Pour des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Accentsconagua