Bertualanglah dan buat animasi yang benar-benar kustom untuk proyek Anda.
Terkadang Anda tidak ingin menggunakan kata kunci easing yang disertakan dengan CSS, atau Anda akan menggunakan Animasi Web atau framework JavaScript. Dalam hal ini, Anda biasanya bisa menentukan kurva (atau persamaan), dan ini memberikan Anda banyak kontrol terhadap nuansa animasi project.
Ringkasan
- Easing khusus memungkinkan Anda untuk memberikan lebih banyak kepribadian pada proyek Anda.
- Anda dapat membuat kurva cubic Bézier yang menyerupai kurva animasi default (ease-out, ease-in, dll.), tetapi dengan penekanan pada tempat yang berbeda.
- Gunakan JavaScript ketika Anda membutuhkan lebih banyak kontrol atas pengaturan waktu dan perilaku animasi, misalnya, animasi elastis atau memantul.
Jika membuat animasi dengan CSS, Anda akan mendapati bahwa Anda bisa menentukan kurva cubic Bézier untuk menetapkan waktunya. Faktanya, kata kunci ease, ease-in, ease-out, dan linear dipetakan ke kurva Bézier yang telah ditentukan sebelumnya, yang dijelaskan secara mendetail dalam spesifikasi transisi CSS dan spesifikasi Animasi Web.
Kurva Bézier ini mengambil empat nilai, atau dua pasang angka, dengan setiap pasangan menggambarkan koordinat X dan Y dari titik kontrol kurva kubik Bézier. Titik awal dari kurva Bézier memiliki koordinat (0, 0) dan titik akhir memiliki koordinat (1, 1); Anda bisa menyetel nilai-nilai X dan Y dari dua titik kontrol. Nilai X untuk dua titik kontrol harus antara 0 dan 1, dan nilai Y setiap titik kontrol bisa melebihi batas [0, 1], meskipun spesifikasinya tidak menyebutkan seberapa banyak.
Mengubah setiap nilai X dan Y dari titik kontrol memberikan kurva yang sangat berbeda, dan karena itu memberikan nuansa sangat berbeda terhadap animasi Anda. Misalnya, jika titik kontrol pertama berada di area kanan bawah, animasi akan dimulai dengan lambat. Jika ada di area kiri atas, animasi akan cepat dimulai. Sebaliknya, jika titik kontrol kedua ada di daerah kanan bawah petak, animasi akan cepat di bagian akhir; jika di kiri atas, animasi akan lambat di bagian akhir.
Sebagai perbandingan, berikut ini dua kurva: kurva easy-in-out biasa dan kurva kustom:
Melihat animasi dengan easing kustom
CSS untuk kurva kustom adalah:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Dua angka pertama adalah koordinat X dan Y dari titik kontrol pertama, dan dua angka kedua adalah koordinat X dan Y dari titik kontrol kedua.
Membuat kurva khusus sangat menyenangkan, dan memberikan Anda kontrol yang banyak atas nuansa animasi. Misalnya, pada kurva di atas, Anda bisa melihat bahwa kurva menyerupai kurva ease-in-out klasik, namun dengan ease-in dipersingkat, atau bagian "memulai", dan perlambatan panjang di bagian akhir.
Lakukan eksperimen dengan alat kurva animasi ini dan lihat bagaimana kurva memengaruhi nuansa animasi.
Menggunakan framework JavaScript untuk kontrol yang lebih besar
Terkadang Anda membutuhkan lebih banyak kontrol daripada yang dapat diberikan oleh kurva cubic Bézier. Jika Anda ingin efek memantul elastis, Anda dapat mempertimbangkan untuk menggunakan kerangka kerja JavaScript, karena ini adalah efek yang sulit dicapai dengan CSS atau Animasi Web.
TweenMax
Salah satu framework yang andal adalah TweenMax dari GreenSock (atau TweenLite jika Anda ingin membuat semuanya tetap ringan), karena Anda mendapatkan banyak kontrol darinya dalam library JavaScript yang kecil, dan ini adalah codebase yang sangat matang.
Untuk menggunakan TweenMax, sertakan skrip berikut di halaman Anda:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Setelah skrip ditempatkan, Anda bisa memanggil TweenMax terhadap elemen Anda dan memberitahukan properti yang diinginkan, bersama tiap easing yang Anda inginkan. Ada banyak pilihan easing yang bisa Anda gunakan; kode di bawah menggunakan ease-out elastis:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Dokumentasi TweenMax menyoroti semua opsi yang Anda miliki, sehingga layak dibaca.