Animasyon bir grafiktir
- Tasarlayabilmek için yeniden üretilebilir ve birleştirilebilir olması gerekir.
- Tüm animasyonlar, bir değerin bir girdiye göre değişmesidir (zaman, kaydırma, fare konumu vb.) ve bu değişim bir grafik olarak çizilebilir.
- Grafiğin şekli, hareketin hissini belirler; bu eğriyi istediğimiz gibi üretmemizi sağlayan araç ise matematiktir.
Matematiksel araçlar
- Bezier eğrisi (easing): Başlangıç ve bitişi belirli hızlanma-yavaşlama ifadesi. İki kontrol noktasının eğriyi mıknatıs gibi çekmesi prensibiyle çalışır. Doğrusal enterpolasyonun yinelemeli uygulanmasıyla oluşturulur. Aynı hareket bile ease-in ya da ease-out'a göre tamamen farklı bir izlenim verebilir
- Üstel yaklaşım:
value += (target - value) * factor tek satırla hedefi yumuşak biçimde takip eder. Hedef her karede değişse bile doğal görünür. İmleç takibi, sayaçlar, progress bar gibi yerlerde kullanılır
- Yay (spring): Geri çağırıcı kuvvet ve sönüm kuvveti olmak üzere iki kuvvete dayalı sönümlü titreşim. Hissi
stiffness ve damping olmak üzere iki değer belirler. Easing'den farklı olarak duration yoktur; hedef değiştiğinde mevcut hızı koruyarak doğal şekilde geçiş yapar
- Fizik simülasyonu: Yerçekimi, çarpışma, sürtünme gibi fizik kurallarını birleştirir. Temel fikir, "yalnızca kuralları tanımlarsanız hareket kendiliğinden oluşur" olmasıdır. Konfeti gibi onlarca nesnenin tek tek yörüngesini tasarlamak yerine yalnızca yerçekimi ve hava direncini ayarlamak yeterlidir. Ancak öngörülebilirliği daha düşük olduğu için UI'nin ana geçişlerinden çok yardımcı efektlere uygundur
- atan2: İki nokta arasındaki yönü bulan fonksiyon. Bir öğenin hareket yönüne bakması ya da bir kartın imleç yönüne doğru eğildiği 3D tilt efektlerinde kullanılır
- Trigonometrik fonksiyonlar: Periyodik tekrarlar için idealdir. Birden çok öğeye faz farkı verilirse dalga efekti oluşur. Yazma göstergesi, yüzen arka planlar vb.
- Testere dişi dalga:
sin'in yumuşak ileri-geri hareketinden farklı olarak 0→1 yönünde ilerler ve sonra anında sıfırlanır; tek yönlü bir tekrardır. Pulse ring, ping, tekrarlayan progress gibi yerlerde kullanılır
Karmaşık animasyon tasarlamak
- Parçalı fonksiyonlar: Karmaşık eğrileri aralıklara bölüp her parçayı ayrı ayrı tasarladıktan sonra birleştirir. Fizik simülasyonuna göre daha ince niyetli ayar yapılabilir (ör. bounce yüksekliğini bilinçli olarak azaltmak)
- Bağımlılıkları belirleme: Animasyon tasarımının çıkış noktası, "değer neye bağlı?" sorusudur. Üç türe ayrılır: zaman tabanlı (en yaygın), değer tabanlı (kaydırma, fare konumu), olay tabanlı (tıklama, hover ile tetiklenen)
- Pipelining: Parçaları zaman ekseni üzerinde sırayla yerleştirme. Sıralı, örtüşen, eşzamanlı, stagger gibi yerleşim stratejileri birleştirilebilir. Her parça bağımsız olarak değiştirilebilir
- Durum geçişi: Zamana değil koşullara göre bir sonraki aşamaya geçme yöntemi. Havai fişeğin fırlatma→patlama→yayılma→sönme akışı gibi, geçiş koşulları açıkça belirtilirse bir state machine ile yönetilebilir
- Özelliklerin ayrılması: Boyut, renk, saydamlık gibi birden çok özelliği bağımsız izlere ayırma. Her iz diğerlerinden habersiz olabildiği için ince ayar veya ekleme yapmak kolaylaşır
Dikkat edilmesi gerekenler
- Rastgelelik: Tamamen rastgele değil, kontrollü rastgelelik kullanılmalıdır. Asıl önemli olan, "nereye kadar kontrol edip hangi noktadan sonra rastgeleliğe bırakacağınız" sınırını belirlemektir
- İki yönlülük: Bir öğe görünür hale gelirken yön değişirse, mevcut durumdan devam ederek tersine dönecek şekilde tasarlanmalıdır; böylece sıçrama ya da tuhaflık oluşmaz
Kodla animasyonun sınırları ve güçlü yanları
- Karakter hareketleri ya da hassas morphing gibi karmaşık animasyonlar için Lottie, Rive gibi uzman araçlar veya video daha uygundur.
- Buna karşılık kod tabanlı animasyonun gücü, kullanıcı girdisine anında tepki veren gerçek zamanlı etkileşimlerde ortaya çıkar.
Henüz yorum yok.