Animations After Effects

Exportez vos animations en format JSON depuis After Effects avec le plug-in Bodymovin, optimisez le poids et améliorez la qualité de vos animations. Insérez-les via le composant After Effects, créez des marqueurs sur les frames, interagissez et synchronisez avec les autres composants (défilement, mouvement...).

Exportez votre animation en JSON avec le plug-in Bodymovin

Développée par les équipes Airbnb, Lottie est une librairie open source iOS, Android et React Native qui génère les animations After Effects en temps réel, ce qui permet aux applications d’utiliser les animations aussi facilement qu’elles utilisent des images statiques. Au final, les animations sont plus fluides, plus légères et plus facilement contrôlables. En savoir plus

Bodymovin est le plug-in qui permet directement depuis After Effects pour le web (en SVG + Javascript).

Téléchargez le plug-in Bodymovin.

Ouvrez votre projet dans After Effects.

Rendez-vous dans FenêtresExtensions et ouvrez le plug-in Bodymovin.
Sélectionnez la composition que vous souhaitez exporter et choisissez un dossier de destination. 
Cliquez sur le bouton Render pour voir le rendu de la composition et prévisualisez votre animation.
render_bodymovin.jpgRendez-vous dans le dossier de destination et retrouvez votre animation au format JSON. Si vous aviez des images, vous avez également un dossier Images.
Sélectionnez tous les fichiers à la racine et compressez au format ZIP.
Le composant After Effects
Cliquez sur Composants et insérez le composant After Effects.
composant_after_effect.pngImportez le dossier de ZIP de votre animation dans la fenêtre Propriétés.
Indiquez le nom du fichier (lorem.json) pour qu'il s'affiche correctement dans le studio.  
proprie_te_s_composant_AE.png
Personnalisez l'animation avec les propriétés suivantes : boucle, vitesse (min/max) et lecture automatique.
Par défaut, l'animation After Effects s'appuie sur la web view, qui permet une plus grande compatibilité. Vous pouvez choisir d'utiliser la version native iOS et/ou Android pour une meilleure performance, mais attention à la compatibilité.

Marqueurs

Identifiez une ou plusieurs frames de votre animation qui vont vous servir de déclencheur ou d'objet d'une action.   
Cliquez sur + AJOUTER MARQUEUR
marqueur_composant_AE.png

Interactions & Synchronisation

Déclencher une action depuis votre animation After Effects

Sélectionnez votre animation et ouvrez la fenêtre Interactivités.
Voici les déclencheurs disponibles :
  • Fin de lecture
  • Mise en pause
  • Commence lecture
  • Arrêt lecture
de_clencheurs_composant_AE.png

Créer une action sur votre animation After Effects

Choisissez un objet, le déclencheur et l'action Agir sur un composant de la fenêtre Interactivités.
Voici les actions disponibles :
  • Changer frame
  • Augmenter/diminuer la vitesse
  • Avancer/Reculer
  • Mettre en pause
  • Lecture
  • Pause
  • Redémarrer au début
  • Mettre la vitesse
  • Arrêter
  • Aller à
actions_composant_AE.png

Synchroniser avec un autre composant 

Pour synchroniser votre animation AE avec un autre composant (par exemple le capteur de mouvement), insérez le composant Synchronisation depuis Composants.

Dans la fenêtre Propriétés, cliquez sur Ajouter composant. Choisissez le composant AE et l'autre composant dans la liste. Sélectionnez le composant AE et cliquez sur Frames dans les options.

 

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous