Lanzamiento de AnimeJs v4

• Anime.js es una biblioteca de JavaScript rápida y versátil para animar cualquier cosa en la web
• La V4 fue reescrita por completo, mejorando notablemente el rendimiento y modernizando la API
• En particular, mejora la experiencia de desarrollo con soporte para ES Modules, optimización para tree shaking y mejor composición de animaciones complejas

Resumen de los principales cambios en Anime.js V4

• Modularización en ES y cambios en la API

  • Todas las funciones ahora se ofrecen como módulos ES (anime() → animate())
  • Favorece el tree shaking, por lo que es posible importar y usar solo las funciones necesarias
  • anime({ targets }) → cambia a la forma animate(targets, params)

• Cambios principales en la API

  • easeInOutQuad → 'inOutQuad' (se elimina el prefijo)
  • Cambio en los nombres de las funciones callback:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • Los callbacks relacionados con loops se unifican en onLoop()
  • .finished → cambia a .then() para el manejo con Promise
  • { value: 100 } → { to: 100 } cambia la forma de expresar valores
  • round: 100 → modifier: utils.round(2) permite modificar valores numéricos con más flexibilidad

• Mejoras en la configuración y composición de animaciones

  • El easing predeterminado cambia a outQuad
  • Cuando se duplican animaciones de la misma propiedad sobre el mismo objetivo, por defecto se cancela el tween anterior (composition: 'replace')
    • composition: 'none' → comportamiento de V3 (permite superposición)
    • composition: 'add' → permite aplicar animaciones aditivas

• Cambios relacionados con la reproducción

  • direction: 'reverse' o 'alternate' → se separa en reversed: true, alternate: true, y ahora pueden usarse al mismo tiempo
  • loop: 1 → el loop predeterminado cambia a 0

• Mejoras en el sistema de Timeline

  • anime.timeline() → cambia a createTimeline()
  • En las animaciones hijas ya se pueden usar loop y reversed
  • La propiedad defaults permite definir opciones comunes para los elementos hijos
  • Se agregan controles de tiempo más flexibles como set(), label, stagger(), etc.
  • Las propiedades de transform de CSS fluyen de manera más natural entre animaciones hijas

• Stagger y animaciones SVG

  • anime.stagger() → ahora se importa y usa stagger() directamente
  • anime.path() → usar svg.createMotionPath()
  • Propiedades SVG como strokeDashoffset y points ahora se manejan con svg.drawLine(), svg.morphTo(), etc.

• Separación de funciones utilitarias

  • anime.get() → utils.get()
  • anime.set() → utils.set()
  • anime.remove() → utils.remove()
  • anime.round() → utils.round()

• Cambios en la configuración del motor

  • anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = false
  • anime.speed = 0.5 → engine.playbackRate = 0.5

• Mejoras de rendimiento y estructura

  • Refactorización completa del código para reducir el uso de memoria y mejorar el rendimiento
  • Reescritura del sistema de tweens para reducir bugs en animaciones duplicadas
  • Soporte para animaciones aditivas con composition: 'add'
  • Mejor continuidad natural al componer transformaciones CSS

Nuevas funciones

• Soporte para animación de variables CSS: ej. animate('#target', { '--radius': '20px' })
• Soporte para animaciones from: se puede usar la forma { from: 50, to: 100 }
• Soporte para alpha en colores hex: por ejemplo, formato #FF4433AA
• Incorporación de createTimer:
  • reemplaza setTimeout y setInterval
  • permite usar onLoop, onUpdate, onComplete, etc.
  • se puede usar en game loops y casos similares ajustando frameRate
• Soporte para tasa de cuadros variable: se puede configurar individualmente por animación, timeline y timer

Características de Anime.js

• API intuitiva

  • Ofrece una API de animación potente y fácil de usar.
  • Soporta parámetros por propiedad y un sistema flexible de keyframes.
  • Incluye funciones de easing integradas y capacidades de transformación mejoradas.

• Conjunto de herramientas SVG

  • Sus utilidades SVG integradas permiten hacer fácilmente morphing de formas, seguimiento de motion paths y dibujo de líneas.
  • Incluye morphing de formas, dibujo de líneas y motion path.

• Scroll Observer

  • Ofrece una API de Scroll Observer para sincronizar y activar animaciones según el scroll.
  • Soporta varios modos de sincronización y umbrales avanzados.

• Stagger avanzado

  • La función utilitaria Stagger integrada permite crear efectos sorprendentes en segundos.
  • Incluye stagger temporal, stagger de valores y stagger de posición en timelines.

• Funciones de spring y drag

  • La API Draggable permite arrastrar, ajustar, hacer flick y lanzar elementos HTML.
  • Ofrece múltiples configuraciones, callbacks completas y métodos útiles.

• API de Timeline

  • La potente API de Timeline permite coordinar secuencias de animación y sincronizar callbacks.
  • Soporta sincronización de animaciones, posiciones de tiempo avanzadas y opciones de reproducción.

• Animaciones responsivas

  • Con la API Scope es posible crear fácilmente animaciones que respondan a media queries.
  • Incluye media queries, elementos raíz personalizados y métodos de scope.

[kaydash]

Guau, impresionante

[GN⁺]

Comentarios de Hacker News

• Al hacer scroll en esa landing page, se sintió mucho más fluida y rápida de lo que esperaba
• Estaba tan bien hecha que costaba creer que realmente existiera. Se sentía como si la creatividad del internet de principios de los 2000 se hubiera encontrado con los estándares de diseño refinados de hoy
• Esa página principal era una de las animaciones interactivas más complejas y con más capas que he visto correr con tanta fluidez en un navegador móvil. El FPS se sentía como Doom 2016 corriendo en una PC potente
• Esta fue la primera vez que no me molestó el scroll hijacking. De hecho, se sentía muy fluido
• Ya pensaba que el sitio principal era increíble, pero después de ver la documentación de verdad me impresionó. Buen trabajo. Tengo muchas ganas de probar WAAPI
• Me gusta esta página, pero si entro a <a href="https:&#x2F;&#x2F;animejs.com&#x2F;documentation&#x2F;scope&#x2F;" rel="nofollow">https://animejs.com/documentation/scope/</a>; con uBlock Origin activado en Firefox (136.0.3), la pestaña se crashea de inmediato. Fue una experiencia curiosa justo después de hacer scroll por esa animación de introducción tan impresionante
• Me gusta que puedes agarrar y arrastrar el indicador de scroll del navegador y la animación se actualiza de forma suave (Safari mobile)
• Puede que mi CPU sea demasiado vieja o que esté usando un navegador no tradicional (Microsoft Edge), pero el sitio web va <i>muy</i> lento (menos de 1 actualización por segundo), la pestaña empieza a usar inmediatamente el 80% del CPU y el ventilador se dispara. Estoy usando un Intel i7 de 8.ª generación
• Funciona realmente bien en el navegador Android no tradicional que uso. No puedo más que hablar bien de la librería
• La landing page fue asombrosa
  • El único problema fue que, al revisar el ejemplo de layout responsivo, si redimensionas la ventana del navegador, el scroll se reinicia hasta arriba