Veröffentlichung von Anime.js v4

• Anime.js ist eine schnelle und vielseitige JavaScript-Bibliothek, mit der sich im Web praktisch alles animieren lässt
• V4 wurde in ihrer gesamten Struktur neu geschrieben, was die Performance deutlich verbessert, und auch die API wurde auf modernere Weise überarbeitet
• Besonders durch ES-Module-Unterstützung, Tree-Shaking-Optimierung und Verbesserungen bei der Kombination komplexer Animationen wurde die Developer Experience verbessert

Zusammenfassung der wichtigsten Änderungen in Anime.js V4

• ES-Modularisierung und API-Änderungen

  • Alle Funktionen werden jetzt als ES-Module bereitgestellt (anime() → animate())
  • Das ist vorteilhaft für Tree Shaking, sodass nur die benötigten Funktionen importiert und verwendet werden können
  • anime({ targets }) → geändert zu animate(targets, params)

• Wichtige API-Änderungen

  • easeInOutQuad → 'inOutQuad' (Präfix entfernt)
  • Umbenennung der Callback-Funktionen:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • Callbacks rund um Loops wurden in onLoop() zusammengeführt
  • .finished → geändert zu .then() für die Promise-Behandlung
  • { value: 100 } → geändert zu { to: 100 } zur Darstellung von Werten
  • round: 100 → modifier: utils.round(2), wodurch sich Zahlen flexibler verarbeiten lassen

• Verbesserungen bei Aufbau und Kombination von Animationen

  • Der Standardwert für Easing wurde zu outQuad geändert
  • Bei doppelten Animationen derselben Eigenschaft auf demselben Ziel wird der vorherige Tween standardmäßig abgebrochen (composition: 'replace')
    • composition: 'none' → Verhalten wie in V3 (Verschachtelung erlaubt)
    • composition: 'add' → additive Animationen sind möglich

• Änderungen beim Abspielverhalten

  • direction: 'reverse' oder 'alternate' → aufgeteilt in reversed: true, alternate: true, sodass beides gleichzeitig verwendet werden kann
  • loop: 1 → der Standard-Loop wurde auf 0 geändert

• Verbesserungen am Timeline-System

  • anime.timeline() → geändert zu createTimeline()
  • In Kind-Animationen können loop und reversed verwendet werden
  • Mit der Eigenschaft defaults lassen sich gemeinsame Optionen für Kind-Animationen festlegen
  • Flexiblere Timing-Steuerung durch zusätzliche Funktionen wie set(), label und stagger()
  • CSS-Transform-Eigenschaften gehen zwischen Kind-Animationen natürlicher ineinander über

• Stagger- und SVG-Animationen

  • anime.stagger() → direkt stagger() importieren und verwenden
  • anime.path() → svg.createMotionPath() verwenden
  • SVG-Eigenschaften wie strokeDashoffset und points werden ebenfalls über svg.drawLine(), svg.morphTo() usw. verarbeitet

• Ausgliederung von Utility-Funktionen

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

• Änderungen an den Engine-Einstellungen

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

• Performance- und Strukturverbesserungen

  • Durch ein vollständiges Refactoring des Codes wurden der Speicherverbrauch gesenkt und die Performance verbessert
  • Durch die Neuschreibung des Tween-Systems treten bei doppelten Animationen weniger Bugs auf
  • Unterstützung für additive Animationen mit composition: 'add'
  • Verbesserte natürliche Übergänge beim Aufbau von CSS-Transforms

Neue Funktionen

• Unterstützung für CSS-Variablen-Animationen: z. B. animate('#target', { '--radius': '20px' })
• Unterstützung für from-Animationen: Verwendung in der Form { from: 50, to: 100 }
• Alpha-Unterstützung für hex-Farben: z. B. Format #FF4433AA
• Einführung von createTimer:
  • als Ersatz für setTimeout und setInterval
  • onLoop, onUpdate, onComplete usw. können verwendet werden
  • durch Steuerung von frameRate auch für Game Loops nutzbar
• Unterstützung für variable Framerates: individuell pro Animation, Timeline und Timer konfigurierbar

Merkmale von Anime.js

