Quando Usar

• Use quando este fluxo de trabalho upstream corresponder ao objetivo declarado do usuário.
• Use quando a tarefa exigir os procedimentos documentados nesta skill.

Skill de Animação Makepad 2.0

Versão: makepad-widgets (branch dev) | Última Atualização: 2026-03-03

Visão Geral

O sistema Animator controla variáveis de shader instance() ao longo do tempo, permitindo efeitos de hover, transições e animações em loop. Ele usa trilhas de animação independentes chamadas "grupos" que rodam simultaneamente.

Documentação

Consulte os arquivos locais para documentação detalhada:

• ./references/animator-reference.md - API completa do Animator, tipos de reprodução, funções de suavização, exemplos

IMPORTANTE: Verificação de Completude da Documentação

Antes de responder a perguntas, Claude DEVE:

1. Ler o(s) arquivo(s) de referência relevante(s) listado(s) acima
2. Se a leitura do arquivo falhar ou o arquivo estiver vazio:
   • Informar ao usuário: "Documentos de referência incompletos. Ainda respondendo com base nos padrões de SKILL.md."
   • Ainda responder com base nos padrões de SKILL.md + conhecimento interno
3. Se o arquivo de referência existir, incorporar seu conteúdo à resposta

Crítico: Suporte ao Widget Animator

NEM todos os widgets suportam animator! Adicionar animator: Animator{...} a um widget não suportado é silenciosamente ignorado - sem erro, sem animação, nada acontece.

Widgets que SUPORTAM Animator

View, SolidView, RoundedView, ScrollXView, ScrollYView, ScrollXYView, Button, ButtonFlat, ButtonFlatter, CheckBox, Toggle, RadioButton, LinkLabel, TextInput

Widgets que NÃO Suportam Animator

Label, H1-H4, P, TextBox, Image, Icon, Markdown, Html, Slider, DropDown, Splitter, Hr, Filler

Para animar um Label: Envolva-o em uma View com o animator:

View{
    width: Fit height: Fit
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 0.0}} }
            on: AnimatorState{ from: {all: Forward {duration: 0.15}} apply: {draw_bg: {hover: 1.0}} }
        }
    }
    label := Label{text: "Animated via parent"}
}

Estrutura do Animator

animator: Animator{
    <group_name>: {
        default: @<state_name>
        <state_name>: AnimatorState{
            from: { ... }
            ease: <EaseFunction>
            redraw: true
            apply: { ... }
        }
        <state_name>: AnimatorState{ ... }
    }
    <group_name>: { ... }
}

Grupos

Cada grupo é uma trilha de animação independente. Grupos comuns:

Múltiplos grupos animam simultaneamente sem interferir.

O Bloco from

Controla o tempo da transição. As chaves são os estados dos quais a transição está saindo, ou all como um "catch-all".

// From any state, animate over 0.2 seconds
from: {all: Forward {duration: 0.2}}

// Instant from any state
from: {all: Snap}

// Different timing depending on origin
from: {
    all: Forward {duration: 0.1}
    down: Forward {duration: 0.01}
}

Tipos de Reprodução

Funções de Suavização (Ease Functions)

Uso: ease: OutCubic no AnimatorState (opcional, padrão é Linear).

O Bloco apply

…