AnimeJs v4 dirilis

• Anime.js adalah library JavaScript yang cepat dan serbaguna untuk menganimasikan apa pun di web
• V4 ditulis ulang sepenuhnya dari sisi arsitektur sehingga performanya meningkat signifikan, dan API-nya juga diperbarui dengan pendekatan yang lebih modern
• Khususnya, dukungan ES Module, optimasi tree shaking, dan peningkatan dalam menggabungkan animasi yang kompleks membuat pengalaman developer menjadi lebih baik

Ringkasan perubahan utama Anime.js V4

• Modularisasi ES dan perubahan API

  • Semua fitur kini disediakan sebagai ES module (anime() → animate())
  • Lebih menguntungkan untuk tree shaking sehingga hanya fitur yang diperlukan yang bisa diimpor dan digunakan
  • Formatnya berubah dari anime({ targets }) → animate(targets, params)

• Perubahan utama API

  • easeInOutQuad → 'inOutQuad' (prefiks dihapus)
  • Nama fungsi callback diubah:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • Callback terkait loop disatukan menjadi onLoop()
  • Metode penanganan Promise diubah dari .finished → .then()
  • Representasi nilai diubah dari { value: 100 } → { to: 100 }
  • Perubahan numerik menjadi lebih fleksibel dari round: 100 → modifier: utils.round(2)

• Peningkatan penyusunan dan kombinasi animasi

  • Nilai easing default diubah menjadi outQuad
  • Saat animasi untuk properti yang sama pada target yang sama tumpang tindih, tween sebelumnya secara default dibatalkan (composition: 'replace')
    • composition: 'none' → gaya V3 (mengizinkan overlap)
    • composition: 'add' → memungkinkan animasi aditif

• Perubahan terkait cara pemutaran

  • direction: 'reverse' atau 'alternate' → dipisah menjadi reversed: true, alternate: true sehingga bisa digunakan bersamaan
  • loop: 1 → loop default diubah menjadi 0

• Peningkatan sistem timeline

  • anime.timeline() → diubah menjadi createTimeline()
  • loop, reversed dapat digunakan pada animasi anak
  • Opsi umum untuk elemen anak dapat diatur melalui properti defaults
  • Ditambahkan fitur kontrol timing yang lebih fleksibel seperti set(), label, stagger()
  • Properti CSS transform tersambung lebih alami antar animasi anak

• Stagger dan animasi SVG

  • anime.stagger() → diimpor dan digunakan langsung sebagai stagger()
  • anime.path() → menggunakan svg.createMotionPath()
  • Properti SVG seperti strokeDashoffset, points, dan lainnya juga ditangani lewat svg.drawLine(), svg.morphTo(), dan sebagainya

• Pemisahan fungsi utilitas

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

• Perubahan pengaturan engine

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

• Peningkatan performa dan struktur

  • Refactoring seluruh kode mengurangi penggunaan memori dan meningkatkan performa
  • Penulisan ulang sistem tween mengurangi bug saat animasi tumpang tindih
  • Dukungan animasi aditif melalui composition: 'add'
  • Keterhubungan yang lebih alami saat menyusun CSS Transform

Fitur baru

• Dukungan animasi variabel CSS: contoh animate('#target', { '--radius': '20px' })
• Dukungan animasi from: dapat menggunakan format { from: 50, to: 100 }
• Dukungan alpha pada warna hex: mendukung format seperti #FF4433AA
• Pengenalan fitur createTimer:
  • Pengganti setTimeout, setInterval
  • Dapat menggunakan onLoop, onUpdate, onComplete, dan lainnya
  • Bisa dimanfaatkan untuk game loop dan sejenisnya dengan mengatur frameRate
• Dukungan frame rate variabel: dapat diatur terpisah untuk tiap animasi, timeline, dan timer

Karakteristik Anime.js

• API yang intuitif

  • Menyediakan API animasi yang mudah digunakan namun tetap kuat.
  • Mendukung parameter per properti dan sistem keyframe yang fleksibel.
  • Menyediakan easing bawaan dan kemampuan transform yang ditingkatkan.

• Kumpulan alat SVG

  • Melalui utilitas SVG bawaan, deformasi bentuk, motion path, dan menggambar garis dapat dilakukan dengan mudah.
  • Mencakup deformasi bentuk, line drawing, dan motion path.

• Scroll observer

  • Menyediakan Scroll Observer API untuk menyinkronkan dan memicu animasi berdasarkan scroll.
  • Mendukung berbagai mode sinkronisasi dan threshold tingkat lanjut.

• Staggering tingkat lanjut

  • Dengan fungsi utilitas Stagger bawaan, efek yang mengesankan bisa dibuat hanya dalam hitungan detik.
  • Mencakup time staggering, value staggering, dan timeline position staggering.

• Fitur spring dan drag

  • Melalui Draggable API, elemen HTML dapat di-drag, di-snap, di-flick, dan dilempar.
  • Menyediakan beragam pengaturan, callback yang komprehensif, dan method yang berguna.

• API timeline

  • Dengan API timeline yang kuat, urutan animasi dapat diatur dan callback dapat disinkronkan.
  • Mendukung sinkronisasi animasi, posisi waktu tingkat lanjut, dan pengaturan pemutaran.

• Animasi responsif

  • Dengan Scope API, animasi yang merespons media query dapat dibuat dengan mudah.
  • Mencakup media query, elemen root kustom, dan method scope.

[kaydash]

Wah, luar biasa.

[GN⁺]

Komentar Hacker News

• Saat menggulir landing page itu, rasanya jauh lebih mulus dan cepat dari yang saya perkirakan
• Hasilnya dibuat sebaik ini sampai sulit dipercaya ini benar-benar ada. Rasanya seperti kreativitas internet awal 2000-an bertemu dengan standar desain modern yang rapi
• Homepage itu adalah salah satu animasi interaktif paling kompleks dan berlapis yang pernah saya lihat berjalan sangat mulus di browser mobile. FPS-nya terasa seperti Doom 2016 yang berjalan di PC kencang
• Ini pertama kalinya saya tidak membenci scroll hijacking. Benar-benar sangat mulus
• Saya sudah mengira situs utamanya luar biasa, tetapi setelah melihat dokumentasinya saya jadi benar-benar takjub. Kerja bagus. Saya sangat antusias untuk mencoba WAAPI
• Saya suka halaman ini, tetapi di Firefox (136.0.3) dengan uBlock Origin aktif, mengakses https://animejs.com/documentation/scope/ membuat tab langsung crash. Pengalaman yang cukup lucu tepat setelah menggulir animasi intro yang sangat mengesankan
• Saya suka bahwa indikator scroll browser bisa dipegang dan diseret, dan animasinya tetap diperbarui dengan mulus (Safari mobile)
• Mungkin CPU saya terlalu tua atau saya memakai browser yang tidak umum (Microsoft Edge), tetapi situs ini sangat lambat (pembaruan kurang dari 1 kali per detik), dan tab langsung mulai memakai 80% CPU sehingga kipas berputar kencang. Saya memakai Intel i7 generasi ke-8
• Di browser Android non-standar yang saya pakai, ini bekerja sangat baik. Saya bisa memberi penilaian bagus untuk library ini
• Landing page-nya menakjubkan
  • Satu-satunya masalah adalah saat memeriksa contoh layout responsif, jika ukuran jendela browser diubah maka scroll akan di-reset ke bagian paling atas