• Intuitive API

  • Bietet eine leicht nutzbare und zugleich leistungsstarke Animations-API.
  • Unterstützt parameterbasierte Eigenschaften und ein flexibles Keyframe-System.
  • Bietet integrierte Easing-Funktionen und verbesserte Transform-Funktionen.

• SVG-Toolset

  • Mit den integrierten SVG-Utilities lassen sich Form-Morphing, Motion Paths und Linienzeichnungen einfach umsetzen.
  • Umfasst Form-Morphing, Linienzeichnung und Motion-Path-Funktionen.

• Scroll Observer

  • Bietet eine Scroll Observer API, mit der sich Animationen scrollabhängig synchronisieren und auslösen lassen.
  • Unterstützt verschiedene Synchronisationsmodi und erweiterte Schwellenwerte.

• Erweitertes Staggering

  • Mit der integrierten stagger-Utility lassen sich in Sekunden beeindruckende Effekte erzeugen.
  • Umfasst zeitliches Staggering, Werte-Staggering und Timeline-Positions-Staggering.

• Spring- und Drag-Funktionen

  • Über die Draggable API können HTML-Elemente gezogen, eingerastet, geschnippt und geworfen werden.
  • Bietet vielfältige Einstellungen, umfassende Callbacks und nützliche Methoden.

• Timeline-API

  • Mit der leistungsstarken Timeline-API lassen sich Animationssequenzen steuern und Callbacks synchronisieren.
  • Unterstützt Animationssynchronisierung, erweiterte Zeitpositionen und Wiedergabeeinstellungen.

• Reaktive Animationen

  • Mit der Scope API lassen sich leicht auf Media Queries reagierende Animationen erstellen.
  • Umfasst Media Queries, benutzerdefinierte Root-Elemente und Scope-Methoden.

[kaydash]

Wow, das ist unglaublich.

[GN⁺]

Hacker-News-Kommentare

• Beim Scrollen durch die Landingpage fühlte sie sich deutlich flüssiger und schneller an, als ich erwartet hatte.
• Das war so gut gemacht, dass ich kaum glauben konnte, dass so etwas tatsächlich existiert. Es fühlte sich an wie die Kreativität des Internets der frühen 2000er, kombiniert mit den heutigen Maßstäben für elegantes Design.
• Die Homepage war eine der komplexesten und vielschichtigsten interaktiven Animationen, die ich je in einem mobilen Browser gesehen habe, und sie lief dabei extrem flüssig. Die FPS fühlten sich an wie bei Doom 2016 auf einem leistungsstarken PC.
• Das ist das erste Mal, dass mich Scroll Hijacking nicht gestört hat. Es war tatsächlich sehr flüssig.
• Ich fand die Hauptseite schon erstaunlich, aber nachdem ich die Dokumentation gesehen habe, war ich wirklich beeindruckt. Gut gemacht. Ich freue mich sehr darauf, WAAPI auszuprobieren.
• Ich mag diese Seite, aber wenn ich in Firefox (136.0.3) mit aktiviertem uBlock Origin https://animejs.com/documentation/scope/ aufrufe, stürzt der Tab sofort ab. Das war direkt nach dem Scrollen durch die sehr beeindruckende Intro-Animation eine interessante Erfahrung.
• Mir gefällt, dass man den Scroll-Indikator des Browsers greifen und ziehen kann und die Animation trotzdem flüssig aktualisiert wird (Safari Mobile).
• Vielleicht ist meine CPU zu alt oder ich verwende einen untypischen Browser (Microsoft Edge), aber die Website ist sehr langsam (weniger als ein Update pro Sekunde), der Tab beginnt sofort, 80 % der CPU zu nutzen, und der Lüfter dreht laut auf. Ich nutze einen Intel i7 der 8. Generation.
• In meinem untypischen Android-Browser funktioniert es wirklich gut. Das spricht für die Bibliothek.
• Die Landingpage war erstaunlich.
  • Das einzige Problem war, dass beim Überprüfen der Beispiele für responsive Layouts die Scroll-Position beim Ändern der Browserfenstergröße wieder ganz nach oben zurückgesetzt wird.