Pelajari cara melembutkan dan memberikan pembobotan untuk animasi Anda.
Tidak ada di alam yang bergerak secara linear dari satu titik ke titik lainnya. Dalam kenyataannya, segala sesuatunya cenderung mengalami percepatan atau perlambatan ketika mereka bergerak. Otak kita sudah diatur untuk mengharapkan gerakan semacam ini, jadi ketika membuat animasi, Anda harus menggunakannya untuk keuntungan Anda. Gerakan alami membuat pengguna merasa lebih nyaman dengan aplikasi Anda, yang pada akhirnya memberikan pengalaman yang lebih baik secara keseluruhan.
Ringkasan
- Easing membuat animasi Anda terasa lebih alami.
- Pilih animasi easy-out untuk elemen UI.
- Hindari animasi easy-in atau easy-in-out kecuali jika Anda dapat membuatnya tetap pendek; mereka cenderung merasa lambat bagi pengguna akhir.
Dalam animasi klasik, istilah untuk gerakan yang dimulai perlahan lalu dipercepat adalah "{i>slow in<i}" dan untuk gerakan yang dimulai dengan cepat dan melambat adalah "{i>slow out<i}". Istilah yang paling umum digunakan di web untuk ini adalah “ease in” dan “ease out”. Kadang-kadang keduanya digabungkan, yang disebut "{i>ease in out<i}". Kemudian, {i>easing<i} adalah proses untuk membuat animasi yang tidak terlalu parah atau diucapkan.
Kata kunci easing
Transisi dan animasi CSS memungkinkan Anda memilih jenis easing yang ingin digunakan untuk animasi Anda. Anda dapat menggunakan kata kunci yang memengaruhi easing (atau terkadang disebut timing) dari animasi yang dimaksud. Anda juga dapat sepenuhnya menyesuaikan easing Anda, yang memberi Anda lebih banyak kebebasan untuk mengekspresikan kepribadian aplikasi Anda.
Berikut beberapa kata kunci yang dapat Anda gunakan di CSS:
linearease-inease-outease-in-out
Sumber: CSS Transitions, W3C
Anda juga dapat menggunakan kata kunci steps, yang memungkinkan Anda membuat transisi yang memiliki langkah-langkah terpisah, tetapi kata kunci yang tercantum di atas adalah yang paling berguna untuk membuat animasi yang terasa alami.
Animasi linear
Animasi tanpa jenis easing apa pun disebut sebagai linear. Grafik transisi linear terlihat seperti ini:
Ketika waktu berjalan, nilainya meningkat dalam jumlah yang sama. Dengan gerakan linier, sesuatu cenderung terasa seperti robot dan tidak wajar, dan ini adalah sesuatu yang membuat pengguna tidak nyaman. Secara umum, Anda harus menghindari gerak linier.
Apakah Anda membuat kode animasi menggunakan CSS atau JavaScript, Anda akan menemukan bahwa selalu ada pilihan untuk gerakan linier.
Untuk mencapai efek di atas dengan CSS, kode akan terlihat seperti ini:
transition: transform 500ms linear;
Animasi {i>easing-out<i}
{i>Easing out <i}menyebabkan animasi dimulai lebih cepat daripada yang linear, dan juga mengalami perlambatan di bagian akhir.
Easing out biasanya paling cocok untuk pekerjaan antarmuka pengguna, karena awal yang cepat memberikan kesan responsif pada animasi, dan masih memungkinkan perlambatan alami di bagian akhir.
Ada banyak cara untuk mendapatkan efek kemudahan, tetapi yang paling mudah adalah kata kunci ease-out di CSS:
transition: transform 500ms ease-out;
Animasi kemudahan
Animasi {i>ease-in<i} dimulai dengan lambat dan berakhir dengan cepat, yang merupakan kebalikan dari animasi {i>easing-out<i}.
Animasi semacam ini seperti batu berat yang jatuh, di mana ia mulai perlahan dan menginjak tanah dengan cepat dengan dentuman mematikan.
Namun, dari sudut pandang interaksi, kemudahan bisa terasa sedikit tidak biasa karena akhir yang tiba-tiba itu; benda yang bergerak di dunia nyata cenderung mengalami perlambatan, bukan berhenti tiba-tiba. Ease-in juga memiliki efek merugikan yaitu terasa lambat saat memulai, yang berdampak negatif terhadap persepsi daya respons di situs atau aplikasi Anda.
Untuk menggunakan animasi easy-in, sama seperti animasi “ease-out” dan linear, Anda dapat menggunakan kata kuncinya:
transition: transform 500ms ease-in;
Animasi kemudahan masuk
Easing baik masuk maupun keluar mirip dengan mobil yang berakselerasi dan melambat, dan jika digunakan dengan bijak, dapat memberikan efek yang lebih dramatis daripada sekadar easing.
Jangan menggunakan durasi animasi yang terlalu lama, karena awal animasi melemah. Rentang 300-500 md biasanya cocok, tetapi jumlah pastinya sangat bergantung pada nuansa proyek Anda. Meskipun demikian, karena awal yang lambat, cepat di tengah, dan lambat di akhir, ada peningkatan kontras dalam animasi, yang bisa cukup memuaskan bagi pengguna.
Untuk mendapatkan animasi easy-in-out, Anda dapat menggunakan kata kunci CSS ease-in-out:
transition: transform 500ms ease-in-out;