Animasyonlarınızı nasıl yumuşatacağınızı ve bunlara ağırlık vermeyi öğrenin.
Doğadaki hiçbir şey bir noktadan diğerine doğrusal olarak hareket etmez. Gerçekte ise işler hareket ettikçe hızlanma veya yavaşlama eğilimindedir. Beynimiz bu tür bir hareket beklemeye programlıdır. Dolayısıyla, animasyon oluştururken bunu kendi yararınıza kullanmalısınız. Doğal hareket, kullanıcılarınızın uygulamalarınızda daha rahat hissetmelerini sağlar ve bu da daha iyi bir genel deneyim sunar.
Özet
- Yumuşak geçiş, animasyonlarınızın daha doğal görünmesini sağlar.
- Kullanıcı arayüzü öğeleri için yumuşak geçiş animasyonları seçin.
- Animasyonları kısa tutmadığınız sürece yumuşak giriş veya çıkış animasyonlarından kaçının. Son kullanıcılar için yavaş hareket edebilirler.
Klasik animasyonda, yavaş başlayan ve hızlanan hareket için terim "yavaşlama", hızlı başlayan ve yavaşlayan hareket için "yavaşlama" terimi kullanılır. Bunlar için web'de en yaygın olarak kullanılan terimler sırasıyla "yumuşatma" ve "yumuşatma"dır. Bazen bu ikisi birleştirilir. Buna "girişi yumuşat" denir. Bu nedenle yumuşak geçiş, animasyonun şiddetini veya telaffuzunu azaltma sürecidir.
Yumuşak geçiş anahtar kelimeleri
Hem CSS geçişleri hem de animasyonlar, animasyonlarınız için kullanmak istediğiniz yumuşak geçiş türünü seçmenize olanak tanır. Söz konusu animasyonun yumuşatmasını (veya bazen de belirtildiği gibi timing
) etkileyen anahtar kelimeler kullanabilirsiniz. Ayrıca, uygulamanızın kişiliğini ifade etmek için çok daha fazla özgürlük sağlayan yumuşatmayı tamamen kendinize özel hale getirebilirsiniz.
CSS'de kullanabileceğiniz anahtar kelimelerden bazıları şunlardır:
linear
ease-in
ease-out
ease-in-out
Kaynak: CSS Geçişleri, W3C
Ayrıca, ayrı adımlar içeren geçişler oluşturmanıza olanak tanıyan bir steps
anahtar kelimesi de kullanabilirsiniz. Ancak, doğal görünen animasyonlar oluşturmak için en yararlı olan, yukarıda listelenen anahtar kelimelerdir.
Doğrusal animasyonlar
![Doğrusal yumuşak geçiş animasyon eğrisi.](https://web.dev/static/articles/the-basics-of-easing/image/linear-ease-animation-cur-95032dc9fda11.png?authuser=6&hl=tr)
Yumuşak geçiş sağlamayan animasyonlara doğrusal adı verilir. Doğrusal bir geçiş grafiği aşağıdaki gibi görünür:
Zaman ilerledikçe değer eşit miktarda artar. Doğrusal hareketler, genellikle robotik ve doğallıktan uzaklaşma eğilimindedir. Bu da kullanıcılar açısından sarsıcı bulur. Genel olarak, doğrusal hareketten kaçınmanız gerekir.
İster CSS ister JavaScript kullanarak animasyonlarınızı kodluyor olun, doğrusal hareket için her zaman bir seçenek olduğunu göreceksiniz.
Yukarıdaki etkiyi CSS ile elde etmek için kod şöyle görünür:
transition: transform 500ms linear;
Yumuşak çıkış animasyonları
![Yumuşak çıkış animasyon eğrisi.](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c6df0f5e61c7a.png?authuser=6&hl=tr)
Yumuşak geçiş, animasyonun doğrusal olanlardan daha hızlı başlatılmasına neden olur ve sonunda da yavaşlama olur.
Yumuşak geçiş genellikle kullanıcı arayüzü çalışmaları için en iyi seçenektir çünkü hızlı başlangıç, sonda doğal bir yavaşlamaya izin verirken animasyonlarınıza bir duyarlılık hissi verir.
Yumuşak bir etki elde etmenin birçok yolu vardır, ancak en basit olanı CSS'deki ease-out
anahtar kelimesidir:
transition: transform 500ms ease-out;
Yumuşak giriş animasyonları
![Yumuşak giriş animasyon eğrisi.](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c1ff704eed959.png?authuser=6&hl=tr)
Yumuşak giriş animasyonları yavaş başlar ve hızlı sona erer. Bu, yumuşak çıkış animasyonlarının tam tersidir.
Bu tür animasyonlar, ağır bir taşın düşmesine benzer. Yavaş yavaş başlar ve yere çakılan bir yumrukla yere çakılır.
Ancak etkileşim açısından bakıldığında yumuşak geçişler ani sonları nedeniyle biraz alışılmadık gelebilir. Gerçek dünyada hareket eden şeyler aniden durmak yerine yavaşlar. Yumuşak geçişler ayrıca başlangıçta yavaş hisler yaratarak zararlı etkiye sahiptir ve bu da site veya uygulamanızdaki duyarlılık algısını olumsuz etkiler.
Kolaylaştırılmış animasyon görün
Yumuşak geçiş ve doğrusal animasyonlara benzer şekilde yumuşak geçiş animasyonu kullanmak için bu animasyonun anahtar kelimesini kullanabilirsiniz:
transition: transform 500ms ease-in;
Yumuşak giriş çıkış animasyonları
![Yumuşak giriş çıkış animasyon eğrisi.](https://web.dev/static/articles/the-basics-of-easing/image/ease-out-animation-curve-ed508ac2b4378.png?authuser=6&hl=tr)
İçeride ve dışarıya yumuşak geçiş yapmak, hızlanan ve yavaşlayan bir arabaya benzer ve makul bir şekilde kullanıldığında, yalnızca rahatlamaktan daha etkileyici bir etki sağlayabilir.
Animasyonun yavaş yavaş başlamasından dolayı, fazla uzun animasyon süreleri kullanmayın. 300-500 ms aralığındaki bir değer genelde uygundur ancak kesin sayı büyük ölçüde projenizin verdiği izlenime bağlıdır. Bununla birlikte, yavaş başlangıç, hızlı orta ve yavaş son nedeniyle animasyonda artan kontrast kullanıcılar için oldukça tatmin edici olabilir.
Giriş yumuşak geçiş animasyonu görün
Yumuşak giriş animasyonu için ease-in-out
CSS anahtar kelimesini kullanabilirsiniz:
transition: transform 500ms ease-in-out;