tuanhuyptit/gwd-banner-animation

GWD-Banneranimation

Erstelle ein editierbares Google Web Designer-Quellprojekt, das das bereitgestellte Design beibehält und Bewegung hinzufügt. Jede Anfrage ist eine Kombination aus einer Eingabe und einem Bewegungsmodus.

Eingabe	Wann
A. Ebenen-GWD-Ordner	Benutzer stellt ein GWD-Projekt bereit (HTML + assets/ + gwd_workspace.json)
B. Illustrator-Zeichenfläche	Benutzer hat das Design in Illustrator geöffnet (oder verweist auf eine .ai-Datei) und wünscht ein GWD-Projekt

Bewegungsmodus	Wann
Vorlage	Benutzer stellt ein Muster-GWD-Banner desselben Sets bereit und wünscht denselben Effekt ("giống hiệu ứng mẫu", eine andere Größe des Sets)
Frei	Kein Muster, oder der Benutzer fragt nach neuer/benutzerdefinierter Bewegung ("tự làm hiệu ứng", "hiệu ứng tùy ý")

Wähle den Modus aus der Anfrage: ein bereitgestelltes Muster bedeutet Vorlagenmodus; andernfalls Freier Modus. Ähnliches Branding, Assets, Ordner oder Größe allein implizieren niemals den Vorlagenmodus. Frage nur nach, wenn die Anfrage wirklich mehrdeutig ist.

Werkzeuge

• scripts/inspect_gwd_banner.py <project>: Inventar der Zeichenfläche, Ebenen, Quellen, Klassen.
• scripts/prepare_layers.py, scripts/derive_light_layers.py: Illustrator-Exporte → beschnittene 2x Assets + layout.json (references/illustrator-export.md).
• scripts/extract_gwd_motion.py <project> -o spec.json: GWD-Projekt → Spezifikation.
• scripts/adapt_template_motion.py: Vorlagenspezifikation + neues Layout → Spezifikation für die neue Größe (references/template-mode.md).
• scripts/build_gwd_project.py spec.json <out>/<Name>: Spezifikation → editierbares GWD-Projekt (Laufzeit von assets/gwd-runtime, Erweiterter Modus-Arbeitsbereich). Spezifikationsformat: references/spec-format.md.
• scripts/apply_half_scale.py <project>: 2x Bilder → natürlich große Elemente im Maßstab 0,5 (siehe GWD-Regeln).
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip].

Python-Skripte benötigen Pillow und numpy (python3 -m pip install --user pillow numpy).

Arbeitsablauf

1. Quellen schützen. Behandle bereitgestellte GWD-Ordner und Muster als schreibgeschützt; arbeite in einem beschreibbaren Ausgabeordner. Ändere in Illustrator niemals die Benutzerarbeit: dupliziere in temporäre GWD_* Ebenen und lösche sie anschließend.
2. Ebenen abrufen.
   • Eingabe A: Kopiere das Projekt, führe inspect_gwd_banner.py aus, ordne Ebenen nach Bedeutung zu (Hintergrund, Etikett, Überschrift, unterstützender Text, Angebot, CTA, Illustration, Produkt, Glanz, Akzentlinien …), überprüfe visuell.
   • Eingabe B: Folge references/illustrator-export.md: Exportiere jede Ebene als vollständige Zeichenfläche mit 2x und transparentem Hintergrund, dann prepare_layers.py und derive_light_layers.py für Glanzlichter, die von Mischmodi abhängen. Exportiere _ref2x.png des fertigen Kunstwerks.
3. Bewegung.
   • Vorlagenmodus: references/template-mode.md: Extrahiere das Muster, passe es an das neue Layout an, überprüfe die Spezifikation. Behalte die Sequenz, das Timing, die Beschleunigung und die Schleife des Musters unverändert bei.
   • Freier Modus: Lese references/motion-design-guide.md. Definiere vor dem Schreiben von Keyframes ein Ein-Satz-Konzept, eine Hierarchie, eine charakteristische Bewegung, eine Eingangssequenz, Hervorhebung und eine lesbare Pause, aus dieser Komposition ausgewählt. Vergleiche mit aktuellen Arbeiten im Kontext und gestalte neu, wenn eine vorherige charakteristische Bewegung oder Sequenz wiederholt wird. Schreibe die Spezifikation (Eingabe B) oder bearbeite das kopierte HTML (Eingabe A) gemäß den untenstehenden GWD-Regeln.
