Comment faire de belles animations Web codées avec Mo.JS

Si vous souhaitez créer votre propre site Web, de superbes animations peuvent le faire briller. Il existe de nombreuses façons d’y parvenir: créer un GIF animé à partir d’un film existant, apprendre à créer son propre film à partir de zéro avec un logiciel comme Blender ou Maya..

Il existe également des bibliothèques disponibles pour créer des animations par programme. Historiquement, les développeurs Web utilisaient jQuery pour créer des animations simples, mais à mesure que le Web se développait et que HTML5 devenait la nouvelle norme, de nouvelles options apparaissaient. Les bibliothèques CSS pour l'animation sont devenues incroyablement puissantes dans le nouveau cadre, avec les bibliothèques JavaScript spécialement conçues pour l'animation vectorielle dans le navigateur..

Aujourd'hui, nous allons nous intéresser à mo.js, l'un des plus récents enfants à avoir créé de belles images à partir de code. Nous allons couvrir quelques fonctions de base avant de créer une série d’animations réactives qui crée de beaux motifs..

Entrez Mo.js

Mo.js est une bibliothèque permettant de créer facilement des graphiques animés pour le Web. Il est conçu pour simplifier la création de belles choses pour les non-initiés au code, tout en permettant aux programmeurs expérimentés de découvrir un côté artistique qu’ils ne savaient pas. Comme son nom l'indique, il est basé sur le langage de programmation JavaScript très répandu, bien qu'il soit implémenté de manière à ce que tout le monde puisse accéder facilement aux bases..

Avant d'aller plus loin, regardons ce que nous allons créer aujourd'hui:

Nous utiliserons CodePen pour le projet d'aujourd'hui, car cela nous permet de tout travailler dans la même fenêtre de navigateur. Si vous préférez, vous pouvez également travailler dans l'éditeur de votre choix. Si vous voulez ignorer le didacticiel pas à pas, le code complet est disponible ici.

Configurez un nouveau stylo et cet écran vous accueillera:

Avant de commencer, vous devrez apporter quelques modifications. Clique sur le Réglages icône en haut à droite, et naviguez jusqu'à la JavaScript languette.

Nous allons utiliser Babel comme notre pré-processeur de code, sélectionnez-le dans le menu déroulant. Babel simplifie un peu la compréhension de JavaScript, en plus de fournir ECMAScript 6 Qu'est-ce que ES6 et ce dont les programmeurs JavaScript ont besoin pour savoir ce qu'est ES6 et ce que les programmeurs JavaScript doivent savoir? Voyons maintenant quelques modifications majeures apportées par ES6 à JavaScript. Lire plus de support pour les anciens navigateurs. Si vous ne savez pas ce que cela signifie, ne t'inquiète pas, ça va juste rendre nos vies un peu plus faciles ici.

Nous devons également importer la bibliothèque mo.js dans le projet. Pour ce faire, recherchez mo.js dans le Ajouter des scripts / stylos externes invite de texte, et en le sélectionnant.

Avec ces deux choses en place, cliquez sur Sauver et fermer. Nous sommes prêts à commencer!

Formes de base avec Mo.js

Avant de commencer avec les graphiques, faisons quelque chose à propos de cet arrière-plan blanc aveuglant dans le volet de visualisation. Changez la propriété de couleur d’arrière-plan en écrivant ce code dans le CSS vitre.

corps arrière-plan: rgba (11, 11, 11, 1); 

La création d'une forme est un processus simple et le concept qui la sous-tend commande l'ensemble de la bibliothèque. Définissons une forme de cercle par défaut. Entrez ce code dans le JS vitre:

const redCirc = new mojs.Shape (isShowStart: true);

Ici, nous avons créé un const valeur avec le nom redCirc et l'a attribué à un nouveaux mojs.Shape. Si vous êtes totalement novice en codage, faites attention à l'ordre des crochets et n'oubliez pas le point-virgule à la fin.!

Jusqu'à présent, nous n'avons passé aucun paramètre sauf isShowStart: true, ce qui signifie qu'il apparaîtra à l'écran avant même que nous l'ayons assigné. Vous verrez qu'il a placé un cercle rose au centre de l'écran:

