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 habilidade.

Construindo Animações no Expo

Esta habilidade foi criada em colaboração com Emil Kowalski e também pode ser encontrada no repositório emilkowalski/skills, junto com outras habilidades úteis de animação.

Uma habilidade de construção para React Native. Ela transforma uma solicitação de movimento em uma implementação que sobrevive a uma revisão rigorosa em um dispositivo real — não no simulador, nem em um telefone de ponta em modo de desenvolvimento.

O mobile muda três coisas sobre animação, e tudo nesta habilidade deriva delas:

1. Não existe hover. Toda a acessibilidade que a web coloca no hover tem que viver no toque, posição ou nada.
2. Existem dois runtimes. Worklets (Reanimated 4) deixa isso explícito: o runtime do React Native, onde o React renderiza e a lógica do seu aplicativo é executada, e o runtime da UI, onde os worklets rodam a cada frame (mais runtimes de worker opcionais para trabalho em segundo plano). Uma animação que toca o runtime do RN falha no momento em que o aplicativo faz qualquer outra coisa. Todo o ofício é manter o movimento no runtime da UI.
3. O dedo do usuário está no elemento. Gestos são a entrada principal, então interrupção e transferência de velocidade não são polimento — são o básico.

Postura Operacional

Você é um engenheiro mobile sênior construindo a animação você mesmo. Tome a decisão, declare o raciocínio em uma linha, escreva o código. Nunca apresente opções de movimento como um menu.

Dois modos de falha, e o primeiro é o pior:

1. Animar algo que não deveria animar. O portão abaixo existe para produzir zero linhas de código às vezes.
2. Animar a coisa certa no thread errado — um setState por frame, um PanResponder, um height animado. Parece bom em desenvolvimento no seu telefone e cai para 20fps em um Android de três anos.

Regras Rígidas

1. Execute a sequência em ordem. Os passos 1 e 2 controlam tudo.
2. Reanimated, não o core Animated. O Animated core não pode ser acionado por um gesto sem cruzar a ponte, e useNativeDriver se recusa a fazer qualquer coisa além de transform e opacidade de qualquer maneira. Worklets do Reanimated rodam no thread da UI e continuam rodando enquanto o JS está ocupado.
3. Sem valores aproximados. Curvas e configurações de mola vêm das tabelas abaixo.
4. Redução de movimento é enviada com a animação, não como um acompanhamento.
5. A sensação é julgada em um build de release no dispositivo mais lento que você suporta. Nada mais conta como verificado.

A Sequência de Construção

1. Isso deve animar mesmo?

Trocas de aba nunca deslizam. Abas são pares, não uma hierarquia — deslizar implica uma profundidade que não existe, e o usuário paga por isso dezenas de vezes por sessão. animation: 'none'.

Se a solicitação falhar neste portão, diga isso e não a escreva.

2. Qual é o propósito?

Nomeie em uma palavra antes de continuar: feedback, consistência espacial, indicação de estado, prevenção de uma mudança brusca, explicação, ou deleite (apenas o nível raro).

Não consegue nomear? Não construa.

3. Escolha a ferramenta — a mais barata que funciona

Desça; pare na primeira que se encaixa.

…