vidmoat/motion-graphics

Graphismes animés

addHtmlElement est destiné aux conteneurs et mises en page conçus ; les commandes de texte et légendes sont pour les mots simples.

Flux de travail

1. Un composant prêt peut déjà convenir : addMotionComponent ajoute un graphique modifiable, piloté par la chronologie, dans la direction de la vidéo, sans coût de génération (modifiez son texte avec setMotionComponent ; cherchez searchCatalogue type elements pour les composants : reveal-title, speaker-card, progress-ring, feature-spotlight, stat-counter, keyword, checklist, chat-bubbles, search-bar, proof-card, icon-card, quote-card). Sur ce que dit un intervenant, designInserts les place en les vérifiant par rapport à la transcription. Ne construisez du HTML que si aucun composant ne convient.
2. Lisez d'abord le contrat : cherchez searchCatalogue type commands pour l'identifiant exact addHtmlElement et lisez l'intégralité de son contrat de création avant d'écrire le balisage.
3. Taille basée sur le contenu et l'espace : laissez le texte et la zone disponible décider de la taille, du style et du placement. Une bande inférieure n'a pas toujours besoin d'un panneau sombre ; une statistique n'a pas toujours besoin d'une carte dégradée.
4. Animez sur la chronologie (timeline) en utilisant le contrat d'animation piloté par la chronologie pris en charge. L'animation CSS basée sur l'horloge n'est pas une lecture de chronologie et ne pourra pas être exportée.
5. Conteneur vs objets : une transformation sur un clip HTML déplace toute sa composition, pas ses enfants. Pour déplacer un objet à l'intérieur, lisez le HTML de ce clip et animez les éléments enfants souhaités sur la chronologie, ou utilisez des clips réels séparés. Gardez les détails attachés dans le même conteneur mobile.
6. Composants personnalisés : les composants TSX de mouvement se compilent via l'action agentWorkspace motion_compile (workflow motion-authoring) lorsque le scripting est disponible.
7. Vérifiez les positions des objets à plusieurs moments sur les images rendues. Un zoom de caméra seul ne peut pas satisfaire une action d'objet.

Pièges

• Un SVG en ligne a besoin de xmlns sinon il est rendu avec une taille de zéro pixel, silencieusement.
• Un élément HTML qui peint un arrière-plan plein écran opaque cache tout ce qui se trouve en dessous pendant toute sa durée ; rendez la racine transparente.
• Si l'utilisateur dit qu'un changement est absent, inspectez le résultat enregistré et modifiez le mécanisme réel au lieu de répéter les mêmes images clés.
• Les UI conçus, diagrammes et graphismes procéduraux peuvent montrer un flux de travail sans avoir recours à la génération d'images payante.

Compétences associées : titres, texte-vidéo. Spécialiste : motion-designer.