Ce cercle est la valeur par défaut Forme pour mo.js. Nous pouvons changer cette forme facilement en ajoutant une ligne à notre code:

const redCirc = new mojs.Shape (isShowStart: true, shape: 'rect');

Pour ajouter plus de propriétés à un objet, nous utilisons une virgule pour le séparer. Ici, nous avons ajouté un forme propriété, et défini comme un 'rect'. Enregistrez votre stylo et vous verrez la forme par défaut se transformer en un carré.

Ce processus de transmission de valeurs à la Forme L'objet est comment nous les personnalisons. À l'heure actuelle, nous avons un carré qui ne fait pas beaucoup. Essayons d'animer quelque chose.

Notions de base du mouvement

Pour obtenir quelque chose qui semble un peu plus impressionnant, mettons en place un cercle, avec un trait rouge autour de lui et pas de remplissage à l'intérieur.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'rouge', strokeWidth: 5, remplissage: 'none', rayon: 15);

Comme vous pouvez le constater, nous avons également attribué un largeur valeur pour le trait, et un rayon pour le cercle. Les choses commencent déjà à être un peu différentes. Si votre forme ne se met pas à jour, assurez-vous de ne pas oublier de virgules ou de guillemets simples. 'rouge' ou 'aucun', et assurez-vous que vous avez cliqué enregistrer en haut de la page.

Ajoutons une animation à cela. Dans l'exemple ci-dessus, ce cercle rouge apparaît là où l'utilisateur clique avant de s'estomper. Nous pourrions y arriver en modifiant le rayon et l'opacité au fil du temps. Modifions le code:

 rayon: 15:30, opacité: 1: 0, durée: 1000

En changeant le rayon propriété, et en ajoutant opacité et durée propriétés, nous avons donné les instructions de forme à effectuer dans le temps. Ceux-ci sont Delta objets, contenant les informations de début et de fin pour ces propriétés.

Vous remarquerez que rien ne se passe encore. C'est parce que nous n'avons pas ajouté le .jouer() fonction pour lui dire de suivre nos instructions. Ajoutez-le entre les crochets et le point-virgule, et vous devriez voir votre cercle prendre vie..

Maintenant, nous allons quelque part, mais pour le rendre vraiment spécial, examinons quelques possibilités plus approfondies.

Commande et assouplissement avec Mo.js

En ce moment, dès que le cercle apparaît, il commence à s'estomper. Cela fonctionnera parfaitement, mais ce serait bien d'avoir un peu plus de contrôle.

Nous pouvons le faire avec le .puis() une fonction. Plutôt que de changer de rayon ou d'opacité, faisons en sorte que notre forme reste là où elle commence, avant de changer après un certain temps.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'rouge', strokeWidth: 5, remplissage: 'none', rayon: 15, durée: 1000). then (// faire plus de choses ici) .jouer();

Maintenant, notre forme apparaîtra avec les valeurs que nous lui avons assignées, attendez 1000 ms, avant de réaliser tout ce que nous mettons dans le .puis() une fonction. Ajoutons quelques instructions entre les crochets:

 // fait plus de choses ici strokeWidth: 0, scale: 1: 2, soulagement: 'sin.in', durée: 500

Ce code introduit une autre partie importante de l'animation. Où nous avons demandé au échelle pour passer de 1 à 2, nous avons également attribué un assouplissement basé sur l’onde sinusoïdale avec péché.in. Mo.js a une variété de courbes d’atténuation intégrées, avec la possibilité pour les utilisateurs avancés d’ajouter leurs propres courbes. Dans ce cas, l'échelle dans le temps se produit selon une onde sinusoïdale recourbée vers le haut.

Pour un aperçu visuel des différentes courbes, consultez easings.net. Combinez cela avec le largeur du trait changer à 0 sur notre durée définie, et vous avez un effet de disparition beaucoup plus dynamique.

Les formes sont la base de tout dans Mo.js, mais ce n’est que le début de l’histoire. Regardons Éclats.

