tuanhuyptit/gwd-banner-animation

Animación de Banner GWD

Crea un proyecto fuente editable de Google Web Designer que preserve el diseño proporcionado y añada movimiento. Cada solicitud es una combinación de una entrada y un modo de movimiento.

Entrada	Cuándo
A. Carpeta GWD con capas	El usuario proporciona un proyecto GWD (HTML + assets/ + gwd_workspace.json)
B. Artboard de Illustrator	El usuario tiene el diseño abierto en Illustrator (o señala un archivo .ai) y quiere un proyecto GWD

Modo de movimiento	Cuándo
Plantilla	El usuario proporciona un banner GWD de muestra del mismo conjunto y quiere el mismo efecto ("giống hiệu ứng mẫu", otro tamaño del conjunto)
Libre	Sin muestra, o el usuario pide un movimiento nuevo/personalizado ("tự làm hiệu ứng", "hiệu ứng tùy ý")

Elige el modo a partir de la solicitud: si se proporciona una muestra, es modo plantilla; en caso contrario, modo libre. La similitud de marca, activos, carpeta o tamaño por sí solos nunca implican modo plantilla. Pregunta solo si la solicitud es realmente ambigua.

Herramientas

• scripts/inspect_gwd_banner.py <project>: inventario del canvas, capas, fuentes, clases.
• scripts/prepare_layers.py, scripts/derive_light_layers.py: exportaciones de Illustrator → activos 2x recortados + layout.json (references/illustrator-export.md).
• scripts/extract_gwd_motion.py <project> -o spec.json: proyecto GWD → especificación.
• scripts/adapt_template_motion.py: especificación de plantilla + nuevo diseño → especificación para el nuevo tamaño (references/template-mode.md).
• scripts/build_gwd_project.py spec.json <out>/<Name>: especificación → proyecto GWD editable (runtime desde assets/gwd-runtime, espacio de trabajo en modo Avanzado). Formato de especificación: references/spec-format.md.
• scripts/apply_half_scale.py <project>: imágenes 2x → elementos de tamaño natural a escala 0.5 (ver reglas de GWD).
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip].

Los scripts Python necesitan Pillow y numpy (python3 -m pip install --user pillow numpy).

Flujo de trabajo

1. Proteger fuentes. Tratar las carpetas GWD y muestras proporcionadas como solo lectura; trabajar en una carpeta de salida escribible. En Illustrator, nunca modificar el trabajo del usuario: duplicar en capas temporales GWD_* y eliminarlas después.
2. Obtener capas.
   • Entrada A: copiar el proyecto, ejecutar inspect_gwd_banner.py, mapear capas por significado (fondo, etiqueta, titular, texto de apoyo, oferta, CTA, ilustración, producto, brillo, líneas de acento…), verificar visualmente.
   • Entrada B: seguir references/illustrator-export.md: exportar cada capa como un artboard completo a 2x con fondo transparente, luego prepare_layers.py y derive_light_layers.py para brillos que dependen de modos de fusión. Exportar _ref2x.png del trabajo terminado.
3. Movimiento.
   • Modo plantilla: references/template-mode.md: extraer la muestra, adaptarla al nuevo diseño, revisar la especificación. Mantener la secuencia, temporización, easing y bucle de la muestra sin cambios.
   • Modo libre: leer references/motion-design-guide.md. Antes de escribir keyframes, definir un concepto de una frase, jerarquía, un movimiento característico, secuencia de entrada, énfasis y pausa legible, elegidos de esta composición. Comparar con trabajos recientes en contexto y rediseñar si repite un movimiento o secuencia característica anterior. Escribir la especificación (Entrada B) o editar el HTML copiado (Entrada A) siguiendo las reglas de GWD a continuación.
4. Construir. Entrada B (o cualquier especificación): build_gwd_project.py. Entrada A editada in situ: mantener su HTML, activos y archivos runtime; asegurar que gwd_workspace.json tenga "timeline.animationMode":"proMode".
5. Validar. validate_gwd_banner.py; corregir todos los errores.
6. Previsualizar. Servir la carpeta sobre HTTP y abrir el HTML en un navegador. Esperar a que document.getAnimations().length alcance el conteo esperado (si el anuncio no se inicia, llamar a document.getElementById('gwd-ad').initAd(); la carga diferida de GWD puede perder WebComponentsReady en un servidor local inestable). Pausar y buscar todas las animaciones para verificar: estado inicial, revelaciones importantes, movimiento característico, CTA, pausa final, límite de bucle, estado final. Para la Entrada B, comparar el fotograma final con _ref2x.png; en modo plantilla, comparar fases con la muestra en los mismos tiempos. Un panel oculto del navegador puede congelar la reproducción en tiempo real, así que revisar la estructura del evento de bucle en lugar de esperar.
7. Entregar. package_gwd_banner.py, además de HUONG-DAN.txt en el proyecto (concepto o "igual que la muestra", línea de tiempo, mapeo de capas con modos de fusión, notas de edición manual) y un breve resumen de validación.

Reglas de GWD (todos los modos)

• Cada elemento animado tiene una clase única gwd-gen-...gwdanimation, una regla @keyframes ..._gwd-keyframes (o _gwd-mask-keyframes) única correspondiente, aplicada mediante #page1.gwd-play-animation .CLASS { animation: ...; }.
• Un selector de porcentaje por regla de keyframe. Nunca agrupar selectores como 0%, 8%: GWD puede tratar la temporización como no finita y negarse a abrir el documento.
• Sin nombres de keyframe duplicados, sin duraciones o retrasos no finitos.
• El keyframe final preserva la transformación base completa del elemento; el contenido requerido nunca termina oculto.
• Los estilos base son iguales al keyframe 0% para que el escenario de GWD coincida con el inicio de la línea de tiempo.
• No cambiar URLs de clic, entorno del anuncio, integración de Enabler, texto, orden de capas o activos de la campaña a menos que se solicite. No editar las bibliotecas de runtime de GWD minificadas.
• Las capas de brillo producidas por derive_light_layers.py deben usar mix-blend-mode: screen.
• Imágenes 2x: el elemento mantiene el tamaño natural del PNG y se escala a 0.5 (panel de GWD: Escala 0.5, 0.5, 0.5), nunca una caja de tamaño medio con el PNG 2x estirado dentro; esto se renderiza correctamente localmente pero demasiado grande en la vista previa de Google Ads/DV360. build_gwd_project.py hace esto automáticamente; para un proyecto existente (Entrada A), ejecutar scripts/apply_half_scale.py <project> (seguro de re-ejecutar) y mantener los valores de especificación en px CSS 1x.
• Cada keyframe de una imagen animada lleva la transformación completa (el script la añade). Una capa cuyos keyframes solo contienen opacidad toma su escala del estilo base, por lo que un cambio posterior de Escala en el escenario de GWD se fija al final y desalinea las capas de brillo. Al verificar un proyecto editado por el usuario, comparar la transformación final de cada capa con su escala 0.5 prevista antes de cualquier otra cosa.

Expectativas de salida

• Las fuentes permanecen sin cambios; las capas temporales de Illustrator se eliminan.
• La salida se abre como un proyecto GWD editable (modo Avanzado) con su carpeta assets/; los activos son 2x.
• Modo plantilla: el movimiento es reconociblemente el de la muestra, con distancias adaptadas a la nueva composición.
• Modo libre: el proyecto tiene su propio concepto y efecto característico.
• El fotograma final muestra el mensaje completo (y CTA si está presente) y coincide con la obra de arte fuente.