Animasyonlarınızı nasıl yumuşatacağınızı ve ağırlıklandıracağınızı öğrenin.
Doğadaki hiçbir şey bir noktadan diğerine doğrusal olarak hareket etmez. Gerçekte, nesneler hareket ettikçe hızlanma veya yavaşlama eğilimindedir. Beynimiz bu tür hareketler beklemeye programlıdır. Bu nedenle, animasyon oluştururken bunu kendi yararınıza kullanmalısınız. Doğal hareketler, kullanıcılarınızın uygulamalarınızla daha rahat etmesini sağlar ve böylece genel olarak daha iyi bir deneyime sahip olur.
Ö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.
- Kısa tutmadığınız sürece yumuşak geçişli veya yumuşak girişli animasyonlardan kaçının. son kullanıcılara yavaş hissederler.
Klasik animasyonda, yavaş başlayan ve hızlanan hareket terimi "yavaş"tır. ve hızlı başlayıp yavaşlayan hareketler için ise "yavaş"tır. Web'de bu terimler için en yaygın olarak kullanılan terminoloji sırasıyla “kolayca giriş” ve “yumuşak geçiş” terimleridir. Bazen bu ikisi birleştirilir. Buna "kolay giriş" denir. Bu durumda yumuşak geçiş, animasyonu daha önemsiz hale getirme sürecidir.
Anahtar kelimelerde yumuşak geçiş
CSS geçişleri ve animasyonlar, animasyonlarınız için kullanmak istediğiniz yumuşatma türünü seçmenize olanak tanır. Söz konusu animasyonun yumuşatmasını (veya bazen timing olarak adlandırıldığı gibi) etkileyen anahtar kelimeler kullanabilirsiniz. Ayrıca, yumuşak geçiş işlemini tamamen özelleştirerek uygulamanızın kişiliğini ifade etme konusunda çok daha fazla özgürlükte olabilirsiniz.
CSS'de kullanabileceğiniz anahtar kelimelerden bazıları şunlardır:
linearease-inease-outease-in-out
Kaynak: CSS Transitions, W3C
Ayrıca, ayrı adımlar içeren geçişler oluşturmanızı sağlayan bir steps anahtar kelimesi de kullanabilirsiniz; ancak yukarıda listelenen anahtar kelimeler, doğal görünen animasyonlar oluşturmak için en yararlı olanlardır.
Doğrusal animasyonlar
Yumuşak geçiş içermeyen animasyonlara doğrusal adı verilir. Doğrusal geçiş grafiği şu şekilde görünür:
Zaman ilerledikçe değer, eşit miktarlarda artar. Doğrusal hareket söz konusu olduğunda, nesneler robotik ve doğal olmayan gibi görünür. Bu da kullanıcıların rahatsız edici bulduğu bir şeydir. Genel olarak, doğrusal hareketten kaçınmalısınız.
Animasyonlarınızı ister CSS veya JavaScript kullanarak kodluyor olun, her zaman doğrusal hareket seçeneğinin bulunduğunu göreceksiniz.
Yukarıdaki efekti CSS ile elde etmek için kod aşağıdaki gibi görünür:
transition: transform 500ms linear;
Yumuşak çıkış animasyonları
Yumuşak geçiş, animasyonun doğrusal olanlardan daha hızlı başlatılmasına neden olur ve animasyonun sonunda yavaşlama vardır.
Hızlı başlatma, animasyonlarınızda duyarlılık sağlarken sonda doğal bir yavaşlamaya da olanak tanıdığından yumuşak geçiş genellikle kullanıcı arayüzü çalışmaları için en iyi seçenektir.
Yumuşak geçiş animasyonu izleyin
Yumuşak geçiş efekti sağlamanın 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ş animasyonları yavaş başlar ve hızlı biter. Bu, yumuşak geçiş animasyonlarının aksine.
Bu animasyon türü, ağır bir taşın düşmesine benzer. Yavaş yavaş başlar ve büyük bir yumrukla hızla yere serer.
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şlama eğilimindedir. Yumuşak geçişler, başlangıçta yavaş hissetmek gibi zararlı bir etkiye sahiptir. Bu da site veya uygulamanızdaki yanıt verme algısını olumsuz etkiler.
Yumuşak geçiş animasyonu izleyin
Yumuşak geçiş animasyonu ve doğrusal animasyonlara benzer şekilde, yumuşak geçiş animasyonu kullanmak için bu öğenin anahtar kelimesini kullanabilirsiniz:
transition: transform 500ms ease-in;
Yumuşak giriş animasyonları
Yumuşak ve yumuşak geçiş, bir arabanın hızlanıp yavaşlamasına benzer. Aklını kullanarak alındığında, sadece yumuşak geçişi engelleyen bir etki yaratabilir.
Animasyonda yumuşak geçiş yavaşlığı nedeniyle aşırı uzun bir animasyon süresi kullanmayın. 300-500 ms aralığındaki bir değer genellikle uygundur ancak tam sayı büyük ölçüde projenizin hissine göre değişir. Bununla birlikte, yavaş başlatma, hızlı orta ve yavaş bitiş nedeniyle animasyonda daha yüksek kontrast oluşturulur. Bu da kullanıcılar için oldukça tatmin edici olabilir.
Yumuşak giriş animasyonu izleyin
Yumuşak giriş animasyonu almak için ease-in-out CSS anahtar kelimesini kullanabilirsiniz:
transition: transform 500ms ease-in-out;