AnimeJs v4 yayımlandı

• Anime.js, web’de her şeyi animasyonlu hale getirebilen hızlı ve çok yönlü bir JavaScript kütüphanesidir
• V4, tüm yapıyı baştan yazarak performansı büyük ölçüde artırdı ve API’yi de daha modern bir yaklaşımla yeniden düzenledi
• Özellikle ES Module desteği, tree-shaking optimizasyonu ve karmaşık animasyon bileşimlerindeki iyileştirmeler sayesinde geliştirici deneyimi gelişti

Anime.js V4’teki başlıca değişikliklerin özeti

• ES modüler yapı ve API değişiklikleri

  • Artık tüm işlevler ES modül olarak sunuluyor (anime() → animate())
  • Tree-shaking için daha elverişli olduğundan yalnızca gereken işlevler içe aktarılıp kullanılabiliyor
  • anime({ targets }) → animate(targets, params) biçimine dönüştürüldü

• Başlıca API değişiklikleri

  • easeInOutQuad → 'inOutQuad' (önek kaldırıldı)
  • Callback işlev adları değişti:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • Döngü ile ilgili callback’ler tek bir onLoop() altında birleştirildi
  • Promise işleme yöntemi .finished → .then() olarak değişti
  • Değer gösterimi { value: 100 } → { to: 100 } olarak değiştirildi
  • round: 100 → modifier: utils.round(2) ile sayısal değerler daha esnek biçimde değiştirilebiliyor

• Animasyon kurma ve bileşim iyileştirmeleri

  • Varsayılan easing değeri outQuad olarak değişti
  • Aynı hedefte aynı özellik için animasyonlar çakıştığında önceki tween varsayılan olarak iptal ediliyor (composition: 'replace')
    • composition: 'none' → V3 yöntemi (iç içe binmeye izin verir)
    • composition: 'add' → toplamsal animasyon uygulanabiliyor

• Oynatma biçimiyle ilgili değişiklikler

  • direction: 'reverse' veya 'alternate' → reversed: true, alternate: true olarak ayrıldı ve artık aynı anda kullanılabiliyor
  • loop: 1 → varsayılan döngü değeri 0 olarak değişti

• Timeline sistemindeki iyileştirmeler

  • anime.timeline() → createTimeline() olarak değişti
  • Alt animasyonlarda loop, reversed kullanılabiliyor
  • defaults özelliğiyle alt öğeler için ortak seçenekler tanımlanabiliyor
  • set(), label, stagger() gibi daha esnek zamanlama denetimleri eklendi
  • CSS transform özellikleri alt animasyonlar arasında daha doğal şekilde devam ediyor

• Stagger ve SVG animasyonları

  • anime.stagger() → doğrudan stagger() içe aktarılarak kullanılıyor
  • anime.path() → svg.createMotionPath() kullanılıyor
  • strokeDashoffset, points gibi SVG özellikleri de svg.drawLine(), svg.morphTo() gibi işlevlerle işleniyor

• Yardımcı işlevlerin ayrılması

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

• Motor ayarları değişiklikleri

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

• Performans ve yapı iyileştirmeleri

  • Tüm kodun refactor edilmesiyle bellek kullanımı azaldı ve performans arttı
  • Tween sisteminin yeniden yazılmasıyla çakışan animasyonlardaki hatalar azaldı
  • composition: 'add' ile toplamsal animasyon desteği geldi
  • CSS Transform oluşturulurken doğal süreklilik iyileştirildi

Yeni özellikler

• CSS değişken animasyonu desteği: ör. animate('#target', { '--radius': '20px' })
• from animasyonu desteği: { from: 50, to: 100 } biçimi kullanılabiliyor
• hex renkte alpha desteği: ör. #FF4433AA biçimi destekleniyor
• createTimer özelliği eklendi:
  • setTimeout, setInterval yerine kullanılabiliyor
  • onLoop, onUpdate, onComplete gibi callback’ler kullanılabiliyor
  • frameRate ayarıyla oyun döngüsü gibi kullanım senaryolarına uygun
• Değişken kare hızı desteği: animasyon, timeline ve timer bazında ayrı ayrı ayarlanabiliyor

Anime.js’in özellikleri

