Pelajari cara melembutkan dan memberikan bobot untuk animasi Anda.
Di dunia ini tidak ada yang bergerak secara linear dari satu titik ke titik lainnya. Dalam kenyataannya, sesuatu cenderung mengalami percepatan atau perlambatan ketika mereka bergerak. Otak kita sudah diprogram untuk mengharapkan jenis gerakan ini, sehingga 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 ease-out untuk elemen UI.
- Hindari animasi ease-in atau ease-in-out kecuali Anda bisa membuatnya berdurasi pendek; mereka terasa lambat bagi pengguna akhir.
Dalam animasi klasik, istilah untuk gerakan yang dimulai perlahan lalu bertambah cepat adalah "slow in", dan gerakan yang dimulai cepat lalu melambat disebut sebagai "slow out". Istilah yang paling umum digunakan di web untuk animasi ini adalah “ease in” dan “ease out”. Kadang-kadang keduanya digabungkan, yang disebut "ease in out". Kemudian, easing adalah proses untuk membuat animasi lebih gampang untuk diucapkan.
Kata kunci easing
Transisi dan animasi CSS memungkinkan Anda memilih jenis easing yang ingin digunakan untuk animasi. Anda dapat menggunakan kata kunci yang memengaruhi easing (atau timing, seperti yang kadang-kadang disebut) dari animasi tersebut. Anda juga dapat sepenuhnya menyesuaikan easing Anda, yang memberi Anda lebih banyak kebebasan untuk mengekspresikan kepribadian aplikasi Anda.
Berikut adalah beberapa kata kunci yang dapat Anda gunakan dalam 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, nilai juga mengalami pertambahan dalam jumlah yang setara. 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 sedang melakukan pengkodean animasi menggunakan CSS atau JavaScript, Anda akan mendapati bahwa selalu ada pilihan untuk gerakan linear.
Untuk mendapatkan efek di atas dengan CSS, kodenya akan terlihat seperti berikut ini:
transition: transform 500ms linear;
Animasi ease-out
Easing out menyebabkan animasi dimulai lebih cepat dari yang linear, dan juga melambat di 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 ease-in
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 menghantam tanah dengan cepat dengan dentuman mematikan.
Namun, dari sudut pandang interaksi, ease-in terasa sedikit janggal karena akhir yang tiba-tiba; sesuatu yang bergerak di dunia nyata mengalami perlambatan, bukannya langsung berhenti tiba-tiba. Ease-in juga memiliki efek yang merugikan yaitu terasa lambat ketika dimulai, yang berdampak negatif terhadap persepsi daya respons dalam situs atau aplikasi Anda.
Untuk menggunakan animasi ease-in, sama seperti animasi ease-out dan linear, Anda dapat menggunakan kata kuncinya:
transition: transform 500ms ease-in;
Animasi ease-in-out
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. Sesuatu dalam kisaran 300-500 md biasanya cocok, tetapi jumlah pastinya sangat bergantung pada nuansa proyek Anda. Jadi, karena awal yang lambat, cepat di tengah, dan lambat di akhir, akan ada peningkatan kontras di animasi, yang bisa cukup memuaskan bagi pengguna.
Untuk mendapatkan animasi ease-in-out, Anda dapat menggunakan kata kunci CSS ease-in-out:
transition: transform 500ms ease-in-out;