Lançamento do AnimeJs v4

• 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 tempo
  • loop: 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() diretamente
  • anime.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 = false
  • anime.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.

[kaydash]

Uau, isso é impressionante

[GN⁺]

Comentários no Hacker News

• Ao rolar aquela landing page, pareceu muito mais suave e rápida do que eu esperava
• Foi tão bem feito que é difícil acreditar que isso realmente existe. Pareceu como se a criatividade da internet do começo dos anos 2000 tivesse encontrado o padrão de design refinado de hoje
• Aquela homepage foi uma das animações interativas mais complexas e com mais camadas que já vi rodando de forma muito suave em um navegador mobile. O FPS parecia Doom 2016 rodando em um PC potente
• Foi a primeira vez que não odiei scroll hijacking. Na verdade, estava muito suave
• Eu já achava o site principal impressionante, mas depois de ver a documentação fiquei realmente surpreso. Bom trabalho. Estou bem animado para experimentar o WAAPI
• Gosto desta página, mas no Firefox (136.0.3) com o ublock origin ativado, ao acessar https://animejs.com/documentation/scope/, a aba trava imediatamente. Foi uma experiência curiosa logo depois de rolar por aquela animação de introdução muito impressionante
• Gosto do fato de que dá para segurar e arrastar o indicador de rolagem do navegador, e a animação é atualizada de forma suave (safari mobile)
• Meu CPU pode ser velho demais, ou talvez eu esteja usando um navegador não convencional (Microsoft Edge), mas o site está muito lento (menos de 1 atualização por segundo), a aba começa imediatamente a usar 80% da CPU e a ventoinha dispara. Estou usando um Intel i7 de 8ª geração
• Funciona muito bem no navegador Android não convencional que eu uso. Só posso falar bem da biblioteca
• A landing page foi impressionante
  • O único problema foi que, ao verificar o exemplo de layout responsivo, redimensionar a janela do navegador fazia a rolagem voltar para o topo