Débordant de potentiel dans Mo.js

UNE Éclater in Mo.js est une collection de formes émanant d'un point central. Nous allons en faire la base de notre animation terminée. Vous pouvez appeler une rafale par défaut de la même manière que vous créez une forme. Faisons des étincelles:

const sparks = new mojs.Burst (). play ();

Vous pouvez voir, simplement en ajoutant un vide Éclater objet et en lui disant de jouer, nous obtenons l’effet rafale par défaut. Nous pouvons influer sur la taille et la rotation de la rafale en animant sa rayon et angle Propriétés:

const sparks = new mojs.Burst (rayon: 0:30, assouplissement: 'cubic.out', angle: 0: 90, assouplissement: 'quad.out',). play ();

Déjà, nous avons ajouté un rayon personnalisé et une rotation à notre éclatement:

Pour qu'ils ressemblent davantage à des étincelles, changeons les formes utilisées par la rafale et le nombre de formes générées par la rafale. Vous faites cela en abordant les propriétés des enfants de l'éclatement.

const sparks = new mojs.Burst (rayon: 0:30, assouplissement: 'cubic.out', angle: 0: 90, assouplissement: 'quad.out', nombre: 50, enfants: forme: 'croix', contour: 'blanc', points: 12, rayon: 10, remplissage: 'aucun', angle: 0: 360, durée: 300). play ();

Vous remarquerez que les propriétés enfants sont identiques aux propriétés de forme avec lesquelles nous avons déjà travaillé. Cette fois, nous avons choisi une croix comme forme. Toutes les 50 de ces formes ont maintenant les mêmes propriétés. Ça commence à bien paraître! C'est la première chose que verra l'utilisateur quand il cliquera avec la souris.

Déjà si nous pouvons voir que le coup rouge de notre première redCirc la forme reste trop longtemps. Essayez de changer sa durée pour que les deux animations s'emboîtent. Cela devrait ressembler à quelque chose comme ça:

Nous sommes loin d’en finir avec notre animation, mais prenons un moment pour la réactiver..

L'événement principal

Nous allons utiliser un gestionnaire d'événements pour déclencher nos animations à la position sur laquelle l'utilisateur clique. A la fin de votre bloc de code, ajoutez ceci:

document.addEventListener ('clic', fonction (e) );

Ce morceau de code écoute les clics de souris et exécute les instructions entre parenthèses. Nous pouvons ajouter notre redCirc et des étincelles objets à cet auditeur.

document.addEventListener ('click', fonction (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); étincelle .tune (x: e.pageX, y: e.pageY) .replay (););

Les deux fonctions que nous appelons ici sont .régler() et .rejouer(). La fonction de relecture est similaire à la fonction de lecture, bien qu'elle spécifie que l'animation doit recommencer depuis le début à chaque fois que l'utilisateur clique dessus..

le régler function transmet des valeurs à notre objet afin que vous puissiez changer les choses quand il est déclenché. Dans ce cas, nous passons dans les coordonnées de la page où la souris a été cliquée et attribuons les positions x et y de notre animation en conséquence. Enregistrez votre code et essayez de cliquer sur l'écran. Vous remarquerez quelques problèmes.

Premièrement, notre animation initiale apparaît toujours au milieu de l'écran, même si l'utilisateur ne clique pas. Deuxièmement, l'animation n'est pas déclenchée au point de la souris, mais décalée vers le bas et vers la droite. Nous pouvons réparer ces deux choses facilement.

Notre forme et éclaté ont la .jouer() à la fin de leurs blocs de code respectifs. On n'en a plus besoin .rejouer() est appelé dans le gestionnaire d'événements. Vous pouvez supprimer .play () des deux blocs de code. Pour la même raison, vous pouvez supprimer isShowStart: true aussi, comme on n'en a plus besoin au début.

Pour résoudre le problème de positionnement, nous devrons définir des valeurs de position pour nos objets. Comme vous vous en souviendrez dès le début, mo.js les place au centre de la page par défaut. Lorsque ces valeurs sont combinées avec la position de la souris, le décalage est créé. Pour vous débarrasser de ce décalage, ajoutez simplement ces lignes à la fois redCirc et des étincelles objets:

