Animasyonun on iki ilkesi

Bu liste nereden geldi ve neden hâlâ geçerli

Animasyon ilkeleri, 1981'de yayımlanan bir kitaptan gelir: eski Disney animatörlerinden Frank Thomas ve Ollie Johnston'ın Disney Animation: The Illusion of Life kitabı. O kitap elle çizilen karakter animasyonu için, yani birinin her kareyi çizdiği ve bir varlığı canlı göstermesi gereken bir dönem için yazılmıştı.

Dolayısıyla ilk dürüst ifade şu: listenin yarısı size yaramaz. Bir karakterin hacminin sıçrarken ezilip uzaması gerektiğini söyleyen ilke, bir banka logosu için anlamsızdır ve pratikte acemi işinin işaretidir. Geriye kalan ve hâlâ çalışan şey, çizimle değil zamanla ilgili olan beş ilkedir: hareket ne zaman başlar, hangi ivmeyle, öncesinde ne gelir, sonrasında ne gelir ve bu sırada izleyicinin gözü nerededir.

Kalıcı olmalarının nedeni de gizemli değil. Bu beşi insan gözünün hareketi nasıl okuduğunu tarif eder ve insan gözü 1981'den bu yana değişmedi. Bu sayfayı gösteren tarayıcı bunlardan birini doğrudan sayıya çevirip bir standarda yazmış durumda; bunu dersin üçüncü bölümünde göreceksiniz.

Zamanlama ve aralık, önce düzeltilmesi gereken şey

Zamanlama, bir hareketin kaç kare sürdüğü demektir. Aralık ise nesnenin o karelerin her birinde nerede durduğu demektir. İkisi sürekli karıştırılır ve aradaki fark her şeydir: aynı zamanlamaya ve farklı aralığa sahip iki hareket, tamamen farklı iki his verir.

Hesaplanmış bir örnek bunu somutlaştırır. Diyelim kare hızı 24 ve bir şeklin on iki karede, yani yarım saniyede, soldan sağa gitmesi gerekiyor. Her karede mesafenin on ikide biri kadar ilerlerse aralık düzenlidir ve sonuç o yapay doğrusal harekettir. İlk dört karede mesafenin yarısını, kalan sekiz karede diğer yarısını alırsa, aynı on iki kare hız kazanıp sonra yumuşakça duran bir harekete dönüşür. Zamanlama değişmedi, yalnızca aralık değişti. Bu sayılar bir kural değil, bir örnektir; bu derste "doğru süre" tablosu yoktur, çünkü doğru süre hareketin büyüklüğüne ve oynadığı yere bağlıdır.

Pratik alışkanlık: bir hareket kötü göründüğünde süreye bakmadan önce aralığa bakın. Yeni başlayanlar genelde hareketi yavaşlatır ve bu yanlış düzeltmedir; düzenli aralıklı yavaş bir hareket, yalnızca yavaş ve yapay bir harekettir.

Doğrusal hareket neden yapay görünür

Fiziksel dünyada hiçbir şey sabit hızla başlayıp sabit hızla durmaz. Bunu söyleyen ilkenin o kitaptaki adı yavaş giriş ve yavaş çıkıştır; yazılımda ise onu yumuşatma, yani easing olarak bilirsiniz. On iki ilke içinde doğrudan sayıya çevrilip bir standarda yazılmış tek ilke budur.

CSS Easing Functions Level 1 adlı W3C taslağı, tarayıcının dört anahtar kelimesini tam Bezier eğrileriyle tanımlar: ease, cubic-bezier(0.25, 0.1, 0.25, 1); ease-in, cubic-bezier(0.42, 0, 1, 1); ease-out, cubic-bezier(0, 0, 0.58, 1); ve ease-in-out, cubic-bezier(0.42, 0, 0.58, 1). Aynı dört değer herhangi bir motion grafik uygulamasında da kullanılabilir, çünkü Bezier eğrisi her yerde aynı şeydir. Şimdiye kadar eğri tutamaklarını gözle sürüklüyorduysanız, artık sayı yazabilirsiniz.

Ve derslerin nadiren aldığı pratik bir tutum: kadraja giren bir şey için ease-out, ease-in-out'tan genelde daha iyi okunur. Nedeni şu: izleyici bir şeyin nereden yola çıktığını değil, nereye oturduğunu görmek ister; hızlı başlayıp yumuşak duran bir hareket tam bunu verir. Tersi ise kadrajdan çıkan şeye aittir.

Doğrusal hareketin doğru olduğu yerler de vardır ve az değildir: sürekli bir dönüş, kayan bir yazı bandı, hiç durmayan bir taşıma bandı, bir yükleme göstergesi. Bunların hepsinde hareketin başı ve sonu yoktur, dolayısıyla girişte ve çıkışta yavaşlamanın anlamı da yoktur. Sonraki görsel iki durumu yan yana koyuyor.

Tek bir hareketin anatomisi: hazırlık, eylem, devam, oturma

İyi bir hareketin üç parçası vardır ve çoğu yeni başlayan yalnızca ortadakini kurar. Hazırlık hareketi, ana hareketten hemen önce ters yönde yapılan küçük bir harekettir: yukarıdan düşecek bir şey önce birkaç kare hafifçe yükselir. İşi gözü hazırlamaktır. O olmadan ana hareket ani gelir ve göz ilk anını kaçırır.

