Sortie d’AnimeJs v4

• Anime.js est une bibliothèque JavaScript rapide et polyvalente qui permet d’animer à peu près tout sur le web
• La v4 a été entièrement réécrite, avec de fortes améliorations de performances et une API modernisée
• L’expérience développeur a notamment été améliorée grâce à la prise en charge des ES Modules, à une meilleure optimisation du tree shaking et à une composition d’animations complexes plus aboutie

Résumé des principaux changements d’Anime.js V4

• Modularisation ES et changements d’API

  • Toutes les fonctionnalités sont désormais fournies sous forme d’ES modules (anime() → animate())
  • Cela favorise le tree shaking et permet de n’importer que les fonctionnalités nécessaires
  • anime({ targets }) → animate(targets, params)

• Principaux changements de l’API

  • easeInOutQuad → 'inOutQuad' (suppression du préfixe)
  • Changement des noms de fonctions de rappel :
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • Les callbacks liés aux boucles sont regroupés en une seule fonction onLoop()
  • .finished → .then() pour la gestion des Promise
  • { value: 100 } → { to: 100 } pour exprimer les valeurs
  • round: 100 → modifier: utils.round(2) pour une modification des valeurs plus souple

• Améliorations dans la composition et l’assemblage des animations

  • La valeur d’easing par défaut devient outQuad
  • En cas de doublon d’animation sur la même propriété d’une même cible, le tween précédent est annulé par défaut (composition: 'replace')
    • composition: 'none' → comportement de la v3 (imbrication autorisée)
    • composition: 'add' → permet des animations additives

• Changements liés au mode de lecture

  • direction: 'reverse' ou 'alternate' → séparation en reversed: true et alternate: true, pouvant être utilisés en même temps
  • loop: 1 → la boucle par défaut passe désormais à 0

• Améliorations du système de timeline

  • anime.timeline() → createTimeline()
  • Les animations enfants peuvent utiliser loop et reversed
  • La propriété defaults permet de définir des options communes pour les animations enfants
  • Ajout de contrôles temporels plus souples avec set(), label, stagger(), etc.
  • Les propriétés CSS transform s’enchaînent plus naturellement entre les animations enfants

• Stagger et animation SVG

  • anime.stagger() → import direct de stagger()
  • anime.path() → utilisation de svg.createMotionPath()
  • Les propriétés SVG comme strokeDashoffset et points sont aussi gérées via svg.drawLine(), svg.morphTo(), etc.

• Séparation des fonctions utilitaires

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

• Changements dans la configuration du moteur

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

• Améliorations de performances et de structure

  • Refactorisation complète du code avec une baisse de l’utilisation mémoire et de meilleures performances
  • Réécriture du système de tween pour réduire les bugs lors d’animations dupliquées
  • Prise en charge des animations additives avec composition: 'add'
  • Meilleure continuité dans la composition des CSS Transform

Nouvelles fonctionnalités

• Prise en charge de l’animation des variables CSS : ex. animate('#target', { '--radius': '20px' })
• Prise en charge des animations from : utilisation possible du format { from: 50, to: 100 }
• Prise en charge de l’alpha dans les couleurs hex : ex. format #FF4433AA
• Introduction de createTimer :
  • Alternative à setTimeout et setInterval
  • Prise en charge de onLoop, onUpdate, onComplete, etc.
  • Possibilité d’utilisation pour des boucles de jeu via le réglage de frameRate
• Prise en charge d’une fréquence d’images variable : configuration possible séparément pour chaque animation, timeline ou timer

Caractéristiques d’Anime.js

• API intuitive

  • Fournit une API d’animation puissante tout en restant simple à utiliser.
  • Prend en charge des paramètres par propriété et un système de keyframes flexible.
  • Propose des fonctions d’easing intégrées et des transformations améliorées.

• Boîte à outils SVG

  • Les utilitaires SVG intégrés facilitent la transformation de formes, le suivi de motion paths et le dessin de lignes.
  • Inclut la transformation de formes, le dessin de lignes et les motion paths.

• Observateur de scroll

  • Fournit une API Scroll Observer pour synchroniser et déclencher les animations en fonction du défilement.
  • Prend en charge différents modes de synchronisation et des seuils avancés.

• Stagger avancé

  • La fonction utilitaire Stagger intégrée permet de créer en quelques secondes des effets impressionnants.
  • Inclut le décalage temporel, le décalage de valeurs et le décalage de position dans la timeline.

• Ressorts et glisser-déposer

  • L’API Draggable permet de faire glisser, d’aimanter, de flicker et de lancer des éléments HTML.
  • Propose de nombreux réglages, des callbacks complets et des méthodes utiles.

• API Timeline

  • Une API timeline puissante permet d’orchestrer des séquences d’animation et de synchroniser les callbacks.
  • Prend en charge la synchronisation des animations, les positions temporelles avancées et les paramètres de lecture.

• Animations responsives

  • L’API Scope permet de créer facilement des animations réactives aux media queries.
  • Inclut les media queries, des éléments racine personnalisés et des méthodes de scope.

[kaydash]

Waouh, c’est énorme.

[GN⁺]

Avis sur Hacker News

• En faisant défiler cette landing page, j’ai trouvé l’expérience bien plus fluide et rapide que prévu
• C’était si bien réalisé qu’il était difficile de croire que ça existait vraiment. On aurait dit la créativité de l’internet du début des années 2000, mariée aux standards de design raffinés d’aujourd’hui
• Cette page d’accueil était l’une des animations interactives les plus complexes et les plus riches en couches que j’aie vues tourner avec autant de fluidité dans un navigateur mobile. Les FPS donnaient l’impression de jouer à Doom 2016 sur un PC puissant
• C’est la première fois que je n’ai pas détesté le scroll hijacking. En pratique, c’était vraiment très fluide
• Je trouvais déjà le site principal impressionnant, mais après avoir vu la documentation, j’ai été vraiment bluffé. Beau travail. J’ai très hâte d’essayer WAAPI
• J’aime cette page, mais sur Firefox (136.0.3) avec uBlock Origin activé, si j’ouvre https://animejs.com/documentation/scope/, l’onglet plante immédiatement. C’était une expérience amusante juste après avoir fait défiler cette animation d’intro très impressionnante
• J’aime le fait qu’on puisse saisir l’indicateur de défilement du navigateur et le faire glisser tout en voyant l’animation se mettre à jour de manière fluide (Safari mobile)
• Mon CPU est peut-être trop ancien, ou alors j’utilise un navigateur non conventionnel (Microsoft Edge), mais le site est très lent (moins d’une mise à jour par seconde), l’onglet se met immédiatement à utiliser 80 % du CPU et le ventilateur se met à souffler fort. J’utilise un Intel i7 de 8e génération
• Cela fonctionne vraiment bien sur le navigateur Android non conventionnel que j’utilise. Je peux en dire du bien, y compris pour la bibliothèque
• La landing page était impressionnante
  • Le seul problème, c’est que lorsqu’on redimensionne la fenêtre du navigateur en consultant l’exemple de mise en page responsive, le défilement revient tout en haut