Bir sonraki web tasarım projenizde 12 Disney animasyon ilkesini kullanma
Bunu yazdığımda, ofisimin 17 şey var-diğer Disney duvarlarda ve raflarda. On yedi. Ben bile şaşırdım. Tıpkı her şeyi sevdiğim gibi, Disney’in 12 ilkesi ile yaratılan mucize, filmlerinden birini izlediğimde dikkatimi çekiyor. Ve mesele bu. 12 Animasyonlu ilkeler pürüzsüzdür. İzleyicilerin farkına varmadan izleyiciler hakkında bir izlenim bıraktılar. Bizi bazen aynı sahnede güldürüyor, ağlatıyor, sempati duyuyor ve hayal ediyorlar. Ve görünür olan karakterler ve nesneler yaratırlar ve ona ulaşmak ve dokunmak istediğiniz kadar gerçekçi bir şekilde hareket ederler. (Hiç Coco’yu gördün mü? Davamı dinlendirdim.)
12 animasyonlu ilke şimdi tüm hareket, Disney ve diğerleri için bir temel sağlıyor. Ayrıca, web tasarımı gibi animasyon dışındaki alanlarla da ilgilidir. Kısa Tarih 12 animasyon prensiplerinin animasyon ilkeleri, 1920’lere ve 30’lara katılan çekirdek animatör grubu olan dokuz Disney ebeveyninden ikisi olan Ollie Johnston ve Frank Thomas tarafından tanıtıldı. Johnston ve Thomas 1981’de Life: Disney Animation’ın yanılsamasını yazdılar ve animasyonlu bir “Kutsal Yazılar” olmaya devam ediyor. Bu kitap, 12 ilkeyi çıkarmak için Disney’in en iyi animatörlerinin yaklaşımına yakından bakıyor. Her ne kadar bu ilkeler başlangıçta eller tarafından çizilen animasyonlar için tasarlanmış olsa da, bu ilkeler teknolojik değişiklikler yoluyla hayatta kalmaktadır ve şimdi bilgisayar animatörleri (Pixar gibi) ve web tasarımcıları tarafından kullanılmaktadır.12 Animasyon ilkeleri ve web tasarımlarını nasıl bilgilendirdikleri bu ilkelerin zamana göre test edilmesinin nedenleri vardır. Bazen temeller hala en iyisidir. 1. Kabak ve Kaynağın Kısıtlanması: Chris Gannon Giphy üzerinden “Squash and Stretch” en önemli animasyon ilkesidir. Bu animasyon, yerçekimi, ağırlık ve kütle esnekliği sağlar. Bir nesne hareket ettiğinde, şekil sabit değildir. Hacim tutarlı kalmalıdır. Germe, nesnelerin daha ince ve daha uzun olmasını gerektirir; Squing, onu daha kısa ve daha genişletir. Daha ince veya daha kısa yaparsanız, hacim aynı olmaz.
Bir web tasarımında, nesnelerin dikkat çekmesi gerektiğinde “Squash and Stretch” kullanılır. Fiziksel kütleye sahip olduğu görülmesi gereken nesneler varsa, bu ilke yardımcı olabilir.
2. Beklemek Kaynak: Centolodigiani Giphy üzerinden İzleyicileri ne olacağını tahmin etmek ve bu, üretilen eylemleri daha gerçekçi hale getirebilir. Önce dizlerinizi bükmeden ya da dışarı çıkmadan bir şey yakalamayacaksınız, değil mi? İzleyicilere ne olacağı konusunda sinyal vermek için karakterleri veya nesneleri bir veya iki gerçekçi hareketten bir veya iki gerçekçi hareketle yerleştirme beklentisi.
Web tasarımında, geçişlerde beklenti kullanılır.Örneğin, ziyaretçiler bilgi kutusunu doldurur ve gerekli bilgileri bırakırsa, kutu dikkatlerini çekmek ve “Hey, bir şeyler yanlış” iletişim kurmak için biraz sıçrayabilir.Beklenti kullanmanın bir başka yolu, öğeyi biraz azaltmak ve daha sonra imleci yönlendirirken daha da büyütmektir.3. Evreleme, izleyicilerin gözlerini istediğiniz yere bakacak şekilde yönlendirir (fotoğrafta “cephe”).İzleyicilerin sadece ne istediğinize odaklanması için sahnenin geri kalanını küçültün.Performansın bir başka bileşeni, karakter tarafından yapılan her eylemin arkasında amaca sahip olmasıdır.Her animasyonlu çerçeve atarsanız, pozun arkasındaki amacı bulabilirsiniz. Evreleme, web sitelerinde kullanılan web ve görsel tasarıma uygulanması daha kolay ilkelerden biridir.Web sayfaları pop-up hareketlerinde pop-up’lar ortaya çıktığında olan şey budur ve bahçenin geri kalanı bulanık, loş veya kapalı hale gelir.Mecazi olarak “sahnenin” en önemli kısmını açarsınız ve diğer her şeyi arka planda tutarsınız.Işık ve gölge de bunun için kullanılabilir veya web tasarımcıları bu prensibi yalnızca gereksiz ayrıntıları ortadan kaldırarak uygulayabilir.4. Düz ileri ve “düz ön” poz ve “poz vermek” için pozlar animasyon yapmanın iki farklı yoludur.”Düz ileriye doğru”, çerçeve baştan sona sırayla yapılır.Bu dinamik animasyon, akan hareketler sağlar.”Poza Poz” ile ilk ve son çerçeve yapılır, o zaman ihtiyaç duyulan şey arasındaki poz eklenir. Kaynak: Vincenzo Lodgiani, hareket sanatçısı Şu anda, bilgisayar animasyonu “poz vermek için poz” kullanıyor çünkü bilgisayar kayıp çerçeveyi otomatik olarak doldurabilir. Chekhov’daki animasyona bakın – gerçekçi bir şekilde akmadıklarını (ve böyle olmamalıdır) öğrenebilirsiniz. Web sitenizde “doğrudan” bir animasyon oluşturmak istiyorsanız, birkaç kare belirlemenize ve sırayla görüntülemenize olanak tanıyan Step Time işlevini () kullanabilirsiniz. 5. İzle -Up ve örtüşen eylemi “Takip et -up ve üst üste binen eylem” ilkesi, karakter veya nesne hareket ettiğinde ve sonra durduğunda, konunun bir kısmının farklı hızlarda hareket edeceğini ve duracağını söylüyor. Bu gerçek hayat fiziği yasasını taklit eder. Çakışan heves: Konunun farklı kısımları farklı hızlarla hareket eder. Takip edin: Nesnenin, ana nesne hareket etmeyi durdurduktan sonra gevşek bir şekilde bağlı olarak hareketli bir şekilde hareket ettirir. Parçalar durma noktasının ötesine geçecek ve sonra nesneye doğru geri çekilecektir.
Aşağıdaki örnekte, Rapunzel’in kolları ve ayakları kafasından farklı hızlarda hareket ediyor – bu örtüşen bir eylem. Dönmeyi bıraktığında, saçları bir ikinci için sallanmaya devam etti-bir takipti.
“Drag”, bunun tersinin gerçekleştiği ilgili bir tekniktir – nesnenin bir kısmı hareket eder ve sonra geri kalanı takip eder. Tüm bu teknikler gerçekçi hareketler gösterir veya komik efektler için hareketleri abartabilir.
“Sapın Taşınması” da bununla ilgilidir. Geri kalan karakterlerin hala küçük bir hareketi var, böylece animasyon durgunlaşmıyor.
Hücresel ve web tasarımlarında, “Takip Edin” ve “örtüşen eylemler” izleyiciye bir eylemin kasten durdurulduğunu gösterir. Değilse, sadece çalışmayı bıraktığını düşünebilirsiniz. Örneğin, iPhone’umdaki Wunderlist uygulamasının liste öğesini nasıl taşıdığımı nasıl gösterdiğini görün. Öğe farklı bir renk haline geldi ve hareket ettirdiğimde büyüydü, sonra bitirdikten sonra orijinal renge ve boyutuna geri döndü. Eylemin bittiğini biliyorum. Bu prensibi iPhone’unuzda da görebilirsiniz. Ekran arasında bir geçiş yaptığınızda veya simgeyi ana ekranda hareket ettirdiğinizde, öğe biraz farklı bir hızda hareket eder. İPhone’unuz “Her şey değişiyor”. 6. Yavaş giriş ve “yavaşlama ve dışarı” ilkesini yavaşlatır, bir nesnenin yavaş hareket etmeye, momentum elde etmeye ve hızlanmaya başladığını, sonra durduğunda tekrar yavaşladığını belirtir. Temel olarak, hareket doğal olacak şekilde hızlandırılmalı ve yavaşlatılmalıdır. Bu etkiyi elde etmek için, eylemin başlangıcında ve sonunda hareketteki kademeli artış ve azalmayı vurgulamak için ek bir çerçeve vardır. Kaynak: Tumblr’da yaşam yanılsaması Web tasarımı için CSS, bu prensiple ilgili iki zaman ayarlama işlevine sahiptir: giriş kolaylığı ve çıkış kolaylığı. Web sitenizde planınızda bir örnek görebilirsiniz, gezegeniniz (önce “Başlayın” tıklayın). 7. Yay diğer 12 animasyon prensibi gibi, “ARC” fiziğe dayanmaktadır. Nesneler, yerçekimi nedeniyle hareket ederken genellikle çeşitli ark türlerini takip eder. Eğer düz kalırlarsa, hareketler mekanik, gerçekçi olmayacaktır. Bu, sadece düşük ila düşük ila düşük ila düşük değil, her türlü hareket için de geçerlidir: web tasarımında, “ark” prensibi kavisli animasyonlar yaparak, aynı zamanda yükleme sırasında olduğu gibi elementleri çevirerek de kullanılabilir. 8. İkincil eylemler ikincil eylemler, ana eylemi onu rahatsız etmeden vurgular. Aynı zamanda daha fazla boyutun karakterini ve nesnesini verir ve hayatı bir sahneye verir. Evreleme ilkesi bir rol oynar çünkü ana eylem hala bir odak noktası olmalıdır.
İkincil eylemlerin ana nesnenin dışında olması gerekmez. Bu, kaşlarını kaldırarak yürürken veya duyguları ifade ederken ıslık çalan bir karakter olabilir.
Hücresel ve Web tasarımlarında, “ikincil eylem” ilkesi, iPhone’daki uygulamayı sıfırladığınız gibi yeni öğeler için alan sağlamak için element çekildiğinde görülür. Bu, eylemi vurgulayan “takip ve örtüşen eylemler” ile el ele gidebilir. 9. Zaman ayarlama süresi oldukça kolaydır ve bu “yavaşlama ve yavaşlama” ile ilgilidir. İlke, unsurların gerçek dünyada olduğu gibi doğal olarak hareket etmesi gerektiğini söylüyor. Vurgu için kasıtlı olarak hızlandırılabilir veya yavaşlatılabilirler. Kullanılan çerçevelerin sayısı zamanı belirleyecektir – daha fazla çerçeve eylemi daha yavaş, daha az çerçeve eylemi daha hızlı hale getirir. Bu örnekte, Daffy Duck’ın ilk eyleminin doğal bir zamanı vardır ve daha sonra izleyiciye yaklaştığında son eylem, kasıtlı olarak vurgu için hızlı bir şekilde gerçekleştirilir.Zaman ayarı ayrıca izleyicilerin nesnelerin ağırlığını birbirine göre anlamalarına yardımcı olur. Bu örnekte, karakter ağırlıkları yavaşça kaldırır ve hızlı bir şekilde düşürür, yükün onun için ağır olduğunu gösterir: Kaynak: @Scottthigpen Giphy’de Web tasarımında, zaman ayarları, özellikle kullanıcı etkileşimlerine yanıt verirken öğelerin biraz daha uzun süre dayanmasını veya hızlı bir şekilde kaybolmasını sağlamak için kullanılır. Örneğin, kullanıcı menüyü kapatmak istiyorsa, 300 MD için kalmak için zaman ayarlayabilirsiniz. Navigasyon çubuğundaki elemanları vururlarsa, hareketin hızlı bir şekilde gerçekleşmesini istersiniz (100 MD). 10. Aşırı 12 animasyonlu ilkelerin çoğu gerçekliğe odaklansa da, animasyonun güzelliği gerçek olmamasıdır. “Aşırı” ilkesi, çok fazla gerçekçiliğin animasyondan en iyi olanı azaltabileceğini söylüyor: eğlenceli. Karakterleri ve nesneleri daha çekici hale getirmek için aşırı. Gerçekliği ve onu bir Tachy’ye dönüştürmek için, sahneye hala güvenilebilmesi için yeterli. Aşırı, sahne soyut veya gerçeküstü olmayacak şekilde kısıtlama gerektirir. Web tasarımında, nesneler dikkat çekmek veya azaltmak için büyütülür veya azaltılır. Kullanıcılar web sitesinin bazı bölümlerinde aktif olduklarında, formlar gibi, diğer öğeler küçülürken büyüyebilir. Bu, özellikle pop-up formları düşündüğünüzde “sahneleme” ilkesine benzer. 11. Katı görüntü Kaynak: Tumblr’da yaşam yanılsaması Animasyon teknik olarak 2D olmasına rağmen, 3D olarak gerçekçi olarak görüntülenmelidir. “Katı çizim” ilkesi “perspektif” olarak da adlandırılabilir, çünkü bu temelleri çizme ve anlama yeteneğini içerir: Tasarım Bilimi Tutarlılık bakiyesi
Işık ve gölge Ses Ağır
Web tasarımcıları için, öğeye derinlik eklemek kullanıcıya onunla etkileşime girebileceklerini gösterir. Bunu web sitemizde çalışırken görebilirsiniz. “İndirmek için birleştir” düğmesinin aşağı kaydırdığımda nasıl pembeye döndüğüne dikkat edin:
12. İtiraz, belki de ustalaşacak 12 animasyonlu ilkeden en zor olanıdır, “Cazibe” karakterinizin, nesnenizin ve dünyanızın izleyiciyi çekmesi gerektiğini söylüyor. Fiziksel veya tam tersi, bazı yönlerden çekici ve çekici olmalıdırlar. Bunu doğru yapmak için bir tarif yoktur, ancak sağlam karakter ve hikaye anlatımı gelişimi ana bileşendir.
Animasyonda, her karakter ilginç olmayacak – suçlular Disney filminin temelidir. Bununla birlikte, sunum yolu hala izleyicinin karizmasına ve ilgisine sahip olmalıdır.
Bir web tasarımında, “cazibe”, bir bütün olarak web sitesinin ilginç, eğlenceli ve kullanımı kolay olduğu anlamına gelir.
