- Anime.js é uma biblioteca JavaScript rápida e versátil capaz de animar praticamente tudo na web
- A V4 teve toda a sua estrutura reescrita, melhorando bastante o desempenho e modernizando a API
- Em especial, o suporte a ES Modules, a otimização para tree shaking e as melhorias na composição de animações complexas aprimoram a experiência do desenvolvedor
Resumo das principais mudanças no Anime.js V4
-
Modularização em ES e mudanças na API
- Todos os recursos agora são fornecidos como ES modules (
anime() → animate())
- Isso favorece o tree shaking, permitindo importar e usar apenas o que for necessário
- O formato mudou de
anime({ targets }) para animate(targets, params)
-
Principais mudanças na API
easeInOutQuad → 'inOutQuad' (prefixo removido)- Mudança nos nomes das funções de callback:
begin() → onBegin()update() → onUpdate()complete() → onComplete()change() → onRender()- Callbacks relacionados a loop foram unificados em
onLoop()
.finished → .then() para o tratamento com Promise- A forma de representar valores mudou de
{ value: 100 } para { to: 100 }
round: 100 → modifier: utils.round(2), permitindo ajustar valores numéricos com mais flexibilidade
-
Melhorias na configuração e composição de animações
- O easing padrão foi alterado para
outQuad
- Quando há animações duplicadas da mesma propriedade no mesmo alvo, o tween anterior é cancelado por padrão (
composition: 'replace')
composition: 'none' → modo da V3 (permite sobreposição)composition: 'add' → permite animações aditivas
-
Mudanças no modo de reprodução
direction: 'reverse' ou 'alternate' → separado em reversed: true e alternate: true, podendo ser usados ao mesmo tempoloop: 1 → o loop padrão agora é 0
-
Melhorias no sistema de Timeline
anime.timeline() → createTimeline()- Agora é possível usar
loop e reversed em animações filhas
- A propriedade
defaults permite definir opções comuns para os filhos
- Foram adicionados recursos de controle de tempo mais flexíveis, como
set(), label e stagger()
- As propriedades de CSS transform passam a se conectar de forma mais natural entre animações filhas
-
Stagger e animações SVG
anime.stagger() → importar e usar stagger() diretamenteanime.path() → usar svg.createMotionPath()- Propriedades SVG como
strokeDashoffset e points também passam a ser tratadas com svg.drawLine() e svg.morphTo()
-
Separação das funções utilitárias
anime.get() → utils.get()anime.set() → utils.set()anime.remove() → utils.remove()anime.round() → utils.round()
-
Mudanças nas configurações do engine
anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = falseanime.speed = 0.5 → engine.playbackRate = 0.5
-
Melhorias de desempenho e estrutura
- Refatoração completa do código, reduzindo o uso de memória e melhorando o desempenho
- Reescrita do sistema de tween, diminuindo bugs em animações duplicadas
- Suporte a animações aditivas com
composition: 'add'
- Melhor continuidade ao compor CSS Transform
Novos recursos
- Suporte a animação de variáveis CSS: ex.
animate('#target', { '--radius': '20px' })
- Suporte a animações from: agora é possível usar o formato
{ from: 50, to: 100 }
- Suporte a alpha em cores hex: ex. formato
#FF4433AA
- Introdução do recurso createTimer:
- Pode substituir
setTimeout e setInterval
- Permite usar
onLoop, onUpdate, onComplete etc.
- Pode ser usado em game loops e casos similares com ajuste de
frameRate
- Suporte a taxa de quadros variável: configuração individual para cada animação, timeline e timer
Características do Anime.js
-
API intuitiva
- Oferece uma API de animação poderosa e fácil de usar.
- Suporta parâmetros por propriedade e um sistema flexível de keyframes.
- Fornece easing embutido e recursos aprimorados de transformação.
-
Conjunto de ferramentas para SVG
- Utilitários SVG embutidos facilitam deformação de formas, motion path e desenho de linhas.
- Inclui morphing de formas, desenho de linhas e recursos de motion path.
-
Observador de rolagem
- Oferece uma API de Scroll Observer para sincronizar e disparar animações de acordo com a rolagem.
- Suporta vários modos de sincronização e limiares avançados.
-
Stagger avançado
- A função utilitária Stagger embutida permite criar efeitos impressionantes em segundos.
- Inclui stagger de tempo, de valor e de posição na timeline.
-
Recursos de spring e drag
- Com a API Draggable, é possível arrastar, encaixar, impulsionar e arremessar elementos HTML.
- Oferece várias opções de configuração, callbacks abrangentes e métodos úteis.
-
API de Timeline
- A poderosa API de Timeline permite organizar sequências de animação e sincronizar callbacks.
- Suporta sincronização de animações, posicionamento avançado no tempo e configurações de reprodução.
-
Animações responsivas
- Com a Scope API, é possível criar animações que reagem facilmente a media queries.
- Inclui media queries, elementos raiz personalizados e métodos de escopo.
2 comentários
Uau, isso é impressionante
Comentários no Hacker News