à gauche: 0, en haut: 0,

Désormais, les seules valeurs de position prises par nos objets sont les valeurs de position de la souris transmises par l'écouteur d'événements. Maintenant, les choses devraient fonctionner beaucoup mieux.

Ce processus d’ajout d’objets dans le gestionnaire d’événements explique comment nous allons déclencher toutes nos animations. souvenez-vous d'ajouter chaque nouvel objet à partir de maintenant! Maintenant que les bases fonctionnent comme nous le voulons, ajoutons des rafales plus grandes et plus lumineuses.

Devenir psychédélique

Commençons par quelques triangles tournants. L'idée ici était de créer un effet hypnotique stroboscopique, et son installation est en fait assez facile. Ajoutez une autre rafale avec ces paramètres:

const triangles = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', angle: 1080: 0, easing: 'quad.out', à gauche: 0, en haut: 0, compter : 20, enfants: forme: 'polygone', points: 3, rayon: 10: 100, remplissage: ['rouge', 'jaune', 'bleu', 'vert'], durée: 3000) ;

Tout ici devrait être assez familier maintenant, bien qu'il y ait quelques nouveaux points. Vous remarquerez que plutôt que de définir la forme comme un triangle, nous l’appelons un polygone avant d'attribuer le nombre de points il a comme 3.

Nous avons également donné remplir Pour fonctionner avec une gamme de couleurs, chaque cinquième triangle redevient rouge et le motif continue. La grande valeur du angle le réglage fait que la rafale tourne assez vite pour produire son effet stroboscopique.

Si le code ne fonctionne pas pour vous, assurez-vous d'avoir ajouté l'objet triangles à la classe d'écoute d'événements, comme nous l'avons fait avec les objets précédents..

Assez psychédélique! Ajoutons une autre rafale pour la suivre.

Pentagones dansants

Nous pouvons utiliser quelque chose presque identique à notre Triangles objet pour faire la rafale qui la suit. Ce code légèrement modifié produit des hexagones en rotation très colorés se chevauchant:

Const pentagones = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', angle: 0: 720, easing: 'quad.out', à gauche: 0, en haut: 0, compter : 20, enfants: forme: 'polygone', rayon: 1: 300, points: 5, remplissage: ['violet', 'rose', 'jaune', 'vert'], retard: 500, durée: 3000);

Le principal changement ici est que nous avons ajouté un retard de 500 ms, de sorte que la rafale ne commence qu'après les triangles. En modifiant quelques valeurs, l’idée ici était de faire tourner la rafale dans la direction opposée aux triangles. Heureusement qu’au moment où les pentagones apparaissent, l’effet stroboscopique des triangles donne l’impression qu’ils tournent ensemble..

Un peu de hasard

Ajoutons un effet qui utilise des valeurs aléatoires. Créez une rafale avec ces propriétés:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, rayon: 150: 350, angle: 0:90, assouplissement: 'cubic.out', enfants: forme: 'line', stroke: 'red': 'transparent', strokeWidth: 5, scaleX: 0.5: 0, degreeShift: 'rand (-90, 90)', rayon: 'rand (20, 300)' , durée: 500, retard: 'rand (0, 150)',);

Cette rafale créera des lignes qui commencent en rouge et se fondent dans la transparence, se rétrécissant avec le temps. Ce qui rend ce composant intéressant, c’est que des valeurs aléatoires sont utilisées pour déterminer certaines de ses propriétés..

le degréShift donne à l'objet enfant un angle de départ. En randomisant cela, cela donne une rafale totalement différente à chaque clic. Des valeurs aléatoires sont également utilisées pour la rayon et retard fonctions à ajouter à l'effet chaotique.

Voici l'effet par lui-même:

Puisque nous utilisons des valeurs aléatoires ici, nous devons ajouter une méthode supplémentaire à notre gestionnaire d'événements pour l'objet:

redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generate ();

le produire() La fonction calcule de nouvelles valeurs aléatoires chaque fois que l'événement est appelé. Sans cela, la forme choisirait des valeurs aléatoires lors de son premier appel et continuerait à utiliser ces valeurs pour chaque appel suivant. Cela ruinerait totalement l'effet, alors assurez-vous d'ajouter ceci!

Vous pouvez utiliser des valeurs aléatoires pour presque tous les éléments des objets mo.js. Elles constituent un moyen simple de créer des animations uniques..

Le hasard n'est pas le seul moyen d'ajouter des mouvements dynamiques aux animations. Regardons le échelonner une fonction.

Des lignes stupéfiantes

Montrer comment le échelonner la fonction fonctionne, nous allons faire quelque chose un peu comme une Catherine Wheel. Créez une nouvelle rafale avec ces paramètres:

lignes const = new mojs.Burst (rayon: 0: 1000, easing: 'cubic.out', angle: 0: 1440, easing: 'cubic.out', à gauche: 0, en haut: 0, compter : 50, enfants: forme: 'ligne', rayon: 1: 100, atténuation: 'élastique.out', remplissage: 'aucun', contour: ['rouge', 'orange'], retardé: 'décalé (10) ', durée: 1000);

Tout est maintenant familier ici, un éclat crée 50 enfants qui sont des lignes rouges ou oranges. La différence ici est que nous passons le retard propriété a décaler (10) une fonction. Cela ajoute un délai de 10 ms entre l’émission de chaque enfant, ce qui lui donne l’effet de rotation que nous recherchons..

La fonction de décalage n’utilise aucune valeur aléatoire, vous n’avez donc pas besoin de produire fonction dans le gestionnaire d'événements cette fois. Voyons tout ce que nous avons jusqu'à présent en action:

Nous pourrions facilement nous arrêter ici, mais ajoutons simplement une dernière rafale pour compléter ce projet..

Carrés intelligents

Pour cette dernière rafale, réalisons quelque chose en utilisant des rectangles. Ajoutez cet objet à votre écouteur de code et d'événement:

const redSquares = new mojs.Burst (rayon: 0: 1000, assouplissement: 'cubic.out', angle: 360: 0, assouplissement: 'quad.out', gauche: 0, haut: 0, nombre : 20, enfants: forme: 'rect', rayon X: 1: 1000, rayon Y: 50, points: 5, remplissage: 'aucun', trait: 'rouge': 'orange', trait large - 5 : 15, retard: 1000, durée: 3000);

Cet objet n'ajoute rien de nouveau à ce sur quoi nous avons déjà travaillé aujourd'hui, il est simplement inclus pour montrer comment des motifs géométriques complexes peuvent être facilement créés à l'aide de code..

Ce n'était pas le résultat attendu de cet objet lorsqu'il a été créé au cours des étapes de test de l'écriture de ce tutoriel. Une fois que le code a été publié, il est devenu évident que je suis tombé sur quelque chose de bien plus beau que je n'aurais pu le faire exprès!

Avec cet objet final ajouté, nous avons terminé. Voyons le tout en action.

Mo.js: un outil puissant pour les animations Web

Cette introduction simple à mo.js couvre les outils de base nécessaires à la création de superbes animations. La manière dont ces outils sont utilisés peut créer presque tout, et pour de nombreuses tâches, les bibliothèques Web constituent une alternative simple à Photoshop, After Effects ou un autre logiciel coûteux..

Cette bibliothèque est utile pour ceux qui travaillent à la fois en programmation et en développement Web. Programmation et développement Web: quelle est la différence? Programmation vs développement Web: quelle est la différence? Vous pensez peut-être que les programmeurs d'applications et les développeurs Web font le même travail, mais c'est loin de la vérité. Voici les principales différences entre les programmeurs et les développeurs Web. En savoir plus, la gestion des événements utilisée dans le projet pourrait facilement être utilisée pour créer des boutons et du texte réactifs sur des sites Web ou dans des applications. Amusez-vous avec: il n'y a pas d'erreurs, seulement des accidents heureux!

En savoir plus sur: JavaScript.