Yumuşak geçişle ilgili temel bilgiler

Animasyonlarınızı nasıl yumuşatacağınızı ve ağırlık vereceğinizi öğrenin.

Paul Lewis

Doğada hiçbir şey bir noktadan diğerine doğrusal olarak hareket etmez. Gerçekte ise nesneler hareket ederken hızlanır veya yavaşlar. Beynimiz bu tür hareketleri bekleyecek şekilde programlanmıştır. Bu nedenle, animasyon oluştururken bu durumu kendi avantajınıza kullanmalısınız. Doğal hareket, kullanıcılarınızın uygulamalarınızda daha rahat hissetmesini sağlar ve bu da genel olarak daha iyi bir 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 yavaşlama animasyonları seçin.
• Kısa tutamayacaksanız yavaş giriş veya yavaş giriş-çıkış animasyonlarından kaçının. Bu animasyonlar son kullanıcılara yavaş gelebilir.

Klasik animasyonda, yavaş başlayıp hızlanan hareket için "yavaş giriş", hızlı başlayıp yavaşlayan hareket için "yavaş çıkış" terimi kullanılır. Web'de bunlar için en yaygın olarak kullanılan terminoloji sırasıyla "yavaşça girme" ve "yavaşça çıkma"dır. Bazen ikisi birleştirilir ve buna "yavaşça girip çıkma" denir. Yumuşatma, animasyonu daha az sert veya belirgin hale getirme işlemidir.

Anahtar kelimeleri kolaylaştırma

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şak geçişini (bazen timing olarak da adlandırılır) etkileyen anahtar kelimeler kullanabilirsiniz. Ayrıca yumuşak geçişinizi tamamen özelleştirebilirsiniz. Bu sayede uygulamanızın kişiliğini ifade etme konusunda çok daha fazla özgürlüğe sahip olursunuz.

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ı olan geçişler oluşturmanıza olanak tanıyan steps anahtar kelimesini de kullanabilirsiniz. Ancak yukarıda listelenen anahtar kelimeler, doğal hissettiren animasyonlar oluşturmak için en kullanışlı olanlardır.

Doğrusal animasyonlar

Herhangi bir yumuşak geçiş içermeyen animasyonlar doğrusal olarak adlandırılır. Doğrusal geçiş grafiği şu şekilde görünür:

Zaman geçtikçe değer eşit miktarlarda artar. Doğrusal hareketle, nesneler robotik ve doğal olmayan bir his verir ve bu, kullanıcıların rahatsız edici bulduğu bir şeydir. Genel olarak doğrusal hareketten kaçınmanız gerekir.

Animasyonlarınızı CSS veya JavaScript kullanarak kodlarken her zaman doğrusal hareket seçeneği olduğunu göreceksiniz.

Doğrusal animasyon görme

Yukarıdaki efekti CSS ile elde etmek için kod aşağıdaki gibi görünür:

transition: transform 500ms linear;

Yavaşlayarak çıkış animasyonları

Yavaş çıkış, animasyonun doğrusal animasyonlara göre daha hızlı başlamasına neden olur ve sonunda yavaşlama da vardır.

Yavaş çıkış, genellikle kullanıcı arayüzü çalışmaları için en iyisidir. Çünkü hızlı başlangıç, animasyonlarınıza duyarlılık hissi verirken sonunda doğal bir yavaşlamaya olanak tanır.

Yavaşlama animasyonunu inceleme

Yavaşlama efekti elde etmenin birçok yolu vardır ancak en basiti CSS'deki ease-out anahtar kelimesidir:

transition: transform 500ms ease-out;

Yavaşça girme animasyonları

Yavaş giriş animasyonları yavaş başlar ve hızlı biter. Bu, yavaş çıkış animasyonlarının tam tersidir.

Bu tür animasyonlar, yavaşça düşmeye başlayıp yere hızlıca çarpan ağır bir taş gibidir.

Ancak etkileşim açısından bakıldığında, yavaş girişler ani bitişleri nedeniyle biraz sıra dışı gelebilir. Gerçek dünyada hareket eden şeyler aniden durmak yerine yavaşlama eğilimindedir. Yavaş girişler, başlarken yavaşlık hissi uyandırma gibi zararlı bir etkiye de sahiptir. Bu da siteniz veya uygulamanızdaki yanıt verme hızı algısını olumsuz etkiler.

Yavaşça belirme animasyonunu inceleme

Yavaşça girme animasyonunu kullanmak için yavaşça çıkma ve doğrusal animasyonlara benzer şekilde anahtar kelimesini kullanabilirsiniz:

transition: transform 500ms ease-in;

Yavaşça başlayıp yavaşça biten animasyonlar

Hem yavaşça girme hem de yavaşça çıkma, bir arabanın hızlanıp yavaşlamasına benzer ve dikkatli kullanıldığında yalnızca yavaşça çıkmaya kıyasla daha dramatik bir etki sağlayabilir.

Animasyonun yavaşça başlama hızı nedeniyle çok uzun bir animasyon süresi kullanmayın. Genellikle 300-500 ms aralığında bir değer uygundur ancak tam sayı, projenizin yapısına bağlıdır. Bununla birlikte, yavaş başlangıç, hızlı orta kısım ve yavaş bitiş nedeniyle animasyonda kontrast artar. Bu da kullanıcılar için oldukça tatmin edici olabilir.

Yavaşça girip çıkan animasyon örneği

Yavaşça başlayıp yavaşça biten bir animasyon elde etmek için ease-in-out CSS anahtar kelimesini kullanabilirsiniz:

transition: transform 500ms ease-in-out;