Share
Dans le didacticiel précédent, nous utilisions mojs pour animer différents éléments HTML sur une page Web. Nous avons utilisé la bibliothèque pour principalement animer div des éléments qui ressemblaient à des carrés ou des cercles. Cependant, vous pouvez utiliser le Html module pour animer toutes sortes d’éléments comme des images ou des en-têtes. Si vous avez réellement l'intention d'animer des formes de base à l'aide de mojs, vous devez probablement utiliser le module Shape de la bibliothèque..
le Forme module vous permet de créer des formes de base dans le DOM en utilisant SVG. Tout ce que vous avez à faire est de spécifier le type de forme que vous souhaitez créer, et mojs se chargera du reste. Ce module vous permet également d’animer différentes formes que vous créez..
Dans ce tutoriel, nous allons couvrir les bases du Forme module et comment vous pouvez l'utiliser pour créer différentes formes et les animer.
Vous devez instancier un mojs Forme objet afin de créer différentes formes. Cet objet acceptera différents paramètres pouvant être utilisés pour contrôler la couleur, la taille, l'angle, etc. des formes que vous créez..
Par défaut, toute forme que vous créez utilisera le corps du document comme parent. Vous pouvez spécifier n'importe quel autre élément en tant que parent à l'aide de la commande parent propriété. Vous pouvez également affecter une classe à n’importe quelle forme créée à l’aide du bouton nom du cours propriété. La bibliothèque n'attribuera aucune classe par défaut si vous ignorez cette propriété.
Mojs a huit formes différentes intégrées afin que vous puissiez les créer directement en définissant une valeur pour le forme propriété. Vous pouvez définir sa valeur sur cercle créer des cercles, rect pour créer des rectangles, et polygone créer des polygones. Vous pouvez également dessiner des lignes droites en définissant la valeur de forme être lignes. La bibliothèque tracera deux lignes perpendiculaires si le forme La valeur est traverser et un certain nombre de lignes parallèles si le forme est égal. De même, des lignes en zigzag peuvent être créées en définissant la valeur de la propriété sur zigzag.
L'objet de forme a aussi un points propriété qui a différentes significations pour différentes formes. Il détermine le nombre total de côtés dans une polygone et le nombre total de lignes parallèles dans un égal forme. le points propriété peut également être utilisée pour définir le nombre de coudes dans un zigzag ligne.
Comme je l'ai mentionné précédemment, mojs crée toutes ces formes à l'aide de SVG. Cela signifie que le Forme object aura également des propriétés spécifiques à SVG pour contrôler l’apparence de ces formes. Vous pouvez définir la couleur de remplissage d’une forme de mojs à l’aide des touches remplir propriété. Lorsqu'aucune couleur n'est spécifiée, la bibliothèque utilisera le rose profond couleur pour remplir la forme. De même, vous pouvez spécifier la couleur de trait d’une forme à l’aide des touches accident vasculaire cérébral propriété. Si aucune couleur de trait n'est spécifiée, mojs conserve la transparence du trait. Vous pouvez contrôler l’opacité de remplissage et de contour d’une forme à l’aide des touches remplirOpacité et accident vasculaire cérébral Propriétés. Ils peuvent avoir n'importe quelle valeur entre 0 et 1.
Mojs vous permet également de contrôler d'autres propriétés d'une forme liées à l'AVC. Par exemple, vous pouvez spécifier le motif de tirets et d’espaces dans un tracé de trait à l’aide des touches accident vasculaire cérébralDasharray propriété. Cette propriété accepte les chaînes et les nombres comme valeurs valides. Sa valeur par défaut est zéro, ce qui signifie que le trait sera une ligne continue. La largeur d’un trait peut être spécifiée à l’aide des touches largeur du trait propriété. Tous les traits auront une largeur de 2 pixels par défaut. La forme de différentes lignes à leurs extrémités peut être spécifiée à l’aide des touches accident vasculaire cérébral propriété. Valeurs valides pour accident vasculaire cérébral sont bout, rond, et carré.
Toute forme que vous créez est placée au centre de son élément parent par défaut. C'est parce que le la gauche et droite les propriétés d'une forme sont définies à 50% chacune. Vous pouvez modifier les valeurs de ces propriétés pour placer les éléments dans des emplacements différents. Une autre façon de contrôler la position d’une forme est d’aider le X et y Propriétés. Ils déterminent le degré de déplacement d'une forme dans les directions horizontale et verticale.
Vous pouvez spécifier le rayon d’une forme à l’aide des touches rayon propriété. Cette valeur est utilisée pour déterminer la taille d'une forme particulière. Vous pouvez aussi utiliser radiusX et rayon Y pour spécifier la taille d'une forme dans une direction particulière. Une autre façon de contrôler la taille d’une forme consiste à utiliser le échelle propriété. La valeur par défaut de échelle est égal à 1, mais vous pouvez le définir sur n’importe quel autre nombre. Vous pouvez également redimensionner une forme dans une direction particulière à l'aide de la commande scaleX et échelleY Propriétés.
L'origine de toutes ces transformations d'une forme est son centre par défaut. Par exemple, si vous faites pivoter une forme en spécifiant une valeur pour le angle propriété, la forme tournera autour de son centre. Si vous souhaitez faire pivoter une forme autour d’un autre point, vous pouvez la spécifier à l’aide des touches origine propriété. Cette propriété accepte une chaîne comme valeur. Le mettre à '0% 0%' fera pivoter, redimensionner ou traduire la forme autour de son coin supérieur gauche. De même, en le réglant sur '50% 0% ' fera pivoter, redimensionner ou traduire la forme autour du centre de son bord supérieur.
Vous pouvez utiliser toutes ces propriétés que nous venons de décrire pour créer une grande variété de formes. Voici quelques exemples:
var circleA = new mojs.Shape (parent: ".container", forme: "circle", gauche: 0, remplissage: "orange", contour: "noir", strokeWidth: 5, isShowStart: true); var circleB = new mojs.Shape (parent: ".container", forme: "circle", gauche: 175, remplissage: "orange", contour: "rouge", radiusX: 80, strokeWidth: 25, strokeDasharray: 2, isShowStart: true); var rectA = new mojs.Shape (parent: ".container", forme: "rect", gauche: 350, remplissage: "rouge", contour: "noir", strokeWidth: 5, isShowStart: true); var rectB = new mojs.Shape (parent: ".container", forme: "rect", gauche: 500, remplissage: "bleu", contour: "bleu", rayon X: 40, rayonY: 100, largeur du trait: 25, strokeDasharray: 20, isShowStart: true); var polyA = new mojs.Shape (parent: ".container", forme: "polygone", haut: 300, gauche: 0, remplissage: "jaune", trait: "noir", trait large: 10, points: 8, isShowStart: true); var polyB = new mojs.Shape (parent: ".container", forme: "polygone", haut: 350, gauche: 175, rayon X: 100, rayon Y: 100, remplissage: "violet", contour: "noir", strokeWidth: 6, strokeDasharray: "15, 10, 5, 10", strokeLinecap: "round", points: 3, isShowStart: true)); var lineA = new mojs.Shape (parent: ".container", forme: "croix", haut: 350, gauche: 375, contour: "rouge", strokeWidth: 40, isShowStart: true); var zigzagA = new mojs.Shape (parent: ".container", forme: "zigzag", haut: 500, gauche: 50, remplissage: "transparent", trait: "noir", trait (largeur): 4, rayon X: 100, points: 10, isShowStart: true); var zigzagB = new mojs.Shape (parent: ".container", forme: "zigzag", haut: 500, gauche: 350, remplissage: "bleu", trait: "transparent", rayon X: 100, points: 50, isShowStart: true);
Les formes créées par le code ci-dessus sont présentées dans la démo CodePen ci-dessous:
Vous pouvez animer presque toutes les propriétés d'une forme dont nous avons parlé dans la section précédente. Par exemple, vous pouvez animer le nombre de points d'un polygone en spécifiant différentes valeurs initiales et finales. Vous pouvez également animer l’origine d’une forme à partir de '50% 50% ' à toute autre valeur comme "75% 75%". Autres propriétés comme angle et échelle se comporter comme ils l'ont fait dans le Html module.
La durée, le délai et la vitesse des différentes animations peuvent être contrôlés à l'aide du durée, retard et la vitesse propriétés respectivement. La propriété de répétition fonctionne également comme elle le faisait dans le Html module. Vous pouvez le définir sur 0 si vous souhaitez lire l'animation une seule fois. De même, vous pouvez le définir sur 3 pour lire l'animation 4 fois. Toutes les valeurs d’assouplissement valables pour le Html Les modules sont également valables pour Forme module.
La seule différence entre les capacités d'animation de ces deux modules est que vous ne pouvez pas spécifier les paramètres d'animation individuellement pour les propriétés de la Forme module. Toutes les propriétés que vous animez auront la même durée, le même délai, les répétitions, etc..
Voici un exemple où nous animons la position x, l’échelle et l’angle d’un cercle:
var circleA = new mojs.Shape (parent: ".container", forme: "circle", gauche: 175, remplissage: "rouge", contour: "noir", strokeWidth: 100, strokeDasharray: 18, isShowStart: true, x: 0: 300, angle: 0: 360, échelle: 0.5: 1.5, durée: 1000, répétition: 10, isYoyo: vrai, easing: "quad.in");
Une façon de contrôler la lecture de différentes animations consiste à utiliser le .puis() méthode permettant de spécifier un nouvel ensemble de propriétés à animer après la fin de la première séquence d’animation. Vous pouvez donner à toutes les propriétés d'animation de nouvelles valeurs initiales et finales à l'intérieur .puis(). Voici un exemple:
var polyA = new mojs.Shape (parent: ".container", forme: "polygone", remplissage: "rouge", contour: "noir", isShowStart: true, points: 4, gauche: 100, x: 0 : 500, largeur du trait: 5: 2, durée: 2000, atténuation: 'élastique.in'). Puis (course: 5, points: 4: 3, angle: 0: 720, échelle : 1: 2, remplissage: 'rouge': 'jaune', durée: 1000, retard: 200, atténuation: 'élastique.out');
Dans ce tutoriel, nous avons appris à créer différentes formes à l'aide de mojs et à animer les propriétés de ces formes..
le Forme module a toutes les capacités d'animation du Html module. La seule différence est que les propriétés ne peuvent pas être animées individuellement. Ils ne peuvent être animés qu'en groupe. Vous pouvez également contrôler la lecture de l'animation en utilisant différentes méthodes pour lire, mettre en pause, arrêter et reprendre les animations à tout moment. J'ai couvert ces méthodes en détail dans le premier tutoriel de la série.
Si vous avez des questions concernant ce didacticiel, n'hésitez pas à poster un commentaire. Dans le prochain tutoriel, vous en apprendrez plus sur les ShapeSwirl et échelonner modules en mojs.
Accentsconagua