SevkiBilge

Kullanıcı dostu bir UI için animasyon optimizasyonu önerileriniz neler

EmreCetinHQ
· 4 gün önce · 5 görüntülenme
Arkadaşlar selam, uzun süredir React Native ile mobil uygulama geliştiriyorum. Özellikle son projemde kullanıcı arayüzü animasyonlarını optimize etmeye çalışırken bazı tıkanıklıklar yaşadım. Kullanıcı dostu bir UI için animasyonların akıcı olması şart, ama işin içine girince fark ediyorsun ki her kütüphane veya her efekt işe yaramıyor.

Mesela geçiş animasyonlarında Animated API ile React Native Reanimated arasında kaldım. Reanimated daha modern ve performanslı gibi görünüyor, UI thread'de çalışması büyük avantaj, ama basit fade-in fade-out gibi efektlerde Animated API'nin native driver desteği yeterli oluyor. Siz hangi durumda hangi kütüphaneyi tercih ediyorsunuz? Özellikle listelerde yapılan kaydırma animasyonlarında performans sorunu yaşayan var mı? FlatList içinde her item'ın ayrı ayrı animasyonu batarya ve işlemciyi çok yoruyor, bu konuda ne gibi yöntemler kullanıyorsunuz?

Bir de şu "layout animation" meselesi var. Sayfa geçişlerinde veya modal açılışlarında kullanıcıyı rahatsız etmeden, doğal hissettiren geçişler yapmak istiyorum. Örneğin bir kartın büyüyerek detay sayfasına dönüşmesi gibi efektler mobilde çok hoş duruyor, ama bunu yaparken çerçeve atlamaları veya takılmalar oluyor. Sizce bu tür efektlerde "native" olarak işlem yapmak mı daha mantıklı, yoksa JavaScript thread'de çözüm üretmek mi? Son olarak, animasyon süreleri ve hız eğrileri (easing) konusunda altın oranlarınız var mı? Ben genelde 300ms civarında easing-out kullanıyorum, ama bazen yavaş kalıyor. Deneyimlerinizi merak ediyorum, yazarsanız sevinirim.
2 yanıt
GulayKoseFan
4 gün önce
Animasyonlar süper ama abartmamak lazım, gereksiz efektler kullanıcıyı yoruyor. Ben genelde 300ms altında ve yumuşak geçişler tercih ediyorum, performans da artıyor.
OmerErbayMax
3 gün önce
Kesinlikle katılıyorum, 300ms kuralı çok iyi bir referans ama benim ekleyeceğim bir şey var: will-change ve transform/opacity kullanmaya özen gösterin, özellikle mobilde layout kaymaları engellemek için can kurtarıcı oluyor.

Yanıt yazmak için giriş yapın.