tuanhuyptit/gwd-banner-animation

Animação de Banner GWD

Crie um projeto-fonte editável do Google Web Designer que preserve o design fornecido e adicione movimento. Cada solicitação é uma combinação de uma entrada e um modo de movimento.

Entrada	Quando
A. Pasta GWD em camadas	O usuário fornece um projeto GWD (HTML + assets/ + gwd_workspace.json)
B. Prancheta do Illustrator	O usuário tem o design aberto no Illustrator (ou aponta para um .ai) e deseja um projeto GWD

Modo de movimento	Quando
Modelo	O usuário fornece um banner GWD de amostra do mesmo conjunto e deseja o mesmo efeito ("giống hiệu ứng mẫu", outro tamanho do conjunto)
Livre	Nenhuma amostra, ou o usuário pede movimento novo/personalizado ("tự làm hiệu ứng", "hiệu ứng tùy ý")

Escolha o modo a partir da solicitação: uma amostra fornecida significa modo modelo; caso contrário, modo livre. Marca, assets, pasta ou tamanho semelhantes por si só nunca implicam modo modelo. Pergunte apenas se a solicitação for realmente ambígua.

Ferramentas

• scripts/inspect_gwd_banner.py <project>: inventário da tela, camadas, fontes, classes.
• scripts/prepare_layers.py, scripts/derive_light_layers.py: exportações do Illustrator → assets 2x cortados + layout.json (references/illustrator-export.md).
• scripts/extract_gwd_motion.py <project> -o spec.json: projeto GWD → especificação.
• scripts/adapt_template_motion.py: especificação do modelo + novo layout → especificação para o novo tamanho (references/template-mode.md).
• scripts/build_gwd_project.py spec.json <out>/<Name>: especificação → projeto GWD editável (runtime de assets/gwd-runtime, workspace em modo Avançado). Formato da especificação: references/spec-format.md.
• scripts/apply_half_scale.py <project>: imagens 2x → elementos em tamanho natural com escala 0,5 (veja regras do GWD).
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip].

Os scripts Python precisam de Pillow e numpy (python3 -m pip install --user pillow numpy).

Fluxo de Trabalho

1. Proteger fontes. Trate as pastas GWD e amostras fornecidas como somente leitura; trabalhe em uma pasta de saída gravável. No Illustrator, nunca modifique o trabalho do usuário: duplique em camadas temporárias GWD_* e exclua-as posteriormente.
2. Obter camadas.
   • Entrada A: copie o projeto, execute inspect_gwd_banner.py, mapeie as camadas por significado (fundo, rótulo, título, texto de apoio, oferta, CTA, ilustração, produto, brilho, linhas de destaque…), verifique visualmente.
   • Entrada B: siga references/illustrator-export.md: exporte cada camada como uma prancheta inteira em 2x com fundo transparente, em seguida prepare_layers.py e derive_light_layers.py para brilhos que dependem de modos de mesclagem. Exporte _ref2x.png do trabalho finalizado.
3. Movimento.
   • Modo modelo: references/template-mode.md: extraia a amostra, adapte-a ao novo layout, revise a especificação. Mantenha a sequência, temporização, easing e loop da amostra inalterados.
   • Modo livre: leia references/motion-design-guide.md. Antes de escrever keyframes, defina um conceito de uma frase, hierarquia, um movimento de assinatura, sequência de entrada, ênfase e pausa legível, escolhidos a partir desta composição. Compare com trabalhos recentes no contexto e redesenhe se repetir um movimento de assinatura ou sequência anterior. Escreva a especificação (Entrada B) ou edite o HTML copiado (Entrada A) seguindo as regras do GWD abaixo.
4. Construir. Entrada B (ou qualquer especificação): build_gwd_project.py. Entrada A editada no local: mantenha seu HTML, assets e arquivos de runtime; garanta que gwd_workspace.json tenha "timeline.animationMode":"proMode".
5. Validar. validate_gwd_banner.py; corrija todos os erros.
6. Visualizar. Sirva a pasta sobre HTTP e abra o HTML em um navegador. Aguarde document.getAnimations().length atingir a contagem esperada (se o anúncio não iniciar, chame document.getElementById('gwd-ad').initAd(); o carregamento polido do GWD pode perder WebComponentsReady em um servidor local instável). Pause e busque todas as animações para verificar: estado inicial, revelações importantes, movimento de assinatura, CTA, pausa tardia, limite do loop, estado final. Para Entrada B, compare o quadro final com _ref2x.png; no modo modelo, compare fases com a amostra nos mesmos momentos. Um painel oculto do navegador pode congelar a reprodução em tempo real, portanto verifique a estrutura do evento de loop em vez de esperar por ele.
7. Entregar. package_gwd_banner.py, além de HUONG-DAN.txt no projeto (conceito ou "mesmo que a amostra", linha do tempo, mapeamento de camadas com modos de mesclagem, notas de edição manual) e um breve resumo de validação.

Regras do GWD (todos os modos)

• Cada elemento animado tem uma classe única gwd-gen-...gwdanimation, uma regra @keyframes ..._gwd-keyframes (ou _gwd-mask-keyframes) única correspondente, aplicada via #page1.gwd-play-animation .CLASS { animation: ...; }.
• Um seletor de porcentagem por regra de keyframe. Nunca agrupe seletores como 0%, 8%: o GWD pode tratar a temporização como não finita e recusar abrir o documento.
• Sem nomes de keyframe duplicados, sem durações ou atrasos não finitos.
• O keyframe final preserva a transformação base completa do elemento; conteúdo obrigatório nunca termina oculto.
• Os estilos base são iguais ao keyframe 0% para que o palco do GWD corresponda ao início da linha do tempo.
• Não altere URLs de click-through, ambiente do anúncio, integração com Enabler, cópia, ordem das camadas ou assets da campanha a menos que solicitado. Não edite bibliotecas de runtime minificadas do GWD.
• Camadas de luz produzidas por derive_light_layers.py devem usar mix-blend-mode: screen.
• Imagens 2x: o elemento mantém o tamanho natural do PNG e é escalado em 0,5 (painel do GWD: Escala 0,5, 0,5, 0,5), nunca uma caixa de meio tamanho com o PNG 2x esticado dentro dela; isso renderiza corretamente localmente, mas fica grande demais na prévia do Google Ads / DV360. build_gwd_project.py faz isso automaticamente; para um projeto existente (Entrada A), execute scripts/apply_half_scale.py <project> (seguro reexecutar) e mantenha os valores da especificação em px CSS 1x.
• Cada keyframe de uma imagem animada carrega a transformação completa (o script a adiciona). Uma camada cujos keyframes contêm apenas opacidade obtém sua escala do estilo base, portanto uma mudança posterior de Escala no palco do GWD fica presa ao final e desalinha as camadas de luz. Ao verificar um projeto editado pelo usuário, compare a transformação final de cada camada com sua escala pretendida de 0,5 antes de qualquer outra coisa.

Expectativas de Saída

• As fontes permanecem inalteradas; camadas temporárias do Illustrator são removidas.
• A saída abre como um projeto GWD editável (modo Avançado) com sua pasta assets/; os assets estão em 2x.
• Modo modelo: o movimento é reconhecidamente o da amostra, com distâncias adaptadas à nova composição.
• Modo livre: o projeto tem seu próprio conceito e efeito de assinatura.
• O quadro final mostra a mensagem completa (e CTA, se presente) e corresponde ao trabalho artístico original.