tuanhuyptit/gwd-banner-animation

Animation de bannière GWD

Créez un projet source Google Web Designer modifiable qui préserve le design fourni et ajoute du mouvement. Chaque demande est une combinaison d'une entrée et d'un mode de mouvement.

Entrée	Quand
A. Dossier GWD avec calques	L'utilisateur fournit un projet GWD (HTML + assets/ + gwd_workspace.json)
B. Plan de travail Illustrator	L'utilisateur a le design ouvert dans Illustrator (ou pointe vers un .ai) et souhaite un projet GWD

Mode de mouvement	Quand
Modèle	L'utilisateur fournit un échantillon de bannière GWD du même ensemble et souhaite le même effet (« giống hiệu ứng mẫu », une autre taille de l'ensemble)
Libre	Pas d'échantillon, ou l'utilisateur demande un mouvement nouveau/personnalisé (« tự làm hiệu ứng », « hiệu ứng tùy ý »)

Choisissez le mode à partir de la demande : un échantillon fourni signifie le mode modèle ; sinon, mode libre. Une marque, des ressources, un dossier ou une taille similaires n'impliquent jamais le mode modèle. Ne demandez que si la demande est vraiment ambiguë.

Outils

• scripts/inspect_gwd_banner.py <project> : inventaire du canvas, des calques, des sources, des classes.
• scripts/prepare_layers.py, scripts/derive_light_layers.py : exportations Illustrator → ressources 2x réduites + layout.json (references/illustrator-export.md).
• scripts/extract_gwd_motion.py <project> -o spec.json : projet GWD → spécification.
• scripts/adapt_template_motion.py : spécification du modèle + nouvelle mise en page → spécification pour la nouvelle taille (references/template-mode.md).
• scripts/build_gwd_project.py spec.json <out>/<Name> : spécification → projet GWD modifiable (runtime à partir de assets/gwd-runtime, espace de travail en mode avancé). Format de spécification : references/spec-format.md.
• scripts/apply_half_scale.py <project> : images 2x → éléments de taille naturelle à l'échelle 0.5 (voir règles GWD).
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip].

Les scripts Python nécessitent Pillow et numpy (python3 -m pip install --user pillow numpy).

Flux de travail

