Pelajari cara melembutkan dan memberikan bobot pada animasi Anda.
Tidak ada apa pun di alam ini yang bergerak secara linear dari satu titik ke titik lainnya. Kenyataannya, sesuatu cenderung mengalami percepatan atau perlambatan selagi bergerak. Otak kita sudah terbiasa mengharapkan gerakan semacam ini, jadi ketika membuat animasi, Anda harus memanfaatkan gerakan ini. Gerakan alami membuat pengguna merasa lebih nyaman dengan aplikasi Anda, yang pada akhirnya menghasilkan pengalaman yang lebih baik secara keseluruhan.
Ringkasan
- Easing membuat animasi Anda terasa lebih alami.
- Memilih animasi easy-out untuk elemen UI.
- Hindari animasi easy-in atau easy-in-out kecuali yang dapat membuatnya tetap pendek; mereka cenderung terasa lambat bagi pengguna akhir.
Dalam animasi klasik, istilah untuk gerakan yang dimulai perlahan kemudian dipercepat adalah "slow in", dan untuk gerakan yang dimulai dengan cepat lalu melambat adalah "slow out". Terminologi yang paling umum digunakan di web untuk hal tersebut adalah “{i>ease in<i}” dan “{i>ease out<i}”. Terkadang keduanya digabungkan, yang disebut “ease in out”. Dengan demikian, easing benar-benar proses untuk membuat animasi lebih ringan atau mudah 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 kadang-kadang disebut timing) animasi yang dimaksud. Anda juga dapat sepenuhnya menyesuaikan easing Anda, yang memberi Anda lebih banyak kebebasan untuk mengekspresikan kepribadian aplikasi.
Berikut adalah 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, nilai meningkat dalam jumlah yang setara. Dengan gerakan linier, sesuatu cenderung terasa seperti robot dan tidak wajar, dan ini adalah sesuatu yang mengagetkan pengguna. Secara umum, Anda harus menghindari gerakan linear.
Apakah Anda sedang melakukan pengkodean animasi menggunakan CSS atau JavaScript, Anda akan menemukan bahwa selalu ada pilihan untuk gerakan linear.
Untuk mendapatkan efek di atas dengan CSS, kodenya akan terlihat seperti ini:
transition: transform 500ms linear;
Animasi Ease-out
Easing out menyebabkan animasi dimulai lebih cepat daripada animasi linear, dan juga melambat di akhir.
Easing out biasanya paling cocok untuk pekerjaan antarmuka pengguna, karena awal yang cepat membuat animasi Anda terasa responsif, tetapi tetap memungkinkan perlambatan alami di akhir animasi.
Ada banyak cara untuk mendapatkan efek easy out, tetapi cara paling sederhana adalah kata kunci ease-out di CSS:
transition: transform 500ms ease-out;
Animasi Ease-in
Animasi {i>Ease-in<i} dimulai dengan perlahan dan berakhir dengan cepat, yang merupakan kebalikan dari animasi meluncur.
Animasi semacam ini seperti sebuah batu berat yang jatuh, yang dimulai perlahan-lahan dan menghantam tanah dengan cepat dengan dentuman mematikan.
Namun, dari sudut pandang interaksi, easy-in terasa sedikit tidak biasa karena akhir yang tiba-tiba; sesuatu yang bergerak di dunia nyata mengalami perlambatan, bukan langsung berhenti tiba-tiba. Ease-in juga memiliki efek yang merugikan yaitu terasa lambat saat dimulai, yang berdampak negatif terhadap persepsi daya respons di situs atau aplikasi Anda.
Untuk menggunakan animasi easy-in, mirip dengan animasi easy-out dan linear, Anda dapat menggunakan kata kuncinya:
transition: transform 500ms ease-in;
Animasi Ease-in-out
Easing masuk dan keluar mirip dengan mobil yang berakselerasi dan melambat, dan jika digunakan dengan bijak, dapat memberikan efek yang lebih dramatis daripada sekadar easing keluar.
Jangan gunakan durasi animasi yang terlalu lama, karena awal animasi yang mulai melambat. Sesuatu dalam kisaran 300-500 md biasanya cocok, tetapi jumlah yang tepat sangat bergantung pada nuansa proyek Anda. Meskipun demikian, karena awal yang lambat, cepat di tengah, dan akhir yang lambat, ada peningkatan kontras di 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;