Pilih easing yang sesuai untuk proyek Anda, apakah easing masuk, keluar, atau keduanya. Bahkan mungkin gunakan pantulan untuk kesenangan ekstra!
Setelah membahas berbagai pilihan yang tersedia untuk easing di animasi, apa yang harus Anda gunakan dalam proyek Anda, dan berapa durasi yang sebaiknya digunakan dalam animasi Anda?
Ringkasan
- Gunakan animasi easy-out untuk elemen UI; easy-out Quintic adalah fitur yang sangat bagus, meskipun cepat, dan mudah digunakan.
- Pastikan untuk menggunakan durasi animasi; easy-out dan easy-in harus berdurasi 200 md-500 md, sedangkan easing memantul dan elastis harus memiliki durasi yang lebih lama yaitu 800 md-1.200 md.
Secara umum, ease-out adalah keputusan yang tepat, dan tentu saja merupakan default yang baik. Proses ini cepat untuk dimulai, membuat animasi Anda terasa responsif, yang memang diinginkan, tetapi dengan perlambatan yang bagus di akhir.
Ada grup persamaan easy-out yang terkenal di luar yang ditentukan dengan kata kunci ease-out di CSS, yang berkisar dalam "agresivitas"-nya. Untuk efek easy-out yang cepat, pertimbangkan easing Quintic.
Lihat animasi easy-out Quintic
Persamaan easing lainnya, terutama easing memantul atau elastis, harus digunakan seperlunya, dan hanya jika sesuai dengan proyek Anda. Ada beberapa hal yang bisa membuat pengguna keluar dari pengalaman, seperti animasi yang mengagetkan. Jika proyek Anda tidak dimaksudkan untuk kesenangan, jangan gunakan elemen yang memantul di sekitar UI. Sebaliknya, jika Anda membuat situs yang seharusnya ringan, maka tentu saja gunakan pantulan!
Bermain-mainlah dengan mudah, lihat mana yang cocok dengan kepribadian proyek Anda, dan lanjutkan dari sana. Untuk daftar lengkap jenis easing, beserta demonya, lihat easings.net.
Pilih durasi animasi yang tepat
Setiap animasi yang ditambahkan ke proyek Anda harus memiliki durasi yang benar. Terlalu pendek dan animasi akan terasa agresif dan tajam; terlalu lama dan akan mengganggu dan menjengkelkan.
- Ease-out: sekitar 200 md-500 md. Hal ini memberi kesempatan bagi mata untuk melihat animasi, tetapi tidak merasa mengganggu.
- Ease-in: sekitar 200 md-500 md. Ingatlah bahwa efek akan tersentak di akhir dan perubahan waktu tidak akan melembutkan dampak itu.
- Efek memantul atau elastis: sekitar 800 md-1.200 md. Anda harus memberikan waktu agar efek elastis atau memantul "selesai". Tanpa waktu tambahan ini, bagian memantul elastis dari animasi akan terlihat agresif dan tidak nyaman dilihat.
Tentu saja, ini hanyalah panduan. Bereksperimenlah dengan easing Anda sendiri dan pilih apa yang cocok untuk proyek Anda.