Projeniz için uygun yumuşatmayı seçin. Yumuşak geçiş (yumuşak geçiş), çıkış veya her ikisi de olabilir. Hatta daha fazla eğlence için hemen çıkmaları bile kullanabilirsiniz.
Animasyonlarda yumuşak geçiş için kullanabileceğiniz çeşitli seçenekleri konuşmuştuk. Projelerinizde ne tür kullanmanız gerektiğini ve animasyonlarınızın ne tür sürelere sahip olması gerektiğini açıklamışsınızdır.
Özet
- Kullanıcı arayüzü öğeleri için yumuşak geçiş animasyonları kullanın; Quintic yumuşatma, hızlı da olsa oldukça kolaydır.
- Animasyon süresini kullandığınızdan emin olun Yumuşak çıkışlar ve yumuşatmalar 200 ms-500 ms arasındayken, hemen çıkmalar ve esnek yumuşatmalar 800 ms-1200 ms arasında daha uzun bir süre olmalıdır.
Genel olarak yumuşak geçiş doğru aramadır ve kesinlikle iyi bir varsayılan ayardır. Hızlıca başlayabilir, animasyonlarınıza duyarlılık hissi veriyor, ancak sonunda güzel bir yavaşlama var.
CSS'deki ease-out anahtar kelimesiyle belirtilen denklemin dışında, iyi bilinen yumuşatma denklemleri grubu vardır. Bu denklemlerin "agresiflikleri" aralığındadır. Hızlı bir yumuşak geçiş efekti için Quintic yumuşak geçiş özelliğini kullanabilirsiniz.
Quintic yumuşak geçiş animasyonu izleyin
Özellikle hemen çıkmalar veya esnek yumuşatmalar olmak üzere diğer yumuşak geçiş denklemleri dikkatli bir şekilde ve sadece projenize uygun olduğunda kullanılmalıdır. Rahatsız edici bir animasyon gibi, kullanıcıları deneyimden çıkaracak birkaç şey vardır. Projenizin amacı eğlenceli değilse kullanıcı arayüzünde zıplayan öğeler olmamalıdır. Neşeli olması gereken bir site oluşturuyorsanız, hemen çıkma özelliğini kullanın!
Kolayca denemeler yapın, hangilerinin projenizin kişiliğine uygun olduğuna bakın ve siz de gerekli adımları atın. Demolarla birlikte yumuşak geçiş türlerinin tam listesi için easings.net sayfasına bakın.
Doğru animasyon süresini seçme
Projenize eklenen tüm animasyonların doğru süreye sahip olması önemlidir. Çok kısa ve animasyon agresif ve keskin görünüyor; çok uzun olur ve hem rahatsız edici olur hem de rahatsız edici olur.
- Yumuşak çıkışlar: Yaklaşık 200 ms-500 ms. Bu şekilde gözün animasyonu görme fırsatı olur ancak görüntü engelleyici bir şey olmaz.
- Yumuşak geçişler: Yaklaşık 200 ms-500 ms. Videonun sonunda sarsıcı olacağını ve zamanlamada yapılacak hiçbir değişikliğin bu etkiyi yumuşatamayacağını unutmayın.
- Sıçrama veya elastik efektler: Yaklaşık 800 ms-1200 ms. Esnek veya zıplama efektinin "düzelmesi" için zaman tanımanız gerekir. Bu ekstra süre olmadan, animasyonun elastik geri dönen kısmı agresif ve rahatsız edici olacaktır.
Tabii ki bunlar sadece yönergelerdir. Rahatça denemeler yapın ve projeleriniz için uygun olduğunu seçin.