Projeniz için uygun yumuşatmayı seçin. Yumuşak geçiş; yumuşatma, çıkış veya her ikisi de olabilir. Belki daha fazla eğlence için zıplamaları kullanın!
Animasyonlarda yumuşatma için sunulan çeşitli seçeneklerden, projelerinizde ne tür bir yumuşak kullanmanız gerektiğinden ve animasyonlarınızda ne tür süreler olması gerektiğinden bahsettik?
Özet
- Kullanıcı arayüzü öğeleri için yumuşak geçiş animasyonları kullanın; Quintic yumuşak çıkış, hızlı ve kolay bir süreç olsa da oldukça kullanışlıdır.
- Animasyon süresini kullandığınızdan emin olun. Yumuşak geçişler ve yumuşatmalar 200 ms-500 ms; hemen çıkmalar ve esnek yumuşatmalar ise 800 ms-1200 ms. arasında olmalıdır.
Yumuşak geçiş, genel olarak doğru karar ve kesinlikle iyi bir varsayılan seçimdir. Bu, animasyonlarınıza yanıt verme hissi vererek hızlı başlar ancak sonda güzel bir yavaşlama hissi verir.
CSS'de ease-out anahtar kelimesiyle belirtilen denklemin ötesinde, iyi bilinen bir dizi yumuşak geçiş denklemi vardır. Bu denklemler "agresiflik" aralığındadır. Hızlı yumuşak geçiş efekti için Quintic yumuşak çıkış özelliğini kullanın.
Oldukça yumuşak bir çıkış animasyonu görün
Diğer yumuşatma denklemleri, özellikle hemen çıkmalar veya esnek yumuşatmalar dikkatli bir şekilde ve yalnızca projenize uygun olduğunda kullanılmalıdır. Rahatsız edici bir animasyon gibi, kullanıcıyı bir deneyimden çıkaran birkaç şey vardır. Projeniz eğlence amaçlı değilse kullanıcı arayüzü etrafında zıplayan öğeler kullanmayın. Öte yandan, eğlenceli olması gereken bir site oluşturuyorsanız hemen çıkma özelliğini kullanın!
Kolay denemeler yapın, hangilerinin projenizin kişiliğine uyduğunu görün ve oradan devam edin. 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 agresif ve keskin bir animasyon; çok uzun, engelleyici ve rahatsız edici olacaktır.
- Yumuşak çıkışlar: Yaklaşık 200 ms-500 ms. Bu sayede göz, animasyonu görebilir ancak herhangi bir engel oluşturmaz.
- Yumuşak giriş süresi: Yaklaşık 200 ms-500 ms. Projenin sonunda sarsıntılar olacağını ve zamanlamayla yapılacak hiçbir değişikliğin bu etkiyi yumuşatamayacağını unutmayın.
- Hemen çıkma veya elastik efektler: yaklaşık 800 ms-1200 ms. Esnek veya zıplama efektinin "oturması" için zaman tanımanız gerekir. Bu ek süre olmadığında, animasyonun esnek geri dönen kısmı agresif olacak ve göze rahatsız olacaktır.
Elbette bunlar yalnızca bir yönergedir. Kolaylıklarınıza göre denemeler yapın ve projeleriniz için size en uygun olanı seçin.