4. Erstellen. Eingabe B (oder jede Spezifikation): build_gwd_project.py. Eingabe A direkt bearbeitet: Behalte dessen HTML, Assets und Laufzeitdateien; stelle sicher, dass gwd_workspace.json "timeline.animationMode":"proMode" enthält.
5. Validieren. validate_gwd_banner.py; behebe alle Fehler.
6. Vorschau. Stelle den Ordner über HTTP bereit und öffne das HTML in einem Browser. Warte, bis document.getAnimations().length die erwartete Anzahl erreicht hat (wenn die Anzeige nicht startet, rufe document.getElementById('gwd-ad').initAd() auf; das höfliche Laden von GWD kann WebComponentsReady auf einem unzuverlässigen lokalen Server verpassen). Pausiere und durchsuche alle Animationen, um zu überprüfen: Ausgangszustand, wichtige Enthüllungen, charakteristische Bewegung, CTA, späte Pause, Schleifengrenze, Endzustand. Vergleiche für Eingabe B das letzte Bild mit _ref2x.png; vergleiche im Vorlagenmodus Phasen mit dem Muster zu denselben Zeitpunkten. Ein ausgeblendeter Browserbereich kann die Echtzeitwiedergabe einfrieren, überprüfe daher die Schleifen-Ereignisstruktur, anstatt darauf zu warten.
7. Liefern. package_gwd_banner.py, plus HUONG-DAN.txt im Projekt (Konzept oder "gleich wie Muster", Zeitachse, Ebenenzuordnung mit Mischmodi, manuelle Bearbeitungshinweise) und eine kurze Validierungszusammenfassung.

GWD-Regeln (alle Modi)

• Jedes animierte Element hat eine eindeutige gwd-gen-...gwdanimation-Klasse, eine passende eindeutige @keyframes ..._gwd-keyframes (oder _gwd-mask-keyframes)-Regel, angewendet über #page1.gwd-play-animation .CLASS { animation: ...; }.
• Ein Prozentselektor pro Keyframe-Regel. Gruppiere niemals Selektoren wie 0%, 8%: GWD könnte die Zeitsteuerung als nicht endlich behandeln und sich weigern, das Dokument zu öffnen.
• Keine doppelten Keyframe-Namen, keine unendlichen Dauern oder Verzögerungen.
• Der letzte Keyframe bewahrt die vollständige Basistransformation des Elements; erforderlicher Inhalt endet nie versteckt.
• Basisstile entsprechen dem 0%-Keyframe, sodass die GWD-Bühne mit dem Start der Zeitachse übereinstimmt.
• Ändere keine Click-Through-URLs, Anzeigenumgebung, Enabler-Integration, Kopie, Ebenenreihenfolge oder Kampagnen-Assets, es sei denn, es wird danach gefragt. Bearbeite keine minimierten GWD-Laufzeitbibliotheken.
• Lichtebenen, die von derive_light_layers.py erzeugt werden, müssen mix-blend-mode: screen verwenden.
• 2x Bilder: Das Element behält die natürliche Größe des PNGs und wird auf 0,5 skaliert (GWD-Bereich: Skalierung 0,5, 0,5, 0,5), niemals eine halbe Box mit dem 2x PNG hineingestreckt; das rendert lokal korrekt, aber in der Google Ads / DV360-Vorschau zu groß. build_gwd_project.py macht dies automatisch; für ein vorhandenes Projekt (Eingabe A) führe scripts/apply_half_scale.py <project> aus (sicher wiederholbar) und behalte die Spezifikationswerte in 1x CSS-Px bei.
• Jeder Keyframe eines animierten Bildes trägt die vollständige Transformation (das Skript fügt sie hinzu). Eine Ebene, deren Keyframes nur Deckkraft halten, übernimmt ihren Maßstab aus den Basisstilen, sodass eine spätere Maßstabsänderung auf der GWD-Bühne am Ende haften bleibt und Lichtebenen falsch ausrichtet. Beim Überprüfen eines benutzerbearbeiteten Projekts vergleiche zuerst die endgültige Transformation jeder Ebene mit ihrem beabsichtigten 0,5-Maßstab.

Ausgabeerwartungen

• Quellen bleiben unverändert; temporäre Illustrator-Ebenen werden entfernt.
• Die Ausgabe öffnet sich als editierbares GWD-Projekt (Erweiterter Modus) mit seinem assets/-Ordner; Assets sind 2x.
• Vorlagenmodus: Die Bewegung ist erkennbar die des Musters, mit an die neue Komposition angepassten Abständen.
• Freier Modus: Das Projekt hat ein eigenes Konzept und eine eigene charakteristische Wirkung.
• Das letzte Bild zeigt die vollständige Botschaft (und gegebenenfalls CTA) und stimmt mit dem Quellkunstwerk überein.