Share
De nombreux sites Web utilisent maintenant une sorte d'animation pour rendre leurs pages de destination plus attrayantes. Heureusement, il existe de nombreuses bibliothèques qui vous permettent d’animer des éléments sur une page Web sans tout faire à partir de zéro. Dans ce tutoriel, vous en apprendrez plus sur une telle bibliothèque appelée mojs.
La bibliothèque est très facile à utiliser en raison de sa simple API déclarative. Les animations que vous pouvez créer avec mojs seront toutes lisses et prêtes pour la rétine afin que tout ait l'air professionnel.
Il y a beaucoup de façons d'inclure des mojs dans vos projets. Vous pouvez récupérer la bibliothèque dans son référentiel GitHub. Sinon, vous pouvez directement inclure un lien vers la dernière version de la bibliothèque à partir de différents CDN de votre projet..
Les développeurs peuvent également installer des mojs à l'aide de gestionnaires de packages tels que npm et bower en exécutant la commande suivante:
npm installer mo-js bower installer mojs
Une fois que vous avez inclus la bibliothèque dans votre projet, vous pouvez commencer à utiliser différents modules pour créer des animations intéressantes..
Ce tutoriel portera sur le module HTML de la bibliothèque mojs. Ce module peut être utilisé pour animer différents éléments HTML sur la page Web..
La première chose à faire pour animer un élément DOM est de créer un mojs. Html objet. Vous pouvez spécifier le sélecteur d'un élément et ses propriétés que vous souhaitez animer dans cet objet..
Définir une valeur pour el vous permettra d'identifier l'élément que vous souhaitez animer à l'aide de mojs. Vous pouvez définir sa valeur en tant que sélecteur ou en tant que nœud DOM..
Le module HTML possède des attributs prédéfinis qui peuvent être utilisés pour animer différentes propriétés d’un élément DOM liées à la transformation. Par exemple, vous pouvez contrôler l’animation de traduction d’un élément le long des axes x, y et z en spécifiant les valeurs de début et de fin pour les éléments. X, y et z Propriétés. Vous pouvez également faire pivoter n’importe quel élément le long de différents axes à l’aide des touches angleX, angleY et angleZ Propriétés. Ceci est similaire à la correspondante rotationX (), rotationY () et rotationZ () se transforme en CSS. Vous pouvez également incliner un élément le long de l’axe X ou Y à l’aide du bouton skewX et pince Propriétés.
L'application d'animations de redimensionnement sur différents éléments est tout aussi simple. Si vous souhaitez redimensionner un élément dans les deux sens, définissez simplement une valeur pour le paramètre. échelle propriété. De même, vous pouvez animer la mise à l’échelle des éléments le long de différents axes en définissant des valeurs appropriées pour la scaleX et échelleY Propriétés.
Outre toutes ces propriétés qui vous permettent de définir les valeurs initiales et finales de l'animation, il existe d'autres propriétés qui contrôlent la lecture de l'animation. Vous pouvez spécifier la durée de l'animation à l'aide du durée propriété. La valeur fournie nécessite un nombre et définira la durée de l'animation en millisecondes. Si vous souhaitez démarrer une animation après un certain délai, vous pouvez définir la valeur du délai à l’aide des touches retard propriété. Juste comme durée, retard s'attend également à ce que sa valeur soit un nombre.
Les animations peuvent être répétées plusieurs fois à l'aide du répéter propriété. Sa valeur par défaut est zéro, ce qui signifie que l'animation ne serait lue qu'une fois. Si vous le définissez sur 1, l'animation sera lue deux fois et si vous le définissez sur 2, l'animation sera lue trois fois. Une fois que l'animation a terminé sa première itération, l'élément revient à son état initial et reprend l'animation (si vous avez défini une valeur pour la répéter propriété). Ce passage soudain de l'état final à l'état initial peut ne pas être souhaitable dans tous les cas.
Si vous souhaitez que l'animation soit lue à l'envers une fois qu'elle a atteint l'état final, vous pouvez définir la valeur de l'animation. isYoyo propriété à vrai. Il est mis à faux par défaut. Enfin, vous pouvez définir la vitesse à laquelle l'animation doit être lue à l'aide du bouton la vitesse propriété. Sa valeur par défaut est 1. Si vous le réglez sur 2, l'animation sera lue deux fois plus vite. De même, si vous le réglez à 0.5, l'animation sera lue à la moitié de la vitesse..
Les mojs Html les objets que vous avez créés n'animeront pas les éléments respectifs. Vous devrez appeler le jouer() méthode sur chaque mojs Html animation que vous voulez jouer. Voici un exemple qui anime trois boîtes différentes en utilisant toutes les propriétés que nous venons de décrire:
Accentsconagua
var htmlA = new mojs.Html (el: ".a", x: 0: 400, angleZ: 0: 720, durée: 1000, répétez: 4, isYoyo: true); var htmlB = new mojs.Html (el: ".b", x: 400: 0, angleY: 0: 360, angleZ: 0: 720, durée: 1000, répétition: 4); var htmlC = new mojs.Html (el: ".c", x: 0: 400, angleY: 0: 360, scaleZ: 1: 2, skewX: 0: 30, durée: 1000, répétez: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("cliquez", fonction () htmlA.play (); htmlB.play (); htmlC.play ();); Vous n'êtes pas limité à simplement animer les propriétés de transformation d'un élément. La bibliothèque d'animation de mojs vous permet également d'animer toutes les autres propriétés CSS animables. Assurez-vous simplement de leur fournir des valeurs initiales et finales valides. Par exemple, vous pouvez animer la couleur d’arrière-plan d’un élément en spécifiant des valeurs valides pour Contexte.
Si la propriété CSS que vous souhaitez animer contient un trait d'union, vous pouvez le supprimer et convertir le nom de la propriété en affaire de chameau lors de la définition des valeurs initiales et finales à l'intérieur des mojs Html objet. Cela signifie que vous pouvez animer le rayon de la frontière en définissant une valeur valide pour le borderRadius propriété. L'exemple suivant devrait tout clarifier:
var htmlA = new mojs.Html (el: ".a", x: 0: 400, angleZ: 0: 360, arrière-plan: rouge: 'noir', borderWidth: 10: 20, borderColor: 'black': 'red', borderRadius: 0: '50% ', durée: 2000, répétez: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); Dans l'exemple ci-dessus, la couleur de la bordure passe du noir au rouge tandis que le rayon de la bordure s'anime de 0 à 50%. Notez qu'un nombre sans unité sera considéré comme une valeur de pixel, tandis qu'un nombre avec des unités doit être spécifié sous la forme d'une chaîne telle que '50% '.
Jusqu'à présent, nous avons utilisé un seul ensemble de propriétés d'interpolation pour contrôler la lecture de différentes animations. Cela signifiait qu’un élément prendrait le même temps pour passer de x: 0 à x: 200 comme il faudra à l'échelle de échelle: 1 à échelle: 2.
Cela peut ne pas être un comportement souhaitable car vous voudrez peut-être retard l'animation de certaines propriétés et contrôler leur durée ainsi que. Dans de tels cas, vous pouvez spécifier les paramètres de lecture d'animation de chaque propriété dans l'objet de propriété lui-même..
var htmlA = new mojs.Html (el: ".a", x: 0: 400, durée: 1000, répétition: 8, isYoyo: true, angleY: 0: 360, retard: 500, durée: 1000 , répétez: 4, isYoyo: vrai, angleZ: 0: 720, retard: 1000, durée: 1000, répétez: 4, isYoyo: vrai); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); Chaque animation que vous créez aura le sin.out assouplissement appliqué par défaut. Si vous souhaitez que la lecture de l'animation progresse à l'aide d'une fonction d'accélération différente, vous pouvez spécifier sa valeur à l'aide de la commande assouplissement propriété. Par défaut, la valeur spécifiée pour assouplissement est également utilisé lorsque l'animation est lue à l'envers. Si vous souhaitez appliquer un assouplissement différent pour les animations en arrière, vous pouvez définir une valeur pour la en arrière propriété.
La bibliothèque mojs dispose de 11 fonctions d'accélération intégrées différentes. Ceux-ci sont linéaire, facilité, péché, quad, cubique, litre, quint, expo, circ, retour, et élastique. L’assouplissement linéaire n’a qu’une variante nommée linear.none. Cela a du sens car l’animation progressera à la même vitesse à différentes étapes. Toutes les autres fonctions d’assouplissement comportent trois variantes différentes. dans, en dehors et inout ajouté à la fin.
Il existe deux méthodes pour spécifier la fonction d'accélération d'une animation. Vous pouvez soit utiliser une chaîne comme élastique ou vous pouvez accéder aux fonctions d’assouplissement directement à l’aide des touches mojs.easing objet comme mojs.easing.elastic.inout. Dans la démo intégrée de CodePen, j'ai appliqué différentes fonctions d'accélération sur chaque barre afin que sa largeur change à un rythme différent. Cela vous donnera une idée de la différence de vitesse d’animation à chaque accélération..
var allBoxes = document.querySelectorAll (". box"); var animations = new Array (); var easings = ['easy.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in ',' retour.in ',' élastique.in ']; allBoxes.forEach (fonction (boîte, index) var animation = nouveaux mojs.Html (el: boîte, largeur: 0: 550, durée: 4000, répétition: 8, isYoyo: true, easing: easings [index] ); animations.push (animation);); document.querySelector (". play"). addEventListener ("cliquez", fonction () animations.forEach (fonction (anim) anim.play ();); Puisque nous voulons seulement changer la fonction d’accélération appliquée à chaque case, j’ai créé une boucle pour les parcourir, puis appliquer une fonction d’accélération extraite du assouplissements tableau. Cela évite les duplications de code inutiles. Vous pouvez utiliser la même technique pour animer plusieurs éléments dont les valeurs de propriété varient en fonction d'un modèle..
Mojs propose de nombreuses méthodes nous permettant de contrôler la lecture de l'animation pour différents éléments une fois qu'elle a déjà commencé. Vous pouvez suspendre l'animation à tout moment en appelant le pause() méthode. De même, vous pouvez reprendre une animation en pause en appelant le CV() méthode.
Animations mises en pause avec pause() reprendra toujours à partir du moment où vous avez appelé pause(). Si vous souhaitez que l’animation commence depuis le début après sa pause, vous devez utiliser le Arrêtez() méthode à la place.
Vous pouvez également jouer l'animation à l'envers en utilisant le bouton playBackward () méthode. Plus tôt, nous avons utilisé le la vitesse propriété pour contrôler la vitesse à laquelle mojs a joué une animation. Mojs a aussi un setSpeed () méthode qui permet de définir la vitesse d’animation en cours de réalisation. Dans l'exemple suivant, j'ai utilisé toutes ces méthodes pour contrôler la lecture de l'animation en fonction des clics de bouton..
vitesse var = 1; var htmlA = new mojs.Html (el: ".a", angleZ: 0: 720, borderRadius: 0: '50% ', borderWidth: 10: 100, durée: 2000, répétition: 9999 , isYoyo: vrai); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); document.querySelector (". pause"). addEventListener ("click", function () htmlA.pause ();); document.querySelector (". stop"). addEventListener ("click", function () htmlA.stop ();); document.querySelector (". Fast"). addEventListener ("click", function () vitesse = vitesse + 1; htmlA.setSpeed (vitesse); document.querySelector (".données"). innerHTML = "Vitesse:" + la vitesse; ); document.querySelector (". slower"). addEventListener ("clic", fonction () vitesse = vitesse / 2; htmlA.setSpeed (vitesse); document.querySelector (".données"). innerHTML = "Vitesse:" + la vitesse; ); Dans la démo suivante, la vitesse de lecture de l'animation actuelle est indiquée dans la zone noire dans le coin inférieur gauche. En cliquant sur plus rapide augmentera la vitesse actuelle de 1, et en cliquant sur Ralentissez va réduire de moitié la vitesse actuelle.
Dans ce tutoriel, nous avons appris à animer différents éléments du DOM sur une page Web à l'aide du module HTML de mojs. Nous pouvons spécifier l'élément que vous souhaitez animer à l'aide d'un sélecteur ou d'un nœud DOM. La bibliothèque vous permet d’animer différentes propriétés de transformation et l’opacité de tout élément à l’aide des propriétés intégrées des mojs. Html objet. Cependant, vous pouvez également animer d'autres propriétés CSS en spécifiant le nom à l'aide de affaire de chameau notation.
JavaScript ne manque pas de courbes d'apprentissage et il existe de nombreux frameworks et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Faites-moi savoir s'il y a quelque chose que vous voudriez que je clarifie dans ce tutoriel. Nous couvrirons le module Shape de la bibliothèque mojs dans le prochain tutoriel.
