Animasyonlarınızı nasıl yumuşatacağınızı ve ağırlık vereceğinizi öğrenin.
Doğadaki hiçbir şey bir noktadan diğerine doğrusal olarak hareket etmez. Gerçekte, hareket eden nesnelerin hızının artması veya azalması normaldir. Beynimiz bu tür hareketleri beklemeye programlanmıştır. Bu nedenle, animasyon oluştururken bu durumu avantajınıza kullanmanız gerekir. Doğal hareket, kullanıcılarınızın uygulamalarınızda daha rahat hissetmesini sağlar. Bu da genel olarak daha iyi bir deneyime yol açar.
Özet
- Easing, animasyonlarınızın daha doğal görünmesini sağlar.
- Kullanıcı arayüzü öğeleri için yavaşça sona eren animasyonlar seçin.
- Kısa tutamıyorsanız yavaş yavaş başlama veya yavaş yavaş bitirme animasyonlarından kaçının. Bu animasyonlar son kullanıcılara yavaş gelebilir.
Klasik animasyonda yavaş başlayan ve hızlanan hareket terimi "yavaş", hızlı başlayıp yavaşlayan hareketler için "yavaş" terimi kullanılır. Web'de bunlar için en yaygın olarak kullanılan terminoloji sırasıyla "yavaşça başlama" ve "yavaşça sonlandırma"dır. Bazen bu iki yöntem birlikte kullanılır. Buna "giriş ve çıkış yumuşatma" denir. Yumuşak geçiş, animasyonun daha az belirgin veya belirgin olmayan hale getirilmesi işlemidir.
Anahtar kelimeleri kolaylaştırma
Hem CSS geçişleri hem de animasyonlar, animasyonlarınızda kullanmak istediğiniz kolaylaştırma türünü seçmenize olanak tanır. Söz konusu animasyonda yumuşak geçişi (veya bazen adlandırıldığı gibi timing) etkileyen anahtar kelimeler kullanabilirsiniz. Ayrıca geçişlerinizi tamamen özelleştirebilirsiniz. Bu sayede uygulamanızın kişiliğini ifade etme konusunda çok daha fazla özgürlük elde edersiniz.
CSS'de kullanabileceğiniz anahtar kelimelerden bazıları şunlardır:
linearease-inease-outease-in-out
Kaynak: CSS Geçişleri, W3C
Ayrık adımlara sahip geçişler oluşturmanıza olanak tanıyan bir steps anahtar kelimesi de kullanabilirsiniz ancak yukarıda listelenen anahtar kelimeler, doğal görünen animasyonlar oluşturmak için en kullanışlı olanlardır.
Doğrusal animasyonlar
Yumuşak geçiş içermeyen animasyonlara doğrusal adı verilir. Doğrusal geçişin grafiği aşağıdaki gibi görünür:
Zaman ilerledikçe değer eşit miktarlarda artar. Doğrusal hareket, her şeyin robotik ve doğal olmayan bir şekilde görünmesine neden olur. Bu da kullanıcıların rahatsız edici bulduğu bir durumdur. 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ı
Yavaşlatma, animasyonun doğrusal olanlara kıyasla daha hızlı başlamasına neden olur ve sonunda yavaşlama da olur.
Yavaş yavaş sona erdirme, genellikle kullanıcı arayüzü çalışmaları için en iyi seçenektir. Çünkü hızlı başlangıç, animasyonlarınıza duyarlı bir his verir ve sona doğru doğal bir yavaşlama sağlar.
Yumuşak geçiş animasyonu izleyin
Yavaş yavaş kaybolma efekti elde etmenin birçok yolu vardır ancak en basiti CSS'deki ease-out anahtar kelimesidir:
transition: transform 500ms ease-out;
Yumuşak giriş animasyonları
Yavaş yavaş başlayan ve hızlı biten yavaşlatma animasyonları, yavaş yavaş biten ve hızlı başlayan yavaşlatma animasyonlarının tam tersidir.
Bu tür animasyonlar, yavaş başlayan ve yere çarptığında tok bir ses çıkaran ağır bir taş gibidir.
Ancak etkileşim açısından, yumuşak başlangıçlar ani sonları nedeniyle biraz sıra dışı gelebilir. Gerçek dünyada hareket eden nesneler aniden durmak yerine yavaşlama eğilimindedir. Yavaş başlatma, başlangıçta yavaş bir his uyandırarak sitenizin veya uygulamanızın duyarlılığı algısını olumsuz etkiler.
Yumuşak başlangıç animasyonu görme
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ı
Hem sesin artması hem de azalması, bir aracın hızlanması ve yavaşlamasına benzer. Akıllıca kullanıldığında, sesin azalması etkisinden daha dramatik bir etki sağlayabilir.
Animasyonun yavaş yavaş başlaması nedeniyle aşırı uzun animasyon süreleri kullanmayın. Genellikle 300-500 ms aralığında bir değer uygundur ancak tam sayı büyük ölçüde projenizin tarzına bağlıdır. Bununla birlikte, yavaş başlangıç, hızlı orta kısım ve yavaş bitiş nedeniyle animasyonda daha fazla kontrast vardır. Bu durum kullanıcılar için oldukça tatmin edici olabilir.
Giriş ve çıkış animasyonu görme
Yumuşak giriş animasyonu almak için ease-in-out CSS anahtar kelimesini kullanabilirsiniz:
transition: transform 500ms ease-in-out;