Yeni başlayanlar için animasyon kılavuzumuzu okuyarak öğrenmeye devam edin.
Kapsamlı animasyonda easing kılavuzu.
Animasyonunuz ister gerçekçi ister gerçeküstü olsun, inandırıcı olması gerekir. O yüzden animasyonda hareketi oluştururken izleyicilere bir miktar sahicilik sunmalıyız. Easing, animasyonda hareketi düzelterek akışı bozan sarsıcılığı azaltan bir geçiş yöntemidir. After Effects, Premiere Pro ve Animate gibi bir yazılım programında easing kullanmak için animasyonun zaman çizelgesine yerleştirilen anahtar kareler ile ne zaman easing kullanacağınızı kontrol edebilirsiniz. Bu kılavuzda nasıl olduğunu göstereceğiz.
Animasyonda easing nedir?
Animasyon bağlamında easing, harekete doğal ve organik bir hava katar. Easing uygulanmadan oluşturulmuş doğrusal bir animasyon, hızını hiç değiştirmeden ve mekanik şekilde hareket eder. Doğada böyle bir hız tutarlılığı olmadığından gördüğümüz hareket bize yabancı ve yapay gelir.
Gerçek dünyada nesneler sürekli aynı hızda hareket etmez; yavaş başlar, hızlanır ve tekrar yavaşlayıp dururlar.
Araba sürmek gibi düşünün: Durduğumuz yerden kalkıyoruz, hızlanıyor ve bir süre hızımızı koruyoruz, sonra da yolculuğun sonunda yavaşlayarak duruyoruz.
Bu hareketler, animasyonlarınızda karşılaşabileceğiniz başlıca easing işlevlerinde yansıtılır. Hareketlere daha organik bir his katar.
- Ease in, animasyonu yavaş başlatıp durana kadar hareketi hızlandırır.
- Ease out, animasyonu hızlı başlatıp sonunda yavaşlar.
- Ease-in-out, bu ikisinin birleşimidir.
Easing nasıl çalışır?
Belirli bir nesnenin animasyonu için hareketin başlangıç ve bitiş noktasını belirtmek üzere anahtar kare adı verilen işaretçiler ayarlamanız gerekir.
Anahtar kare, adının anlamını tam taşır. Zaman içinde bir değer ayarlayarak sistemin anahtar kareler arasındaki tüm karelerin nasıl işlemesi gerektiğini hesaplamasını sağlayan önemli bir karedir.
Anahtar kareler, her bir anahtar kare arasında gerçekleşen tüm animasyonların değerini değiştiren talimatlar verir. Kullanmayı seçtiğiniz hareket hızı, nesnenin bu anahtar kareler arasındaki animasyonlarını kontrol ederek hareket etmesini etkiler.
Easing'in avantajları nedir?
Easing, izleyicinin tepkisini etkilemek için hareketi düzeltmenin bir yoludur. Animasyonlarınıza katabileceği avantajlardan bazıları:
- İnsana yakındır. Doğada doğrusal hareket bulunmaz. Dolayısıyla animasyonda doğrusal hareket kullanıldığında izleyicinin deneyimini olumsuz etkileyecek sıkıcı ve sarsıcı bir his yaratılır. Anahtar kare hareketlerinizin inandırıcı ve tanıdık görünmesi için gerçekçilik ve doğruluk gerekir.
- Gerçekçidir. Easing, izleyicilere gördüklerini işleyebilecekleri zamanı tanır. Easing, animasyona doğal ve organik bir his veren yumuşak bir ivme katar ve izleyicilere daha etkili bir gerçeklik hissi sunar.
- Canlıdır. Easing, dramatik veya güldürücü etki için de kullanılabilir. Örneğin ease-in animasyonları yavaş başlayıp hızlı biter. Wile-E-Coyote'un kanyonda koşarken uçurumun kıyısında aniden havada asılı kaldığını hayal edin. Bilgisayar animasyonunda benzer bir etkiyi yaratmak için easing gereklidir.
- Özelleştirilebilir. Farklı farklı easing efektleri arasından seçim yapabilirsiniz. Bazıları hızlı başlarken bazıları yavaş başlar. Bazı easing efektleri sona doğru yavaşlar. Hareketinizle yakalamayı çalıştığınız her şeyin efektini easing ile oluşturabilirsiniz.
After Effects'te easing ile animasyon.
After Effects, en iyi ve en kolay özel efekt ve post prodüksiyon programıdır. Animasyonunuzda nasıl easing kullanabileceğinize bakalım.
- Açık animasyonunuzda zaman göstergesini zaman çizelgesinin başına getirin. Anahtar kareler, baştan sona tutarlı hız sağlayan temel doğrusal anahtar kareler olarak ayarlanacaktır.
- İlk anahtar kareyi tıklatın, sağ tıklatıp açılır menüden Anahtar Kare Yardımı'nı seçin.
- Kaydırdıkça karşınıza Easy Ease, Easy Ease In ve Easy Ease Out seçenekleri çıkacaktır.
- Bunlardan birini seçtiğinizde anahtar kare doğrusal hareketten easing'e geçer. Anahtar karenizin şeklinin değiştiğini göreceksiniz. Örneğin doğrusal elmas şeklindeyken Easy Ease Out sola dönük bir oktur.
- Burada hareketinize uygun doğru easing seçeneklerini bulabilirsiniz. Örneğin, ilk anahtar karenizden ease out ve son anahtar kareye ease in yapabilirsiniz. Bu doğal harekette gördüğümüz gerçekçi hızlanma ve yavaşlama hissini yaratacaktır.
- Zaman çizelgesi panelinizdeki anahtar kareler arasındaki zaman farkına dikkat edin. Anahtar kareler arasındaki zaman aralığı kısaldıkça sonraki anahtar kareden önce yolculuğun tamamlanması gerektiğinden hareket hızlanır. Aralık uzadıkça yolculuğu tamamlama acelesi kalktığından hareket çok daha yavaşlar.
- Anahtar kareleri zaman çizelgenizde ileri veya geri götürerek kolayca hareket hızını ayarlayabilirsiniz.
- Easing'in anahtar karelerinizi nasıl etkilediğini grafik biçiminde görmek için grafik düzenleyiciyi kullanabilirsiniz.
Adobe After Effects'te easing hakkında daha fazla bilgi edinin
Animate'te easing ile animasyon.
Adobe Animate'te aynı anda birden çok özelliğe easing uygulayabilirsiniz. Yanı aynı anda hem hareket edip hem dönen bir nesneniz varsa her harekete farklı easing oranları uygulayabilirsiniz.
Yöntem şu şekilde çalışır.
- Animasyonunuzda, klasik ara açıklığı alanında bir anahtar kare karesi seçin ve özellikler panelindeki ara doldurma bölümüne gidin.
- Easing açılır menüsünde, "Her özellik ayrı" seçeneğini işaretleyin.
- Her bir özellik için alanlar göreceksiniz. Ön ayarlı easing panelini açmak için Klasik Ease'i tıklatın ve özelliğiniz için Easing seçeneklerini işaretleyin.
- Ayrıca özel ease de ekleyebilirsiniz. Anahtar karenizde mükemmel ease oluşturmak için özel ease paneli ve grafiğini kullanın. Ease'inizi kolayca sürükleyip tam istediğiniz şekilde özelleştirin.
- Tüm özelliklerinize tek seferde easing ekleyebileceğinizi de unutmayın. Easing açılır menüsüne geri dönüp seçeneklerinizi işaretlemeniz yeterli.
Animate'te hareket aralarını düzenleme hakkında daha fazla bilgi edinin
Premiere Pro'da easing ile animasyon
Premiere Pro'da Ease in, Ease out, Bekle, Otomatik Bezier ve Sürekli Bezier gibi çeşitli easing seçenekleri bulunur.
Bezier ile easing grafiğinizi özelleştirebilirken Auto Bezier ile de daha yumuşak değişim hızı oluşturabilirsiniz.
Anahtar karelerinize kolayca farklı easing işlevleri uygulayabilirsiniz.
- Animasyonunuz için anahtar kareler oluşturun.
- Anahtar karenizi seçin ve Efekt Kontrol paneline gidin.
- Panelin sağ tarafında, anahtar karenizdeki küçük mavi elmas şeklini tıklatın. Bu standart olarak doğrusal olmalıdır.
- Sağ tıklatın ve Geçici Enterpolasyon açılır listesine gidin.
- Easing seçeneğinizi işaretleyin ya da özelleştirilmiş easing için Bezier gibi seçeneklerden yararlanın.
- Her bir animasyon anahtar karesi için zaman çizelgenizi sağ tıklatıp Klip Anahtar Karelerini Göster>Hareket>Konum'u tıklatarak zaman çizelgesinde anahtar kare easing grafiğinizi düzenleyebilirsiniz. Böylece anahtar karenizde daha sert veya yumuşak geçişler oluşturma esnekliğiniz olur.
Premiere Pro'da easing ve anahtar kareler hakkında daha fazla bilgi edinin
Easing: SSS.
Easing uygulamasının temel amacı nedir?
Easing, animasyonun hareketini ilginç ve organik bir his yaratmak için değiştirir. Easing, animasyonun donuk veya kesintili görünmesini engeller ve harekete yumuşaklık katarak profesyonel bir dokunuş sunar. Animasyonun başına ve sonuna tampon koyarak hareketin başını ve bitişini yumuşatır.
CSS animasyonu ne işe yarar?
CSS (Basamaklı Stil Sayfaları) animasyonu, nesne bir CSS stili yapılandırmasından diğerine geçerken animasyonun sayfada nasıl görüneceğini belirleyen bir komut dizisidir. Animasyon stilinin başlangıç ve bitiş durumlarını belirlemek ve gerektiğinde yol boyunca yönlendirmek için anahtar kareler CSS'ye kodlanır. CSS animasyonu genelde yumuşak işleme sunar ve ürünün son haline dair büyük bir kontrolünüz olur.
CSS'de ne tür easing işlevleri vardır?
CSS'deki temel easing işlevleri doğrusal, ease-out, ease-in ve ease-in-out'tur. CSS'de tüm bu işlevleri kullanarak anahtar kare geçişlerinize çok daha gerçekçi bir hava verebilirsiniz.
CSS'de doğrusal geçiş nedir?
Doğrusal geçiş, animasyonun hızını başından sonuna kadar korur. Anahtar karenin zaman ve değeri aynı hızda ilerler. Doğrusal geçişin verdiği robotik ve yapay etki, hareketleri yumuşatan easing işlevleriyle daha doğal hale getirilir.
CSS'de ease-out nedir?
Ease-out efektleri hızlı başlayıp sona doğru yavaşlar. Başlangıçtaki hız, hızlı yanıt süresi izlenimi verdiğinden kullanıcı etkileşimi içeren animasyonlarda kullanışlıdır. Bu CSS geçişi, animasyonda acele edildiği izlenimini verdiğinden ekran dışından ekrana gelen simgeler için de kullanılabilir.
CSS'de ease-in nedir?
Yavaş başlama ve ani bitiş ile izleyiciye tuhaf gelebildiği için "ease-in" daha az kullanılan bir geçiştir. Ancak özellikle animasyondaki nesne durmadan hemen önce ekranı tamamen terk ediyorsa ekran dışına çıkan simgeler veya görüntüler için kullanılabilir. Ease-in geçişleri, yavaş gelip kullanıcıda sabırsızlığa yol açabileceğinden kısa tutulmalıdır.
CSS'de ease-in-out nedir?
Ease-in-out geçişi, ease-in ve ease-out'un özelliklerini alır. Yavaş başlayıp ortaya doğru hızlanır. Bir döngü içinde dolaşan bir animasyon oluşturuyorsanız epey işinize yarayabilir.