workshop-lottie

objectifs

• découvrir Lottie et Bodymovin
• aquérir des fondamentaux dans leur utilisation
• développer un projet motion et interaction simple

déroulé

Dans un premier temps, découverte de l’écosystème Lottie/bodymovin

introduction:

• lottie
  • Qu’est-ce ?
  • Comment savoir ce qui est supporté ou non ?
  • Comment l’installer ?
  • Quels sont les URL à retenir ?
• Bodymovin
  • Qu’est-ce ?
  • Comment l’installer ?
  • Quels sont les URL à retenir ?
• Résumé

Pensez après cela à consulter l’annexe relative à l’utilisation de serveur local avec node en raison des polices CORS des navigateurs. Vous pourrez ensuite passer à de la mise en pratique :

mise en pratique :

• Exemple simple
  • étape 1 : créer une animation et l’exporter
  • étape 2 : mettre en place un environnement web
  • étape 3 : vérifier si ça marche
  • étape 4 : manipuler notre animation
  • étape 5 : ajouter une interactivité simple
• Travailler avec Illustrator
• Travailler avec des expressions
  • support du javaScript
  • échecs

éléments de programmation :

• utiliser des expressions avec Lottie
  • étape 1 : placer une expression dans After Effets
  • étape 2 : exporter votre animation
  • étape 3 : modifier votre animation
  • étape 4 : préparer la valeur en js
  • étape 5 : piloter notre variable
• au survol, l’animation change de direction
• Récupérer la position de la souris
• faire une fois quelque chose, une fois autre chose
• déclencher des choses selon un événement
  • quelques événements
  • quelques éléments sur lequels déclencher un événement
  • exemples d’application
• déclencher la lecture de différentes phases de l’animation
  • vidéo rapide
  • html
  • javascript

consignes :

• Consignes
  • partie 2
  • rendu

annexes :

• créer un serveur avec node.js
  • étape 1 : installer node.js
  • étape 2 (macOS)
  • étape 2 (MS-Windows)