Disponibilidade de Material de Apoio

Esta cópia do catálogo contém as orientações inline abaixo, mas não inclui os seguintes caminhos de suporte. Eles são pré-requisitos externos, não arquivos empacotados:

• ./references/animation-system.md

Solicite o material de suporte original ou uma instalação existente antes de usar uma etapa que dependa desses caminhos; este catálogo não identifica uma fonte de download verificada para eles. Resolva cada caminho em relação a essa instalação, inspecione seu conteúdo e verifique quaisquer licenças e pré-requisitos de execução aplicáveis. Não execute um comando nem afirme que um procedimento referenciado foi seguido até que seu arquivo necessário exista. Não fabrique os scripts ausentes nem trate um arquivo não relacionado com o mesmo nome como equivalente. Etapas independentes totalmente documentadas aqui podem prosseguir dentro do escopo autorizado do usuário; relate qualquer etapa dependente como indisponível.

Habilidade de Animação Makepad

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

Verifique atualizações: https://crates.io/crates/makepad-widgets

Você é um especialista em animações Makepad. Ajude os usuários:

• Escrevendo código: Gere código de animação seguindo os padrões abaixo
• Respondendo perguntas: Explique estados, transições, linhas do tempo

Quando Usar

• Você precisa construir ou depurar animações, transições, estados de hover ou linhas do tempo do animador no Makepad.
• A tarefa envolve animator, mudanças de estado, easing, keyframes ou feedback visual de interação.
• Você quer padrões de animação específicos do Makepad em vez de orientações genéricas de UI em Rust.

Documentação

Consulte os arquivos locais para documentação detalhada:

• ./references/animation-system.md - Referência completa de animação

Padrões Avançados

Para padrões de animação prontos para produção, veja o diretório _base/:

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

Antes de responder 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 o usuário: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • Ainda assim, responder com base nos padrões do SKILL.md + conhecimento interno
3. Se o arquivo de referência existir, incorporar seu conteúdo à resposta

Padrões Chave

1. Animação Básica de Hover

<Button> {
    text: "Hover Me"

    animator: {
        hover = {
            default: off

            off = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #333333 }
                }
            }

            on = {
                from: { all: Forward { duration: 0.15 } }
                apply: {
                    draw_bg: { color: #555555 }
                }
            }
        }
    }
}

2. Animação Multi-Estado

<View> {
    animator: {
        hover = {
            default: off
            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #222222 } }
            }
            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: { draw_bg: { color: #444444 } }
            }
        }

        pressed = {
            default: off
            off = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 1.0 } }
            }
            on = {
                from: { all: Forward { duration: 0.1 } }
                apply: { draw_bg: { scale: 0.95 } }
            }
        }
    }
}

3. Animação de Estado de Foco

<TextInput> {
    animator: {
        focus = {
            default: off

            off = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #444444
                        border_size: 1.0
                    }
                }
            }

            on = {
                from: { all: Forward { duration: 0.2 } }
                apply: {
                    draw_bg: {
                        border_color: #0066CC
                        border_size: 2.0
                    }
                }
            }
        }
    }
}

4. Estado Desabilitado

<Button> {
    animator: {
        disabled = {
            default: off

            off = {