Home-theater-designers
Si vous cherchez à démarrer votre propre site web , de belles animations peuvent le faire briller. Il existe plusieurs façons d'y parvenir, de la simple faire un GIF animé d'un morceau de film existant à l'apprentissage de la création du vôtre à partir de zéro avec des logiciels tels que Mixeur 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 HTML5 est devenu la nouvelle norme, de nouvelles options sont apparues. Les bibliothèques CSS pour l'animation sont devenues incroyablement puissantes sous le nouveau framework, 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 sur le marché 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.
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 ceux qui ne sont pas trop calés en code, tout en permettant aux programmeurs chevronnés de découvrir un côté artistique qu'ils n'avaient jamais pensé avoir. Comme son nom l'indique, il est basé sur le langage de programmation JavaScript populaire, bien qu'il soit implémenté de manière à ce que tout le monde puisse facilement assimiler les bases.
Avant d'aller plus loin, regardons ce que nous allons créer aujourd'hui :
nous utiliserons Stylo de code 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 au lieu. Si vous souhaitez ignorer le didacticiel étape par étape, le code complet est disponible ici .
Configurez un nouveau stylet et vous serez accueilli avec cet écran :
Avant de commencer, vous devrez apporter quelques modifications. Clique sur le Paramètres en haut à droite et accédez à l'icône JavaScript languette.
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 ECMAScript 6 prise en charge des anciens navigateurs. Si vous ne savez pas ce que cela signifie, ne t'inquiète pas , ça va juste nous faciliter la vie 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 la sélectionnant.
Une fois ces deux éléments 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 d'affichage. Modifiez la propriété de couleur d'arrière-plan en écrivant ce code dans le CSS pain.
body{
background: rgba(11,11,11,1);
}La création d'une forme est un processus simple, et le concept sous-jacent dirige toute la bibliothèque. Configurons une forme de cercle par défaut. Entrez ce code dans le JS pain:
const redCirc = new mojs.Shape({
isShowStart:true
});Ici, nous avons créé un const valeur avec le nom redCirc et l'a attribué à un nouveau mojs.Shape . Si vous êtes totalement nouveau dans le codage, faites attention à l'ordre des crochets ici, et n'oubliez pas le point-virgule à la fin !
Jusqu'à présent, nous n'avons transmis aucun paramètre à l'exception isShowStart:true , ce qui signifie qu'il apparaîtra à l'écran avant même que nous lui ayons attribué un mouvement. 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 l'a défini comme un 'droit' . Enregistrez votre stylo et vous verrez la forme par défaut se transformer en carré à la place.
Ce processus de transmission des valeurs aux Forme l'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.
Les bases du mouvement
Pour obtenir quelque chose qui semble un peu plus impressionnant, mettons en place un cercle, avec un trait rouge autour et sans remplissage à l'intérieur.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Comme vous pouvez le voir, nous avons également attribué un largeur valeur à la course, 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 manqué de virgules ou de guillemets simples autour 'rapporter' ou 'rien' , et assurez-vous d'avoir 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 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 :
radius: {15:30},
opacity: {1:0},
duration:1000En changeant le rayon propriété, et en ajoutant opacité et durée propriétés, nous avons donné les instructions de forme à réaliser au fil du 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 d'exécuter nos instructions. Ajoutez-le entre les crochets de fin et le point-virgule, et vous devriez voir votre cercle prendre vie.
Maintenant, nous arrivons quelque part, mais pour le rendre vraiment spécial, examinons quelques possibilités plus approfondies.
Commande et facilité avec Mo.js
En ce moment, dès que le cercle apparaît, il commence à disparaître. Cela fonctionnera parfaitement bien, mais ce serait bien d'avoir un peu plus de contrôle.
Nous pouvons le faire avec le .alors() fonction. Plutôt que de faire changer notre rayon ou notre opacité, faisons en sorte que notre forme reste là où elle commence, avant de changer après un laps de temps défini.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Maintenant, notre forme apparaîtra avec les valeurs que nous lui avons attribuées, attendez 1000 ms, avant d'effectuer quoi que ce soit que nous avons mis dans le .alors() fonction. Ajoutons quelques instructions entre parenthèses :
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Ce code introduit une autre partie importante de l'animation. Où nous avons chargé le escalader pour passer de 1 à 2, nous avons également attribué un assouplissement basé sur l'onde sinusoïdale avec péché.dans . Mo.js a une variété de courbes d'assouplissement intégrées, avec la possibilité pour les utilisateurs avancés d'ajouter les leurs. Dans ce cas, l'échelle dans le temps se fait selon une onde sinusoïdale courbée vers le haut.
Pour un aperçu visuel des différentes courbes, consultez assouplissements.net . Combinez cela avec le largeur du trait passer à 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 rafales .
Débordant de potentiel dans Mo.js
À Éclater in Mo.js est une collection de formes émanant d'un point central. Nous allons en faire la base de notre animation finie. Vous pouvez appeler une rafale par défaut de la même manière que vous faites une forme. Faisons quelques étincelles :
const sparks = new mojs.Burst({
}).play();Vous pouvez voir, juste en ajoutant un vide Éclater objet et lui dire 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({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Déjà, nous avons ajouté un rayon et une rotation personnalisés à notre rafale :
Pour qu'elles ressemblent 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, vous devez aborder les propriétés des enfants du burst.
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();Vous remarquerez que les propriétés enfants 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. Les 50 de ces formes possèdent désormais les mêmes propriétés. ça commence à avoir l'air pas mal ! C'est la première chose que l'utilisateur verra lorsqu'il cliquera sur la souris.
Déjà si nous pouvons voir que le trait rouge de notre initiale redCirc la forme reste trop longtemps. Essayez de modifier sa durée pour que les deux animations s'emboîtent. Cela devrait ressembler à quelque chose comme ceci:
Nous sommes loin d'avoir terminé notre animation, mais prenons un moment pour la rendre réactive à l'utilisateur.
L'événement principal
Nous utiliserons 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( 'click', function(e) {
});Ce morceau de code écoute les clics de souris et exécute pour nous les instructions entre parenthèses. Nous pouvons ajouter notre redCirc et des étincelles des objets à cet auditeur.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.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 qu'on clique dessus.
Les régler La fonction transmet des valeurs à notre objet afin que vous puissiez changer les choses lorsqu'il est déclenché. Dans ce cas, nous passons 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 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 éclat ont le .jouer() à la fin de leurs blocs de code respectifs. Nous n'avons plus besoin de cela car .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 : vrai aussi, car nous n'avons plus besoin de le montrer 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 redCirc et des étincelles objets:
left: 0,
top: 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 fonctionner beaucoup mieux.
Ce processus d'ajout d'objets dans le gestionnaire d'événements est la façon dont nous allons déclencher toutes nos animations, donc 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 des rafales plus grosses et plus lumineuses.
Devenir psychédélique
Commençons par quelques triangles en rotation. L'idée ici était de créer un effet stroboscopique hypnotique, et la mise en place 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'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 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 a pour 3.
Nous avons également donné remplir fonction un tableau de couleurs pour travailler avec, chaque cinquième triangle redeviendra rouge et le motif continuera. La valeur élevée de la angle Le réglage 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 un autre burst pour le suivre.
Pentagones dansants
Nous pouvons utiliser quelque chose de presque identique à notre Triangles objet pour faire le sursaut qui le suit. Ce code légèrement modifié produit des hexagones en rotation qui se chevauchent de couleurs vives :
const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});Le principal changement ici est que nous avons ajouté un retard de 500ms, 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 heureux accident, au moment où les pentagones apparaissent, l'effet stroboscopique des triangles donne l'impression qu'ils tournent ensemble.
Un peu d'aléatoire
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,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});Cette rafale créera des lignes qui commencent au rouge et s'estompent en 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.
Les 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 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 })
.replay()
.generate();Les 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 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.
films gratuits sans inscription ni téléchargement
Cependant, le caractère aléatoire n'est pas le seul moyen d'ajouter des mouvements dynamiques aux animations. Regardons le échelonner fonction.
Des lignes époustouflantes
Pour montrer comment le échelonner fonctionne, nous allons faire quelque chose d'un peu comme une Catherine Wheel. Créez un nouveau burst avec ces paramètres :
const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});Tout ici est familier maintenant, une rafale crée 50 enfants qui sont des lignes rouges ou oranges. La différence ici est que nous passons le retard propriété un chanceler(10) fonction. Cela ajoute 10ms de délai entre l'émission de chaque enfant, lui donnant l'effet de rotation que nous recherchons.
La fonction de décalage n'utilise aucune valeur aléatoire, vous n'aurez donc pas besoin d'un 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 juste une rafale de plus pour compléter ce projet.
Carrés intelligents
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({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 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 escompté de cet objet lorsqu'il a été créé lors des étapes de test de la rédaction 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 ce dernier objet 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 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 Photoshop , After Effects ou tout autre logiciel 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 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 !
Partager Partager Tweeter E-mail Cela vaut-il la peine de passer à Windows 11 ?Windows a été repensé. Mais est-ce suffisant pour vous convaincre de passer de Windows 10 à Windows 11 ?
Lire la suite Rubriques connexes- La programmation
- JavaScript
Ian Buckley est un journaliste indépendant, musicien, interprète et producteur vidéo vivant à Berlin, en Allemagne. Quand il n'écrit pas ou ne monte pas sur scène, il bricole de l'électronique ou du code DIY dans l'espoir de devenir un savant fou.
Plus de Ian BuckleyAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner