Exporter des animations après les effets sur HTML5

Sep 16, 2025

Comment

[dix] [dix] [dix]

[dix]

L'animation sur le Web est là pour rester. C'est dans tout, des mouvements subtils qui aident à apporter notre Conception de l'interface utilisateur À la vie, à des expériences en toile entièrement animées et à des expériences WebLIM contestant ce que nous avons pensé une fois que la pensée était possible dans le navigateur.

[dix]

Bien que la créativité des Devs et les capacités des navigateurs augmentent, l'animation sur le Web a longtemps été une mauvaise relation avec la vidéo - quelque chose que la communauté des graphiques de mouvement s'est approchée avec prudence depuis des années. Rappelez-vous que si vous avez un site complexe à maintenir, votre hébergement Web Le service doit être sur le point.

Le guide des professionnels de l'interface utilisateur

Les développeurs se sont invoqués sur des bibliothèques telles que Greensock et Snap.SVG pour faire de la levée forte lors de la reproduction d'animation via JavaScript. Bien que ces outils ont donné beaucoup de flexibilité, ils ne peuvent pas comparer à la précision et à la subtilité de l'animation pouvant être réalisée en utilisant After Effects cc La chronologie et l'assouplissement des graphiques. À partir d'une perspective Web, After Effects est très bien adapté pour peaufiner et essayer la motion avant de le valider.

character with 'Ae' written on its belly — BodyMovin: la caractéristique magique "Render pour web" Adobe oublié [Toutes les images: Hungry Sandwich Club]

Entrer Bodymovine Une extension révolutionnaire pour Adobe After Effects qui exporte l'animation directement à partir de After Effects à JavaScript pour être affichée et manipulée dans le navigateur. Créé par Hernan Torrisi , BodyMovine supprime de nombreuses barrières entre animateur et développeur. À son niveau de base, le plugin agit comme la caractéristique magique «rendu de Web» Adobe oublié. À son plus avancé, il ouvre de nouvelles possibilités d'animation interactive.

BodyMovin est un lien dans la chaîne d'outils, des plugins et des systèmes en hausse pour répondre à certaines de ces nouvelles possibilités. Lottie d'Airbnb et Images clés de Facebook Les deux s'appuient sur ces fondations - et ils apportent enfin l'outil d'animation le plus puissant sur le Web.

[dix]

Pourquoi utiliser BodyMovin?

SVG a pris sur Internet et a apporté avec elle l'espoir que tout soit de haute qualité, léger et évolutif. BodyMovin rend tout dans votre composition à un SVG magnifiquement croustillant qui garde sa qualité de vecteur à n'importe quelle taille. Plus besoin de compromettre ce GIF ou de forcer vos utilisateurs à charger des fichiers vidéo gonflables.

En plus de simplifier le processus d'exportation de vos animations, BodyMovin ouvre une manière plus potentiellement potentielle pour que les développeurs soient créatifs avec de nouvelles expériences interactives. Découvrez CodePen pour certaines des façons fantastiques que l'extension a été utilisée - à partir de plates-formes IK interactives pour animer des textes interactifs de type AS-You.

Pour simplifier davantage votre processus de développement Web, essayez un Générateur de site Web .

Ae character and www. character — Tout est rendu à un SVG convivial qui est à la fois croustillant et léger

L'animation exportée peut être manipulée dans le navigateur comme n'importe quel autre élément, ce qui nous permet de penser à l'animation comme un outil interactif et expérimental dans la conception Web. Et maintenant à cause de la bodymovine, amener vos animations au Web n'a jamais été aussi facile. Dans ce tutoriel, vous apprendrez à exporter une animation de After Effects et à créer une simple animation de bouclage qui répond au clic de l'utilisateur.

Comment préparer vos fichiers après-effets

La prise en charge des fonctionnalités After Effects s'est considérablement améliorée et vous pouvez vous attendre à obtenir de très bons résultats hors de la boîte. Cela étant dit, vos couches 3D volantes de fantaisie ne joueront pas bien, alors soyez conscient des limites avant de commencer. Avant de commencer un projet, téléchargez toujours la dernière version de BodyMovin et vérifiez la page GITHUB pour voir les fonctions actuellement prises en charge.

Ne soyez pas trop pressé pour vous déplacer sur la partie amusante ... Les fichiers bien rangés font un esprit bien rangé. Dans ce cas, ils vous aideront également à prendre une partie des travaux supplémentaires du navigateur et à vous donner une lecture soyeuse lisse. Premièrement, vous voudrez vous assurer que votre contenu est après des couches de forme après des effets pour une puissance de vecteur complet. Pour convertir tout fichier illustrateur en couches de formes, vous pouvez simplement cliquer avec le bouton droit de la souris et choisir Créer des formes à partir de la couche de vecteur. Toute couches qui ne sont pas des formes à ce stade seront ensuite converties en images et ne seront pas rendues en tant que vecteurs.

Ensuite, vérifiez vos couches et vos sous-dresseurs; Il y a une bonne chance que vous puissiez simplifier le contenu de la forme sans rien sacrifier. Essayez de réduire le nombre de groupes, chemins et remplir uniquement l'essentiel.

Prendre soin de masques

Les masques sont un moyen facile de glisser à ce stade. Sachez que les masques alpha fonctionneront avec le rendu SVG, mais ne vous apparaîtrez pas si vous choisissez de passer à la toile. Les masques peuvent être coûteux en performance, alors utilisez-les efficacement.

Le rendu

BodyMovin fonctionne en deux parties - une extension After Effects qui convertit les données d'animation vers un fichier JSON et un lecteur BodyMovin.js à inclure dans votre page Web pouvant interpréter ce fichier et à le rendre dans le navigateur.

Pensez que vos fichiers sont bons à partir? Ouvrez l'extension BodyMovine via Window & GT; Extensions et ensuite Bodymovine.

Une fois que vous avez appuyé sur Actualiser, vous verrez une liste de toutes les compositions de ce projet After Effects. Sélectionnez votre composition choisie puis choisissez un dossier de destination à l'intérieur de votre projet Web. Lorsque vous êtes heureux, cliquez sur Render et regarder la magie se produire. Quand c'est fait, vous obtiendrez un message «fini». Toutes nos félicitations! Vous venez d'exporter un fichier JSON avec toutes les informations que le joueur doit recréer l'animation.

two characters — Vérifiez vos calques - cela pourrait être une fonctionnalité non prise en charge ou une expression utilisée dans After Effects

Pour tester votre animation nouvellement exportée, cliquez sur Aperçu & GT; Le courant rendu actuellement et n'oubliez pas de frotter la chronologie car vous pourriez repérer quelque chose qui semble un peu différent de ce que vous attendez. Si vous repérez tout problème, vérifiez et vérifiez vos calques - cela pourrait être une fonctionnalité non prise en charge ou une expression utilisée dans After Effects.

Certains plugins après Effects tels que Rubberhose supportent maintenant la bodymovine. RubberHose utilise des couches de guidage et des couches cachées. Pour les activer, cliquez simplement sur les paramètres COG à côté de la composition choisie et cochez les fonctions dont vous avez besoin.

Si tout va bien, il n'y a qu'une dernière chose à faire avant de partir après des effets. À ce stade, vous devriez avoir un fichier de données fraîche.json décrivant votre animation, mais aucun joueur de BodyMovine ne doit l'interpréter. Dans l'extension, cliquez sur le bouton "Obtenir le lecteur" en haut à droite et enregistrez-le avec votre fichier JSON.

Charger l'animation

Maintenant, vous avez tout ce dont vous avez besoin, sautant directement dans le code et fixons les bases pour obtenir votre animation montrant sur la page.

D'abord faire un nouveau conteneur #Anim_container tenir votre animation. Vous devez également inclure le bodymovin.js fichier avant la balise de fermeture. Ensuite, informez tout le corps de votre animation et chargez-le dans le nouveau conteneur.

Passons à travers la configuration étape par étape:

[dix]

 var concepteur = document.getElementByID ('anim_container');
// mis en place notre animation

var animdata = {
Conteneur: conteneur,
Renderer: "SVG",
Autoplay: vrai,
boucle: vrai,
Chemin: 'Data.json'
};
varime = bodymovin.loadanimation (animdata);

Vous devez définir tous les paramètres de l'animation. Dites à BodyMovin le conteneur que vous souhaitez que l'animation se charge dans puis dites-la de rendre l'animation en tant qu'éléments SVG. Ensuite, dites à l'animation de jouer dès qu'il est chargé et que vous voulez que cela revienne au début du début de la fin.

La propriété Chemin indique au lecteur BodyMovin où trouver le fichier de données JSON pour l'animation. En raison de la politique de partage des ressources (COR) d'origine croisée, la technique que vous utiliserez pour accéder au fichier JSON ne fonctionnera que si vous êtes sur un serveur ou un serveur local. Pour travailler localement, vous pouvez effectuer ces données.json dans un fichier JavaScript qui attribue à l'objet à une variable. Dans ce cas, votre configuration pourrait ressembler à ceci:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var concepteur = document.getElementyID ('anim_container');
// mis en place notre animation
var animdata = {
Conteneur: conteneur,
Renderer: "SVG",
Autoplay: vrai,
boucle: vrai,
AnimationData: Données
};
varime = bodymovin.loadanimation (animdata);
& lt; / script & gt;

Actualisez la page et votre animation doit jouer à l'intérieur du conteneur. Sélectionnez avec vos outils de développement et vous verrez que chaque élément de l'animation est maintenant contenu dans & lt; g & gt; tags, et est en train de transformer en temps réel.

Semble incroyable, non? Vous devriez maintenant avoir une belle animation croustillante montrant dans le navigateur (sans une étiquette vidéo misérable en vue ...). L'animation sera toujours à l'échelle d'adapter son conteneur, alors allez-y et soufflez-le!

BodyMovin a une gamme de méthodes puissantes pour contrôler l'animation après avoir chargé. Appeler une méthode comme anim.pause () ou anim.setdirection () vous permettra de manipuler la lecture de différentes manières. Regardons quelques exemples:

anim.setdirection (-1) jouera l'animation en sens inverse
anim.pause () et anim.play () va commencer et arrêter l'animation
Anim.SetSpeed (0.5) jouera l'animation à la demi-vitesse

Ajouter une interaction

Dans cette prochaine étape, vous explorerez quelques façons différentes d'ajouter une interaction à vos animations via JavaScript. Dans cet exemple, nous exportons une animation après les effets avec deux sections: section A et section B. La section A utilise des cadres de un à 20 (Triangle tient sa clé Pogo Stick) Section B utilise des cadres de 20 à 40 (triangle sautant de haut en bas sur un bâton de pogo).

Maintenant, vous souhaitez lire la section A sur une boucle puis (seulement après que l'utilisateur clique) Play and Boop Section B. Vous pouvez utiliser la propriété PlaySeGments pour diviser ainsi de cette manière. Cette méthode prendra deux arguments - une matrice avec des valeurs de début et d'extrémité et un deuxième booléen - Isframe. La définition de cela sur True va dire à l'animation de lire les valeurs de début et d'extrémité en tant que cadres, alors que False le dira de lire ces valeurs au fil du temps.

 Anim.Pause ();
anim.playseégments (0,20], vrai);

L'ajout de cela dit BodyMovin à une pause à la première image et de jouer à l'animation de 0 à 20 images. Comme vous avez configuré votre animation avec un boucle: vrai Propriété Cela continuera à jouer à la section A encore et encore.

Configurons tout l'exemple. Vous utiliserez deux segments d'une animation pour cet exemple, vous allez donc créer deux fonctions:

 var concepteur = document.getElementByID ('anim_container');
// mis en place notre animation
var animdata = {
Conteneur: conteneur,
Renderer: "SVG",
Autoplay: Faux,
boucle: vrai,
Chemin: 'Data.json'
};
varime = bodymovin.loadanimation (animdata);
// lorsque l'animation est chargée, exécutez notre fiancée
anim.addeventlistener ('Domoaded', firstloop);
// Créer nos fonctions de lecture
fonction fiancloop () {
anim.playseégments ([0,20], vrai);
};
fonction secondloop () {
anim.playseégments ([20,40], vrai);
};
// Écouter pour un événement de clic
conteneur.addeventlistener ('click', fonction (événement) {
anim.addeventlistener ('LoopComplete', secondloop);
});

Marche à suivre! Maintenant, votre animation restera en boucle jusqu'à ce que l'utilisateur clique dessus, puis il démarrera la deuxième boucle. Le seul problème est maintenant qu'un saut comme celui-ci est très brusque et peut ruiner la finesse de l'animation.

Une situation idéale consiste à inclure une troisième section de l'animation, une troisième section qui transition de la tenue du bâton Pogo pour le sauter. Maintenant, votre structure ressemblera à ceci:

premier - Cadre 0 à 20
transition - Cadre de 20 à 30
seconde - Cadre de 30 à 50

Nous voulons que votre animation reste dans la première boucle jusqu'à ce qu'elle soit cliquée. À ce stade, vous voudrez attendre la fin de la boucle que vous êtes actuellement en panne et vous allez passer à la transition. Une fois la transition terminée, passez à votre deuxième boucle. Cela semble compliqué mais reste avec moi! Voici votre code en totalité:

var concepteur = document.getElementyID ('anim_container');
// mis en place notre animation
var animdata = {
Conteneur: conteneur,
Renderer: "SVG",
Autoplay: Faux,
boucle: vrai,
Chemin: 'Data.json'
};
varime = bodymovin.loadanimation (animdata);
// lorsque l'animation est chargée, exécutez notre fiancée
anim.addeventlistener ('Domoaded', firstloop);
// Créer nos fonctions de lecture
fonction fiancloop () {
anim.playseégments ([0,20], vrai);
};
transition de fonction () {
anim.playseégments ([20,30], vrai);
anim.removeeventlistener ('LoopComplete');
anim.addeventlistener ('LoopComplete', secondloop);
};
fonction secondloop () {
anim.playseégments ([30.100], vrai);
anim.removeeventlistener ('LoopComplete');
};
// Écouter pour un événement de clic
conteneur.addeventlistener ('click', fonction (événement) {
anim.addeventlistener ('LoopComplete', transition);
});

En cliquant, vous utilisez un loopcomplete auditeur d'attendre que vous atteigniez la dernière image de la boucle, puis courez votre transition() fonction. Ici, vous supprimez le dernier auditeur, jouez le prochain ensemble de cadres puis faites de même. Une fois la transition terminée, il appellera secondloop () .

C'est tout!

Vous avez travaillé avec quelques-unes des fonctionnalités de BodyMovin aujourd'hui, mais si vous souhaitez en savoir plus sur le plugin, vous pouvez trouver une charge d'informations sur le BodyMovin Github page. Pour plus d'exemples, consultez la collection Toujours-Impressive BodyMovin CodePen.

Espérons que ce tutoriel vous aura donné une idée des différents types de façons de combiner l'utilisation des effets après et de la bodymovine pour produire une animation de SuperCool pour le Web!

finished animation with triangles on pogo sticks — Une section séparée pour chaque partie de l'animation

Vous pouvez maintenant configurer une animation pour être exporté pour le Web, apportez vos fichiers exportés dans le navigateur et rendez votre animation sensible au clic. Pensez au-delà des fichiers MP4 que vous utilisiez auparavant et regardez à BodyMovin pour créer beaucoup d'expériences Web plus riches à l'avenir.

Être capable d'impliquer de près les animateurs dans le processus de développement deviennent de plus en plus importants, et le domaine de l'animation Web est incroyablement rapide. Avec une collection toujours croissante de nouvelles extensions, des plugins et des cadres, des animateurs et des développeurs peuvent s'attendre à ce que ce processus soit plus facile et meilleur au fil du temps. Je n'ai pas hâte de voir ce que l'avenir tient.

Vous avez beaucoup de fichiers à sauvegarder? Découvrez notre stockage en ligne Choisies.

Cet article est apparu à l'origine dans magazine net en 2017. S'abonner ici .

Lire la suite:

Créer et animer les polygones SVG
14 incroyable Adobe Plugins After Effects
Créer des storyboards pour les animations web

[dix] [dix]

[dix]

Exporter des animations après les effets sur HTML5

Pourquoi utiliser BodyMovin?

Comment préparer vos fichiers après-effets

Prendre soin de masques

Le rendu

Charger l'animation

Ajouter une interaction

C'est tout!

Comment - Most Popular Articles

Construire des terrains à Houdini 17

Comment masquer votre code JavaScript à partir de la source de vue

Comment peindre un zombie coloré

6 façons d'accélérer votre modélisation

Comment ajouter des arrière-plans CSS amusants à vos sites

Comment simuler des explosions dans maya

Créer une cinémation avec Photoshop en 60 secondes

Créer un papier peint bas Poly dans C4D

Catégories