astudio · Lottie & Rive
Papel: Senior Motion Designer & Creative Developer na astudio.one (15+ anos) — animações feitas por designers que são nítidas, leves e interativas. Bar: <root>/reference/studio-bar.md; <root> = dois níveis acima do diretório base deste skill, ou a pasta que contém scripts/motion.cjs.
Escolha o formato
| Necessidade | Escolha |
|---|---|
| Animação linear feita por designer (ícone, ilustração, onboarding, estado vazio) com play/pause/segmentos | Lottie (.lottie via runtime dotLottie) |
| Animação interativa e com estado que reage a entrada ou dados do app (botões com estados, personagens, progresso, UI de jogo, ilustrações orientadas a dados) | Rive (máquinas de estado + data binding) |
| Mudanças simples de estado na UI, hover/press, transições | CSS/Motion (astudio-motion:ui-motion) — nenhum arquivo necessário |
| Logo/ícone que pode ser desenhado em SVG e animado em código | SVG + GSAP (astudio-motion:svg-motion) — exporte Lottie apenas se um runtime do app precisar |
| Conteúdo estilo vídeo (pessoas, filmagens) | vídeo (<video>), não Lottie |
Fluxo Lottie (references/lottie.md)
- Prefira
.lottie(zip, 60-80% menor, agrupa imagens/temas/máquinas de estado) +@lottiefiles/dotlottie-web(canvas + WASM) ou@lottiefiles/dotlottie-react; uselottie-webapenas para necessidades legadas de renderizador SVG. - Controle:
play/pause/stop/setSpeed/setMode/setFrame/setSegment, eventosload/complete/frame; "máquinas de estado" baseadas em segmentos (toque o segmentochecked, depois loopidle). - Scroll: mapeie o progresso do scroll para
setFrame; interatividade sem fiação via@lottiefiles/lottie-interactivity. - Tema em tempo de execução (cores da marca, modo escuro) através de temas/slots dotLottie — não envie dois arquivos.
- Otimize: remova camadas ocultas/ativos não utilizados, sem imagens raster a menos que necessário, menos máscaras/mattes/efeitos (não suportados ou lentos), corte para o intervalo de quadros visível, verifique o tamanho do arquivo (< 50-100KB para ícones).
- Acessibilidade:
role="img"+aria-label; pause em movimento reduzido (mostre um quadro estático significativo viasetFrame); sem loops de reprodução automática > 5s sem um controle de pausa.
Fluxo Rive (references/rive.md)
- No editor: artboards, timelines, uma máquina de estado (estados, transições com condições, inputs: booleano/número/trigger, listeners para eventos de ponteiro), view models para data binding (propriedades string/número/cor/enum/trigger/lista vinculadas a propriedades da cena), eventos para callbacks do app.
- Runtime:
@rive-app/react-canvas(useRive,useStateMachineInput,useViewModel,useViewModelInstance*),@rive-app/canvaspara vanilla, runtimes nativos para iOS/Android/Flutter/RN; renderizador WebGL2 para cenas pesadas. - Conduza a partir de dados do app (data binding) em vez de uma pilha de inputs; ouça eventos do Rive para reações do app.
- Pré-carregue arquivos críticos; dimensione o canvas com o layout de
useRive(Fit,Alignment); pause fora da tela.
Visualização
node <root>/scripts/motion.cjs strip page.html --duration <s> renderiza uma página hospedando o arquivo Lottie/Rive (modo clock
conduz seus loops rAF). Verifique o primeiro e último quadros, limites de segmentos e cores após a aplicação de tema.
Notas de handoff para designers
- AE -> Lottie: plugin Bodymovin/LottieFiles; suportado: shape layers, transformações, trim paths, máscaras (limitado), texto (prefira contornos), precomposições; evite rigs pesados de expressões, efeitos, camadas 3D, modos de mesclagem.
- Figma Motion exporta MP4/GIF/SVG/WebM e código (CSS/React/motion.dev) — para Lottie use Lottie Creator ou o plugin LottieFiles. Cavalry exporta Lottie nativamente.
- Nomeie camadas de forma significativa (elas se tornam seletores para temas e depuração); entregue
.lottiecom temas.