Pilih easing yang sesuai untuk proyek Anda, apakah itu easing masuk, keluar, atau keduanya. Bahkan mungkin gunakan pantulan untuk kesenangan ekstra!
Setelah membahas berbagai pilihan yang tersedia untuk {i>easing<i} dalam animasi, jenis apa yang harus Anda gunakan dalam proyek Anda, dan berapa durasi yang harus digunakan dalam animasi Anda?
Ringkasan
- Menggunakan animasi easy-out untuk elemen UI; sebuah kemudahan Quintic adalah kemudahan yang sangat bagus, meskipun cepat, mudah.
- Pastikan untuk menggunakan durasi animasi; easy-out dan easy-in harus 200 ms-500 ms, sedangkan elevasi elastis dan memantul harus dalam durasi yang lebih lama yaitu 800 ms-1200 ms.
Secara umum, ease-out adalah keputusan yang tepat, dan tentu saja standar yang baik. Cepat untuk dimulai, memberi animasi Anda kesan responsif, yang diinginkan, tetapi dengan perlambatan yang bagus di akhir.
Ada sekelompok persamaan easy-out yang terkenal di luar yang ditentukan dengan kata kunci ease-out di CSS, yang berkisar dalam "agresivitas". Untuk efek melonggarkan dengan cepat, pertimbangkan ease-out Quintic.
Lihat animasi easy-out Quintic
Persamaan easing lainnya, terutama easing memantul atau elastis, harus digunakan dengan hemat, dan hanya jika sesuai untuk proyek Anda. Ada beberapa hal yang membuat pengguna keluar dari pengalaman seperti animasi yang mengagetkan. Jika proyek Anda tidak dimaksudkan untuk bersenang-senang, maka 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. Untuk mengetahui daftar lengkap jenis easing, beserta demonya, lihat easings.net.
Pilih durasi animasi yang tepat
Setiap animasi yang ditambahkan ke project Anda harus memiliki durasi yang benar. Terlalu pendek dan animasi akan terasa agresif dan tajam; terlalu lama dan hal itu akan mengganggu dan menjengkelkan.
- Ease-out: sekitar 200 md-500 md. Hal ini memberi kesempatan bagi mata untuk melihat animasi, tetapi tidak terasa mengganggu.
- Kemudahan proses: sekitar 200 md-500 md. Perlu diingat bahwa efek akan tersentak di akhir, dan perubahan waktu tidak akan mengurangi dampak tersebut.
- Efek memantul atau elastis: sekitar 800 md-1200 md. Anda perlu memberi waktu agar efek elastis atau memantul "selesai". Tanpa waktu tambahan ini, bagian memantul elastis dari animasi akan terlihat agresif dan tidak nyaman dipandang.
Tentu saja, ini hanyalah panduan. Bereksperimenlah dengan kemudahan Anda sendiri dan pilih mana yang cocok untuk proyek Anda.