Tutoriel : Créez des animations Web époustouflantes avec Mo.js

Pour sublimer votre site web, rien de tel que des animations fluides et attractives. Des GIF simples aux créations complexes via Blender ou Maya, les options abondent. Mais pour des animations programmées, découvrez Mo.js, une bibliothèque JavaScript puissante et accessible.

Historiquement, jQuery gérait les animations basiques, mais avec HTML5 et CSS3, de nouvelles bibliothèques comme Mo.js excellent en animations vectorielles interactives. Ce tutoriel, basé sur mon expertise en développement web, vous guide pas à pas pour créer des effets réactifs époustouflants.

Nous explorerons les bases avant de bâtir une animation interactive générant de beaux motifs au clic. Voici un aperçu du résultat final :

Utilisez CodePen pour ce projet (code complet disponible ici). Créez un nouveau Pen. Dans Paramètres > JS, activez Babel (pour ES6) et ajoutez Mo.js via "Ajouter des ressources externes".

Enregistrez. Prêts ? Commençons !

Découvrez Mo.js

Mo.js simplifie les animations graphiques web pour débutants comme experts. Basée sur JavaScript, elle révèle votre créativité artistique.

Formes de base avec Mo.js

Changez le fond en CSS :

body {
  background: rgba(11,11,11,1);
}

Créez un cercle en JS :

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

Un cercle rose apparaît au centre (forme par défaut).

Pour un rectangle :

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

Principes du mouvement

Cercle rouge vide :

const redCirc = new mojs.Shape({
  isShowStart: true,
  stroke: 'red',
  strokeWidth: 5,
  fill: 'none',
  radius: 15
});

Animez-le (rayon et opacité) :

const redCirc = new mojs.Shape({
  stroke: 'red',
  strokeWidth: 5,
  fill: 'none',
  radius: {15: 30},
  opacity: {1: 0},
  duration: 1000
}).play();

Séquence et easing

Utilisez .then() pour chaîner :

const redCirc = new mojs.Shape({
  stroke: 'red',
  strokeWidth: 5,
  fill: 'none',
  radius: 15,
  duration: 1000
}).then({
  strokeWidth: 0,
  scale: {1: 2, easing: 'sin.in'},
  duration: 500
}).play();

Consultez easings.net pour les courbes.

Les Bursts : explosions de formes

Burst par défaut :

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

Personnalisé :

const sparks = new mojs.Burst({
  radius: {0: 30, easing: 'cubic.out'},
  angle: {0: 90, easing: 'quad.out'}
}).play();

Étincelles (croix) :

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();

Rendre interactif

Ajoutez l'écouteur :

document.addEventListener('click', function(e) {
  redCirc
    .tune({ x: e.pageX, y: e.pageY })
    .replay();
  sparks
    .tune({ x: e.pageX, y: e.pageY })
    .replay();
});

Supprimez .play() et isShowStart: true. Ajoutez left: 0, top: 0 aux objets.

Effets psychédéliques : triangles

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
  }
});

Ajoutez à l'écouteur.

Pentagones dansants

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
  }
});

Aléatoire

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)'
  }
});

Dans écouteur : .replay().generate();

Lignes échelonnées

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
  }
});

Carrés intelligents

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
  }
});

Mo.js : l'outil ultime pour animations Web

Ce tutoriel vous arme pour des animations pros. Idéal pour sites interactifs, boutons réactifs. Expérimentez : les "erreurs" deviennent chefs-d'œuvre !