Si vous cherchez à créer votre propre site Web, de belles animations peuvent le faire briller. Il existe plusieurs façons d'y parvenir, de la simple création d'un GIF animé à partir d'un morceau de film existant à l'apprentissage de la création du vôtre à partir de zéro avec un logiciel comme Blender ou Maya.
Il existe également des bibliothèques disponibles pour créer des animations par programmation. Historiquement, les codeurs 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 sont apparues. Les bibliothèques CSS pour l'animation sont devenues incroyablement puissantes dans le nouveau cadre, ainsi que les bibliothèques JavaScript conçues spécifiquement pour l'animation vectorielle dans le navigateur.
Aujourd'hui, nous allons nous intéresser à mo.js, l'un des plus récents pour créer de belles images à partir de code. Nous couvrirons quelques fonctions de base, avant de créer une série d'animations réactives pour l'utilisateur qui crée de beaux motifs.
Mo.js est une bibliothèque permettant de créer facilement des animations graphiques pour le Web. Il est conçu pour simplifier la création de belles choses pour ceux qui ne sont pas trop avertis en matière de code, tout en permettant aux programmeurs chevronnés de découvrir un côté artistique qu'ils ignoraient avoir. Comme son nom l'indique, il est basé sur le célèbre langage de programmation JavaScript, bien qu'il soit implémenté de manière à ce que n'importe qui puisse facilement comprendre les 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 il nous permet de travailler sur tout dans la même fenêtre de navigateur. Si vous préférez, vous pouvez travailler dans un éditeur de votre choix à la place. Si vous souhaitez ignorer le didacticiel étape par étape, le code complet est disponible ici.
Configurez un nouveau stylo et vous serez accueilli par cet écran :
Avant de commencer, vous devrez apporter quelques modifications. Cliquez sur Paramètres en haut à droite et accédez à l'icône JavaScript onglet.
Nous allons utiliser Babel comme notre pré-processeur de code, alors sélectionnez-le dans le menu déroulant. Babel rend JavaScript un peu plus facile à comprendre, tout en fournissant la prise en charge d'ECMAScript 6 pour les navigateurs plus anciens. Si vous ne savez pas ce que cela signifie, ne vous inquiétez pas , ça va juste nous faciliter un peu la vie ici.
Nous devons également importer la bibliothèque mo.js dans le projet. Pour ce faire, recherchez mo.js dans Ajouter des scripts/stylets externes invite de texte et en la sélectionnant.
Une fois ces deux éléments en place, cliquez sur Enregistrer et fermer . Nous sommes prêts à commencer !
Avant de commencer avec les graphiques, faisons quelque chose à propos de ce fond blanc aveuglant dans le volet d'affichage. Modifiez la propriété de couleur d'arrière-plan en écrivant ce code dans le CSS volet.
corps{
arrière-plan :rgba(11,11,11,1) ;
} La création d'une forme est un processus simple, et le concept sous-jacent pilote toute la bibliothèque. Configurons une forme de cercle par défaut. Entrez ce code dans le JS volet :
const redCirc =new mojs.Shape({
isShowStart :vrai
}); Ici, nous avons créé un const valeur avec le nom redCirc et l'a assigné à un nouveau mojs.Shape . Si vous êtes totalement nouveau dans le codage, faites attention à l'ordre des parenthèses ici, et n'oubliez pas le point-virgule à la fin !
Jusqu'à présent, nous n'avons transmis aucun paramètre à l'exception de isShowStart:true , ce qui signifie qu'il apparaîtra à l'écran avant même que nous lui ayons assigné un mouvement. Vous verrez qu'il a placé un cercle rose au centre de l'écran :
Ce cercle est la forme par défaut pour mo.js. Nous pouvons changer cette forme facilement en ajoutant une ligne à notre code :
const redCirc =new mojs.Shape({
isShowStart :vrai,
forme:'rect'
}); Pour ajouter plus de propriétés à un objet, nous utilisons une virgule pour le séparer. Ici, nous avons ajouté une forme propriété, et l'a défini comme un 'rect' . Enregistrez votre stylet et vous verrez la forme par défaut se transformer en carré à la place.
Ce processus de transmission des valeurs à la Shape objet est la façon dont nous les personnalisons. En ce moment, nous avons un carré qui ne fait pas grand-chose. Essayons d'animer quelque chose.
Pour obtenir quelque chose d'un peu plus impressionnant, configurons un cercle, avec un trait rouge autour et sans remplissage à l'intérieur.
const redCirc =new mojs.Shape({
isShowStart :vrai,
trait:'rouge',
largeur de trait :5,
fill:'aucun',
rayon :15
}); Comme vous pouvez le voir, nous avons également attribué une largeur valeur au 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 que vous n'avez pas oublié de virgules ou de guillemets simples autour de 'rouge' ou 'aucun' , et assurez-vous d'avoir cliqué sur 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 disparaître vers l'extérieur. Une façon d'y parvenir est de modifier le rayon et l'opacité au fil du temps. Modifions le code :
rayon :{15:30},
opacité :{1:0},
durée:1000 En modifiant le rayon propriété et en ajoutant l'opacité et durée propriétés, nous avons donné des consignes de forme à réaliser dans le temps. Ce 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 .play() fonction pour lui dire d'exécuter nos instructions. Ajoutez-le entre les crochets de fin et le point-virgule, et vous devriez voir votre cercle prendre vie.
Nous arrivons maintenant à quelque chose, mais pour le rendre vraiment spécial, examinons quelques possibilités plus approfondies.
En ce moment, dès que le cercle apparaît, il commence à s'estomper. Cela fonctionnera parfaitement bien, mais ce serait bien d'avoir un peu plus de contrôle.
Nous pouvons le faire avec le .then() une fonction. Plutôt que de changer notre rayon ou notre 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 :vrai,
trait:'rouge',
largeur de trait :5,
fill:'aucun',
rayon :15,
durée:1000
}).ensuite({
//faire plus de choses ici
}).play(); Maintenant, notre forme apparaîtra avec les valeurs que nous lui avons attribuées, attendez 1000 ms, avant d'effectuer tout ce que nous mettons dans le .then() une fonction. Ajoutons quelques instructions entre parenthèses :
//faire plus de choses ici
largeur de trait :0,
échelle :{ 1 :2, accélération :'sin.in' },
durée :500 Ce code introduit une autre partie importante de l'animation. Où nous avons indiqué l'échelle pour passer de 1 à 2, nous avons également attribué un assouplissement basé sur une onde sinusoïdale avec sin.in . Mo.js a une variété de courbes d'accélération intégrées, avec la possibilité pour les utilisateurs avancés d'ajouter les leurs. Dans ce cas, l'échelle dans le temps se produit selon une onde sinusoïdale courbée vers le haut.
Pour un aperçu visuel des différentes courbes, consultez easings.net. Combinez cela avec le strokeWidth passant à 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 elles ne sont que le début de l'histoire. Regardons les rafales .
Une rafale dans Mo.js est une collection de formes émanant d'un point central. Nous allons en faire la base de notre animation finale. 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 Burst vide objet et en lui disant de jouer, nous obtenons l'effet de rafale par défaut. Nous pouvons affecter la taille et la rotation de la rafale en animant son rayon et angle propriétés :
const sparks =new mojs.Burst({
rayon :{0:30, accélération : 'cubic.out'},
angle :{0 : 90, accélération : 'quad.out'},
}).play(); Déjà, nous avons ajouté un rayon et une rotation personnalisés à notre rafale :
Pour les faire ressembler davantage à des étincelles, modifions les formes utilisées par la rafale et le nombre de formes générées par la rafale. Pour ce faire, adressez-vous aux propriétés des enfants de la rafale.
const sparks =new mojs.Burst({
rayon :{0:30, accélération : 'cubic.out'},
angle :{0 : 90, accélération : 'quad.out'},
compter:50,
enfants:{
forme :'croix',
trait :'blanc',
points :12,
rayon :10,
fill:'aucun',
angle :{0:360},
durée :300
}
}).play(); Vous remarquerez que les propriétés enfant sont les mêmes que les propriétés de forme avec lesquelles nous avons déjà travaillé. Cette fois, nous avons choisi une croix comme forme. Toutes ces 50 formes possèdent désormais les mêmes propriétés. ça commence à être plutôt pas mal ! C'est la première chose que l'utilisateur verra lorsqu'il cliquera sur la souris.
Déjà bien que nous puissions voir que le trait rouge de notre redCirc initial la forme reste trop longtemps. Essayez de modifier sa durée afin que les deux animations s'emboîtent. Cela devrait ressembler à ceci :
Nous sommes loin d'avoir terminé notre animation, mais prenons un moment pour la rendre réactive pour l'utilisateur.
Nous utiliserons un gestionnaire d'événements pour déclencher nos animations à la position sur laquelle l'utilisateur clique. À la fin de votre bloc de code, ajoutez ceci :
document.addEventListener( 'click', function(e) {
}); Ce morceau de code écoute les clics de souris et exécute pour nous toutes les instructions entre parenthèses. Nous pouvons ajouter notre redCirc et des étincelles objets à cet auditeur.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x :e.pageX, y :e.pageY, })
.rejouer();
des étincelles
.tune({ x :e.pageX, y :e.pageY })
.rejouer();
}); Les deux fonctions que nous appelons ici sont .tune() et .replay() . La fonction de relecture est similaire à la fonction de lecture, mais elle spécifie que l'animation doit recommencer depuis le début à chaque fois qu'on clique dessus.
Le air La fonction transmet des valeurs à notre objet afin que vous puissiez changer les choses lorsqu'il est déclenché. Dans ce cas, nous transmettons les coordonnées de la page où la souris a été cliquée et attribuons la position 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 s'affiche toujours au milieu de l'écran, même si l'utilisateur ne clique sur rien. 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ésoudre ces deux problèmes facilement.
Notre forme et notre éclat ont le .play() à la fin de leurs blocs de code respectifs. Nous n'en avons plus besoin en tant que .replay() 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, car nous n'avons plus besoin qu'il s'affiche 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 notre toute première forme, mo.js les place par défaut au centre de la page. Lorsque ces valeurs sont combinées avec la position de la souris, cela crée le décalage. Pour se débarrasser de ce décalage, ajoutez simplement ces lignes à la fois au redCirc et des étincelles objets :
gauche :0,
haut :0, Désormais, les seules valeurs de position que nos objets prennent sont les valeurs de position de la souris transmises par l'écouteur d'événement. Maintenant, les choses devraient beaucoup mieux fonctionner.
Ce processus d'ajout d'objets dans le gestionnaire d'événements est la façon dont nous déclencherons toutes nos animations, alors n'oubliez pas d'y ajouter chaque nouvel objet à partir de maintenant ! Maintenant que nous avons les bases qui fonctionnent comme nous le voulons, ajoutons quelques rafales plus grandes et plus lumineuses.
Commençons par quelques triangles en rotation. L'idée ici était de créer un effet stroboscopique hypnotique, et sa mise en place est en fait assez facile. Ajoutez une autre rafale avec ces paramètres :
triangles const =new mojs.Burst({
rayon :{ 0 :1000, accélération :'cubic.out'},
angle :{1080 :0, accélération :'quad.out'},
gauche :0, haut :0,
compter :20,
enfants :{
forme :'polygone',
point :3,
rayon :{ 10 :100 },
remplir :['rouge','jaune','bleu','vert'],
durée :3000
}
}); Tout ici devrait être assez familier maintenant, bien qu'il y ait quelques nouveaux points. Vous remarquerez qu'au lieu de définir la forme comme un triangle, nous l'avons appelée un polygone avant d'attribuer le nombre de points il en a pour 3.
Nous avons également donné remplir fonction un tableau de couleurs avec lesquelles travailler, chaque cinquième triangle redeviendra rouge et le motif continuera. La valeur élevée de l'angle fait tourner la rafale assez rapidement pour produire son effet stroboscopique.
Si le code ne fonctionne pas pour vous, assurez-vous d'avoir ajouté l'objet triangles à la classe d'écouteur d'événement comme nous l'avons fait avec les objets précédents.
Plutôt psychédélique ! Ajoutons une autre rafale pour la suivre.
Nous pouvons utiliser quelque chose de presque identique à nos triangles objet de faire le sursaut qui le suit. Ce code légèrement modifié produit des hexagones tournants superposés aux couleurs vives :
const pentagones =new mojs.Burst({
rayon :{ 0 :1000, accélération :'cubic.out'},
angle :{0 :720, accélération :'quad.out'},
gauche :0, haut :0,
compter :20,
enfants :{
forme :'polygone',
rayon :{ 1 :300 },
point :5,
fill :['violet','rose','jaune','vert'],
retard :500,
durée :3000
}
}); Le principal changement ici est que nous avons ajouté un délai de 500 ms, de sorte que la rafale ne commencera qu'après les triangles. En changeant quelques valeurs, l'idée ici était de faire tourner la rafale dans le sens opposé aux triangles. Par un heureux hasard, au moment où les pentagones apparaissent, l'effet stroboscopique des triangles donne l'impression qu'ils tournent ensemble.
Ajoutons un effet qui utilise des valeurs aléatoires. Créez une rafale avec ces propriétés :
const redSparks =new mojs.Burst({
gauche :0, haut :0,
compter:8,
rayon :{ 150 :350 },
angle :{0:90, accélération : 'cubic.out'},
enfants:{
forme :'ligne',
trait :{'rouge':'transparent'},
largeur de trait :5,
échelleX : {0.5:0},
degreeShift :'rand(-90, 90)',
rayon :'rand(20, 300)',
durée :500,
délai :'rand(0, 150)',
}
}); Cette rafale créera des lignes qui commencent en rouge et s'estompent en transparence, 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 degreeShift 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 le rayon et retard fonctions à ajouter à l'effet chaotique.
Voici l'effet en lui-même :
Puisque nous utilisons ici des valeurs aléatoires, nous devons ajouter une méthode supplémentaire à notre gestionnaire d'événements pour l'objet :
redSparks
.tune({ x :e.pageX, y :e.pageY })
.rejouer()
.generate(); Le générer() 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 la première fois qu'elle est appelée 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, et c'est un moyen simple de créer des animations uniques.
Le caractère aléatoire n'est cependant pas le seul moyen d'ajouter des mouvements dynamiques aux animations. Regardons le décalage fonction.
Pour montrer comment le décalage fonction fonctionne, nous allons faire quelque chose qui ressemble un peu à une roue de Catherine. Créez une nouvelle rafale avec ces paramètres :
const lines =new mojs.Burst({
rayon :{ 0 :1000, accélération :'cubic.out'},
angle :{0 :1440, accélération :'cubic.out'},
gauche :0, haut :0,
compter :50,
enfants :{
forme :'ligne',
rayon :{ 1 :100, accélération :'elastic.out' },
fill:'aucun',
trait :['rouge','orange'],
retard:'échelonner(10)',
durée :1000
}
}); Tout ici est maintenant familier, une rafale crée 50 enfants qui sont des lignes rouges ou oranges. La différence ici est que nous passons le délai propriété un échelonnement (10) une fonction. Cela ajoute 10 ms de retard entre l'émission de chaque enfant, lui donnant l'effet de rotation que nous recherchons.
La fonction d'échelonnement n'utilise aucune valeur aléatoire, vous n'aurez donc pas besoin d'un générer 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 autre rafale pour terminer ce projet.
Pour cette dernière rafale, faisons quelque chose en utilisant des rectangles. Ajoutez cet objet à votre code et à votre écouteur d'événement :
const redSquares =new mojs.Burst({
rayon :{ 0 :1000, accélération :'cubic.out'},
angle :{360 : 0, accélération :'quad.out'},
gauche :0, haut :0,
compter :20,
enfants :{
forme :'rectiligne',
rayonX :{ 1 :1000 },
rayon Y :50,
point :5,
fill:'aucun',
trait :{'rouge':'orange'},
largeur de trait :{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 inclus simplement pour montrer comment des motifs géométriques complexes peuvent être facilement créés grâce au code.
Ce n'était pas le résultat prévu de cet objet lorsqu'il a été créé lors des étapes de test de l'écriture de ce didacticiel. Une fois le code exécuté, il est devenu clair que j'étais tombé sur quelque chose de bien plus beau que ce que j'aurais pu faire exprès !
Avec cet objet final ajouté, nous avons terminé. Voyons tout cela en action.
Cette introduction simple à mo.js couvre les outils de base nécessaires pour créer de belles animations. La façon dont ces outils sont utilisés peut créer presque n'importe quoi, et pour de nombreuses tâches, les bibliothèques Web sont une alternative simple à l'utilisation de Photoshop, After Effects ou d'autres logiciels coûteux.
Cette bibliothèque est utile pour ceux qui travaillent à la fois dans la programmation et le développement Web, la gestion des événements utilisée dans le projet pourrait facilement être utilisée pour créer des boutons réactifs et du texte sur des sites Web ou dans des applications. Amusez-vous bien :il n'y a pas d'erreurs, que des accidents heureux !