Easing nedir?

Bir yan panelin ekranın sağından açıldığını düşün. Başlangıç ve bitiş konumu belli, süre de aynı. İlk sürüm bütün yolu eşit hızla geçiyor; ikinci sürüm hızlı başlıyor ve yerine yaklaşırken yavaşlıyor. İki panelin son karesi aynı olsa da hisleri farklıdır. Easing, animasyonun toplam süresi içinde değişimin nasıl dağıldığını tanımlar. Bu kavramı anlamak için önce ‘nereye gidiyor?’ sorusunu ‘hangi hızla ilerliyor?’ sorusundan ayırmak gerekir. Buradaki panel yalnız anlatım örneğidir; herhangi bir tarayıcı için performans sonucu iddia etmez.

Bir arayüz kontrolünde ilk tepkinin görünmesi önemlidir. Hareketin başlangıcına uzun bir yavaşlanma yerleştirildiğinde düğmeye basıldıktan sonra hiçbir şey olmuyormuş gibi hissedilebilir. Bunun çözümü her animasyonu çok kısaltmak değildir. Bazen aynı toplam süre içinde başlangıcı belirginleştirmek, bekleme algısını değiştirir. Yine de easing tek başına geciken ağ yanıtını veya yoğun hesaplamayı çözmez. Animasyon eğrisini değiştirmekle uygulamanın gerçekten daha erken yanıt vermesi farklı konulardır. Tasarım kararı bu teknik ayrımı gizlememelidir.

Panel açılırken içindeki başlık ve düğmelerin ayrı zamanlamalarla hareket etmesi mümkündür. Fakat her öğeye başka bir eğri vermek kısa sürede dağınık bir görünüm üretir. Önce ana nesnenin davranışı seçilir; bağlı öğeler bu hareketin parçası olarak değerlendirilir. Kapatma ise açılmanın mekanik olarak ters çevrilmiş kopyası olmak zorunda değildir. Kullanıcı kapatmayı seçtiğinde yeni içeriğe geçmek istiyor olabilir; gereksiz bekleme yaratmayan bir çıkış tercih edilebilir. Ortak karakter korunurken göreve göre farklı hız dağılımları kullanılabilir.

Fizik hissi veren yaylı bir hareket, ürünün kişiliğine katkı sağlayabilir. Ancak fazla sıçrama bir fiyatın, adresin veya form alanının okunmasını zorlaştırabilir. Hedefi aşan ve geri dönen nesnede metin de birlikte hareket ediyorsa kullanıcı sabitlenmesini bekler. Özellikle sık kullanılan arayüzlerde bu maliyet görünür olur. Bir hareket kütüphanesi oluştururken yalnız eğrinin adına değil, uygulanacağı mesafeye, özelliğe ve tekrar sıklığına bakılır. Aynı eğri küçük bir ikon değişiminde sakin, büyük bir panelde agresif hissedebilir.

Tasarım sisteminde eğrinin teknik değerinin yanında davranış örneği bulundurmak seçimleri kolaylaştırır. Bir tasarımcı ‘giriş’ adını gördüğünde hangi nesnenin nasıl belirdiğini anlayabilmelidir. Geliştirici de aynı eğrinin kapanışta neden farklı süreyle kullanıldığını okuyabilmelidir. Bu küçük açıklama, her yeni bileşende eğri tahmini yapmayı azaltır. Yine de sistem katı bir yasak listesine dönüşmez; farklı görev ortaya çıktığında yeni hareket mevcut örneklerle birlikte değerlendirilir ve gerekçesi görünür şekilde kaydedilir.