1. Protéger les sources. Traitez les dossiers GWD et échantillons fournis comme en lecture seule ; travaillez dans un dossier de sortie inscriptible. Dans Illustrator, ne modifiez jamais le travail de l'utilisateur : dupliquez-le dans des calques temporaires GWD_* et supprimez-les ensuite.
2. Obtenir les calques.
   • Entrée A : copiez le projet, exécutez inspect_gwd_banner.py, mappez les calques par signification (fond, étiquette, titre, texte de soutien, offre, CTA, illustration, produit, lueur, lignes d'accentuation…), vérifiez visuellement.
   • Entrée B : suivez references/illustrator-export.md : exportez chaque calque comme un plan de travail complet en 2x avec un fond transparent, puis prepare_layers.py, et derive_light_layers.py pour les lueurs qui dépendent des modes de fusion. Exportez _ref2x.png du travail fini.
3. Mouvement.
   • Mode modèle : references/template-mode.md : extrayez l'échantillon, adaptez-le à la nouvelle mise en page, révisez la spécification. Conservez la séquence, le timing, l'assouplissement et la boucle de l'échantillon inchangés.
   • Mode libre : lisez references/motion-design-guide.md. Avant d'écrire les keyframes, définissez un concept en une phrase, une hiérarchie, un mouvement signature, une séquence d'entrée, une emphase et une pause lisible, choisis dans cette composition. Comparez avec les travaux récents dans le contexte et reconcevez si cela répète un mouvement signature ou une séquence précédente. Écrivez la spécification (Entrée B) ou modifiez le HTML copié (Entrée A) en suivant les règles GWD ci-dessous.
4. Construire. Entrée B (ou toute spécification) : build_gwd_project.py. Entrée A modifiée sur place : conservez son HTML, ses ressources et ses fichiers runtime ; assurez-vous que gwd_workspace.json contient "timeline.animationMode":"proMode".
5. Valider. validate_gwd_banner.py ; corrigez toutes les erreurs.
6. Prévisualiser. Servez le dossier via HTTP et ouvrez le HTML dans un navigateur. Attendez que document.getAnimations().length atteigne le nombre attendu (si l'annonce ne démarre pas, appelez document.getElementById('gwd-ad').initAd() ; le chargement poli de GWD peut manquer WebComponentsReady sur un serveur local instable). Mettez en pause et parcourez toutes les animations pour vérifier : état initial, révélations importantes, mouvement signature, CTA, pause tardive, limite de boucle, état final. Pour l'entrée B, comparez l'image finale avec _ref2x.png ; en mode modèle, comparez les phases avec l'échantillon aux mêmes moments. Un volet de navigateur caché peut figer la lecture en temps réel, alors vérifiez la structure de l'événement de boucle plutôt que d'attendre.
7. Livrer. package_gwd_banner.py, plus HUONG-DAN.txt dans le projet (concept ou « identique à l'échantillon », chronologie, mappage des calques avec les modes de fusion, notes d'édition manuelle) et un court résumé de validation.

Règles GWD (tous les modes)

• Chaque élément animé a une classe unique gwd-gen-...gwdanimation, une règle @keyframes ..._gwd-keyframes (ou _gwd-mask-keyframes) unique correspondante, appliquée via #page1.gwd-play-animation .CLASS { animation: ...; }.
• Un seul sélecteur de pourcentage par règle de keyframes. Ne groupez jamais les sélecteurs comme 0%, 8% : GWD peut traiter le timing comme non fini et refuser d'ouvrir le document.
• Pas de noms de keyframes en double, pas de durées ou de délais non finis.
• La keyframe finale préserve la transformation de base complète de l'élément ; le contenu requis ne se termine jamais caché.
• Les styles de base sont égaux à la keyframe 0% afin que la scène de GWD corresponde au début de la chronologie.
• Ne modifiez pas les URL de clic, l'environnement publicitaire, l'intégration Enabler, le texte, l'ordre des calques ou les ressources de campagne sauf si demandé. Ne modifiez pas les bibliothèques runtime GWD minifiées.
• Les calques de lueur produits par derive_light_layers.py doivent utiliser mix-blend-mode: screen.
• Images 2x : l'élément conserve la taille naturelle du PNG et est mis à l'échelle 0.5 (panneau GWD : Échelle 0.5, 0.5, 0.5), jamais une boîte de demi-taille avec le PNG 2x étiré dedans ; cela s'affiche correctement localement mais trop grand dans la prévisualisation Google Ads/DV360. build_gwd_project.py le fait automatiquement ; pour un projet existant (Entrée A), exécutez scripts/apply_half_scale.py <project> (sûr à réexécuter) et conservez les valeurs de spécification en px CSS 1x.
• Chaque keyframe d'une image animée porte la transformation complète (le script l'ajoute). Un calque dont les keyframes ne contiennent que l'opacité prend son échelle du style de base, donc un changement d'échelle ultérieur sur la scène GWD reste à la fin et désaligne les calques de lueur. Lors de la vérification d'un projet modifié par l'utilisateur, comparez la transformation finale de chaque calque avec son échelle 0.5 prévue avant toute autre chose.

Résultats attendus

• Les sources restent inchangées ; les calques temporaires Illustrator sont supprimés.
• La sortie s'ouvre comme un projet GWD modifiable (mode avancé) avec son dossier assets/ ; les ressources sont en 2x.
• Mode modèle : le mouvement est reconnaissable comme celui de l'échantillon, avec des distances adaptées à la nouvelle composition.
• Mode libre : le projet a son propre concept et son effet signature.
• L'image finale montre le message complet (et le CTA si présent) et correspond au travail source.