Devam hareketi aynı fikrin sondaki halidir: duran bir şey tam hedefte durmaz, biraz taşar ve geri gelir. Daha az bilinen yarısı ise bir nesnenin parçalarının birlikte durmamasıdır. İçinde metin olan bir kart kadraja giriyorsa, metin kartla aynı anda değil, birkaç kare sonra oturmalıdır. Bu tek küçük gecikme, profesyonel his için başka her ayardan daha fazlasını yapar.

Kendi projemiz olan mrgym egzersiz sayfalarında bu, CSS'e yazılmış durumda: bir çubuk grafik, mgx-grow adlı keyframe ile saniyenin onda dokuzunda yükseliyor ve çubuğun üstüne oturan sayı, mgx-rise ile çubuktan kırk iki salise sonra geliyor. Sayı, çubuğun neredeyse bitmesini bekliyor. Bu tam olarak devam hareketi ilkesidir; yalnızca bir animasyon programı yerine CSS söz dizimiyle yazılmıştır.

Bir de oturma var. Vardığı anda bir sonraki şeyi başlatan bir hareket okunmaz. Göz, gördüğünü kaydetmek için bir durgunluk anına ihtiyaç duyar ve o anın, atlanmak yerine zamanlamanızda yeri olmalıdır.

Sahneleme: neden her şey aynı anda hareket etmemeli

Sahneleme, izleyicinin bakışını yönetmek demektir. Karakter animasyonunda bu, duruşun siluetten bile okunacak biçimde kurulması anlamına geliyordu. Motion grafikte hem daha basit hem daha zordur: herhangi bir anda yalnızca tek bir şey en önemli şey olmalıdır.

Hareket, var olan en güçlü dikkat aracıdır; renkten de boyuttan da güçlü. Bu yüzden beş öğe birlikte girdiğinde hiçbiri görülmez. Pratik kural basit: bir anda tek bir öğe hareket etsin, gerisi dursun. Birden fazlası gerçekten girmek zorundaysa, birlikte başlatmak yerine gecikmelerle kademelendirin.

Daha az söylenen ikinci nokta ise tesadüfi eşzamanlılıktır. Aynı süreye sahip iki tekrarlı hareket birkaç saniye sonra birbirine kilitlenir ve göz onları tek bir şey olarak okur. Aynı mrgym egzersiz sayfasında hedef kas bir buçuk saniyeden biraz uzun, bir tam dokuz onda birlik bir döngüyle, destekleyici kas ise iki tam dört onda birlik bir döngüyle atar: yakın ama eşit olmayan iki sayı, hiçbir zaman aynı faza düşmesinler diye. İkisi de aynı sayıyı taşısaydı iki kas tek bir şey gibi görünür ve gösterimin tüm amacı yok olurdu.

Kalan yedi ilke ve buradaki işe yaramayanlar

Listedeki diğer yedisi şunlar: ezilme ve uzama, düz ilerleme ile poz poza, yaylar, ikincil hareket, abartma, hacimli çizim ve çekicilik. Bunların üçü motion grafikte işe yarar, dördü yaramaz ve açıkçası derslerde bu ayrımı kimse sizin için yapmaz.

Kalanlar: yaylar, yani bir nesnenin düz çizgi yerine hafif bir eğri boyunca ilerlemesi, ki bu her zaman daha iyi okunur. İkincil hareket, yani ana hareketin yanında olan küçük ayrıntılar; bir kartla birlikte kayan bir gölge gibi. Ve abartma, kurumsal motion işinde tehlikelidir ama sosyal medya içeriğinin görülmesini sağlayan tam da odur.

Kalmayanlar: bir logoda ezilme ve uzama neredeyse her zaman yanlıştır, çünkü uzayan bir marka işareti artık o işaret değildir. Hacimli çizim, üç boyutlu uzayda hacim vermekle ilgilidir ve düz grafiğe uygulanmaz. Çekicilik karakter tasarımıyla ilgilidir; buradaki karşılığı, sabit karenin en baştan iyi bir tasarım olmasıdır ve bu animasyonun değil tasarım ilkelerinin işidir. Düz ilerleme ile poz poza ise bir görünüş değil bir üretim yöntemidir: keyframe tabanlı bir programda her zaman poz poza çalışırsınız, dolayısıyla seçim neredeyse yoktur.

Kendi işinizi nasıl kontrol edersiniz

Bu ilkelerin hiçbiri keyframe'lere bakarak kontrol edilemez. İzleyerek kontrol edilirler ve izlemek, gerçek hızda ve işin oynayacağı cihazda izlemek demektir. Yalnızca oynatma çubuğunu ileri geri sürüklerken doğru görünen bir hareket doğru değildir.

İçinde zevk bulunmayan üç test. Birincisi tek geçiş testi: bir kez izleyin, sonra her anda gözünüzün nerede olduğunu söyleyin. Söyleyemediğiniz her yerde sahneleme bozuktur. İkincisi durdurma testi: istediğiniz herhangi bir anda durdurun ve kaç şeyin hareket ettiğini sayın; birden fazlası genelde bir fazladır. Üçüncüsü sessiz test: sesi kapatın ve ne olduğunu hâlâ anlıyor musunuz bakın.

Ve listenin dışında duran ama aynı ölçüde önemli bir kural: iş bir web sitesinde oynuyorsa, prefers-reduced-motion ayarında sadeleşen ya da duran bir hali olmalıdır. Bu ayar, yoğun hareketten rahatsız olan insanlar için vardır ve göz ardı edilmesi, izleyicinizin bir kısmının sayfayı kapatması demektir. Ayrıntısı web erişilebilirliği dersinde.