Animasyonda easing: ease in, ease out ve eğriler

Gerçek nesnelerin kütlesi vardır. Bir araba hareket ettiği anda seyir hızına ulaşmaz ve bir kapı çerçevede aniden durmaz. Tam hızda başlayıp duran hareket, izleyici nedenini söyleyemese bile mekanik, ağırlıksız veya bilgisayar tarafından oluşturulmuş gibi algılanır.

Disney animatörleri bu prensibi slow in ve slow out olarak adlandırdılar — The Illusion of Life'ta belirtilen on iki animasyon prensibinden biri. Bir hareketin başlangıcına ve sonuna yakın daha fazla çizim, ortasına daha az çizim koymak, hızlanıp yavaşlamasını sağlar. 3D yazılımında aynı etki, ekstra çizimlerden ziyade key'ler arasındaki eğriden gelir.

Bu, en yaygın kafa karışıklığı kaynağıdır ve sizin hatanız değil. CSS'te ve Robert Penner'ın yaygın olarak kopyalanan easing fonksiyonlarında, ease-in hareketin yavaş başlayıp hızlandığı, ease-out ise hızlı başlayıp durana kadar yavaşladığı anlamına gelir. Eğri, iki key arasındaki tüm harekete aittir.

After Effects ve birçok anahtar kare tabanlı araçta yumuşatma (easing) bir anahtar kareye aittir: bir anahtar kareye “ease in” yapmak, hareket oraya yaklaşırken yavaşlamak anlamına gelirken, bir anahtar kareden “ease out” yapmak, hareket oradan ayrılırken yavaş başlamak demektir. Bu nedenle, son anahtar karedeki bir After Effects “ease in” ve bir hareket üzerindeki bir CSS “ease-out”, zıt isimler altında aynı yavaşlamayı üretir. Hareketi — yavaş başlangıç, yavaş bitiş, her iki uçta da yavaşlama — olarak tanımlamak belirsizliği ortadan kaldırır.

Doğrusal interpolasyon, anahtar kareler arasında düz bir çizgi çizer: sabit hız ve her anahtar karede ani bir değişim. Sabit, kademeli veya bekleme (hold) interpolasyonu, değeri bir sonraki anahtar kareye kadar korur ve sonra atlar; bu, bloklama, göz kırpmaları ve ani geçişler gerektiren her şey için kullanışlıdır. Bezier veya spline interpolasyonu, anahtar kareler arasında pürüzsüz bir eğri çizer ve yumuşatmanın (easing) gerçekleştiği yerdir.

Bir bezier anahtar karesinin iki kolu vardır; biri anahtar kareye gelen eğriyi, diğeri ise anahtar kareden ayrılan eğriyi kontrol eder. Düz bir kol, anahtar karede sıfır hız anlamına gelir — yani bir yumuşatma (ease). Daha uzun bir kol, bu yavaşlamayı hareketin daha büyük bir kısmı boyunca sürdürür. Aynı hizada olan kollar, anahtar kareden pürüzsüzce geçer; ayrık kollar ise bir sıçrama gibi keskin bir yön değişimi yaratır. Bir kolu, eğrinin anahtar karenin değerini aşacak şekilde çekerseniz, hareket hedefinin ötesine geçer ve sonra geri döner.

2000'lerin başında yayınlanan Penner’ın yumuşatma (easing) denklemleri, adlandırılmış eğriler için ortak bir sözlük haline geldi: sine, quad, cubic, quart, quint, expo ve circ; her biri in, out ve in-out formlarında, neredeyse hiç olmayan (sine) ile şiddetli (expo) arasında değişir. Back, yerleşmeden önce hedefini aşar. Çoğu hareket aracı ve CSS kütüphanesi, bu setin bir versiyonunu sunar ve genellikle kübik bezier eğrileri olarak yaklaşıklaştırılır.

Elastic ve bounce istisnalardır. Tek bir hareket içinde birkaç kez salınım yaparlar ki bunu tek bir kübik bezier yapamaz; bu yüzden araçlar bunları ya birden fazla anahtar kareden oluşturur ya da prosedürel olarak üretir.

Başlayan ve duran çoğu hareket için her iki ucu da yumuşatın: bir kamera itişi, yerine kayan bir nesne, bir kafa dönüşü. Gelen ve yerleşen şeyler için yavaş bitiş, fırlayan şeyler için yavaş başlangıç kullanın. Sabit olması gereken hareketler — dönen bir fan, bir konveyör, döngüsel bir hareketin ortası — ve hareketin doğrudan geçmesi gereken anahtar kareler için doğrusal (linear) tutun. Ani geçişler (snaps), göz kırpmaları (blinks) ve bloklama için hold kullanın.

Bir anahtar kare seçtiğinizde, zaman çizelgesi başlığı Linear, Ease in, Ease out, Ease ve Hold seçeneklerini sunar. Bunlar anahtar kare tabanlı kuralı takip eder: Ease in, anahtar kareye gelen hareketi yavaşlatır; Ease out, anahtar kareden ayrılan hareketi yavaşlatır; ve Ease her ikisini de yapar — After Effects’in Easy Ease’i gibi. Zaman çizelgesi odaklıyken, F9 Ease’i, ⇧F9 Ease in’i ve ⌘⇧F9 Ease out’u uygular.

Eğri… (Curve…) seçeneği, Sine’dan Back’e kadar Penner’ın ailelerini açar; isimlerinin yanı sıra hislerine göre de aranabilir, kaydettiğiniz diğer eğrilerle birlikte. Eğriler modu, izleri doğrudan sürükleyebileceğiniz bezier kollarına sahip eğriler olarak çizer, aşma (overshoot) da dahil. Elastic ve bounce, eğri listesinde bilerek yer almaz; bunun yerine + Motion altındaki yay (spring) ve sıçrama (bounce) jeneratörleri bu tür hareketleri üretir.