• Sezgisel API

  • Kullanımı kolay ama güçlü bir animasyon API’si sunar.
  • Özellik bazlı parametreleri ve esnek bir keyframe sistemini destekler.
  • Yerleşik easing işlevleri ve geliştirilmiş dönüşüm özellikleri sunar.

• SVG araç seti

  • Yerleşik SVG yardımcılarıyla şekil dönüşümü, motion path takibi ve çizgi çizimi kolayca yapılabilir.
  • Şekil dönüştürme, çizgi çizimi ve motion path özelliklerini içerir.

• Scroll Observer

  • Kaydırmaya göre animasyonları senkronize edip tetikleyebilen bir Scroll Observer API sunar.
  • Çeşitli senkronizasyon modlarını ve gelişmiş eşik değerlerini destekler.

• Gelişmiş staggering

  • Yerleşik Stagger yardımcı işleviyle birkaç saniyede etkileyici efektler oluşturabilirsiniz.
  • Zaman staggering’i, değer staggering’i ve timeline konum staggering’ini içerir.

• Spring ve sürükleme özellikleri

  • Draggable API ile HTML öğeleri sürükleyebilir, snap yapabilir, flick uygulayabilir ve fırlatabilirsiniz.
  • Çeşitli ayarlar, kapsamlı callback’ler ve kullanışlı metotlar sunar.

• Timeline API

  • Güçlü Timeline API ile animasyon sıralarını düzenleyebilir ve callback’leri senkronize edebilirsiniz.
  • Animasyon senkronizasyonu, gelişmiş zaman konumları ve oynatma ayarlarını destekler.

• Duyarlı animasyonlar

  • Scope API ile media query’lere kolayca tepki veren animasyonlar oluşturabilirsiniz.
  • Media query’ler, özel root öğeleri ve scope metotlarını içerir.

[kaydash]

Vay canına, inanılmaz.

[GN⁺]

Hacker News görüşleri

• O landing page’de kaydırma yaparken beklediğimden çok daha akıcı ve hızlı hissettirdi
• Bunun gerçekten var olduğuna inanması zor olacak kadar iyi yapılmış. 2000’lerin başındaki internetin yaratıcılığının, günümüzün rafine tasarım standartlarıyla buluşmuş hali gibiydi
• Ana sayfa, mobil tarayıcıda son derece akıcı çalışan, şimdiye kadar gördüğüm en karmaşık ve en çok katmanlı etkileşimli animasyonlardan biriydi. FPS, sanki güçlü bir PC’de Doom 2016 çalışıyormuş gibi hissettirdi
• Scroll hijacking’den hoşlanmadığım halde bundan ilk kez rahatsız olmadım. Gerçekten çok akıcıydı
• Ana sitenin etkileyici olduğunu düşünmüştüm ama dokümantasyona bakınca gerçekten hayran kaldım. Eline sağlık. WAAPI’yi denemek için çok heyecanlıyım
• Bu sayfayı seviyorum ama Firefox(136.0.3)’ta uBlock Origin etkinken <a href="https:&#x2F;&#x2F;animejs.com&#x2F;documentation&#x2F;scope&#x2F;" rel="nofollow">https://animejs.com/documentation/scope/</a>; adresine girince sekme anında çöküyor. O çok etkileyici giriş animasyonunu kaydırdıktan hemen sonra yaşanınca ilginç bir deneyim oldu
• Tarayıcının kaydırma çubuğunu tutup sürükleyebilmek ve animasyonun akıcı şekilde güncellenmesi hoşuma gidiyor (Safari Mobile)
• CPU’m fazla eski olabilir ya da alışılmadık bir tarayıcı (Microsoft Edge) kullanıyor olabilirim ama site <i>çok</i> yavaş çalışıyor (saniyede 1 güncellemeden az), sekme anında CPU’nun %80’ini kullanmaya başlıyor ve fanlar yüksek sesle dönüyor. 8. nesil Intel i7 kullanıyorum
• Kullandığım alışılmadık Android tarayıcısında gerçekten iyi çalışıyor. Kütüphane hakkında olumlu şeyler söyleyebilirim
• Landing page harikaydı
  • Tek sorun, responsive layout örneğine bakarken tarayıcı penceresinin boyutunu değiştirince kaydırmanın en üste sıfırlanmasıydı