Contekan Fungsi Easing
Fungsi easing menentukan laju perubahan sebuah parameter dari waktu ke waktu.
Objek pada kehidupan nyata tidak bergerak dan berhenti dalam sekejap, dan hampir tidak pernah bergerak pada kecepatan konstan. Ketika kita membuka laci, pertama kita lakukan secara cepat lalu pelan setelah hampir keluar. Menjatuhkan benda ke lantai, pertama akan ke bawah kemudian memantul kembali.
Halaman ini membantu anda memilih fungsi easing yang tepat.
Sumber Terbuka
Bantu terjemahkan situs ini ke bahasa anda.
x
t
CSS
Di CSS, properti transisi dan animasi memungkinkan anda untuk memilih menentukan fungsi easing.
.block { transition: transform 0.6s ; }
Ubah di cubic-bezier.com.
Di CSS, fungsi ini dapat diimplementasikan dengan
@keyframes:Ukuran
Memuat...
Posisi
Memuat...
Transparansi
Memuat...
PostCSS
Di PostCSS, fungsi easing ini lebih mudah digunakan. Terdapat plugin postcss-easings yang memudahkan untuk mengambil informasi tentang transisi dari website tersebut.
.block { transition: transform 0.6s ; }
Deklarasinya diubah menjadi seperti diatas ini.
Sayangnya, fungsi easing ini tidak dapat digunakan dengan PostCSS plugin apapun. Tetapi dapat diselesaikan dengan
@keyframes, lihat diatas.Gradien
Memungkinkan untuk membuat gradien dengan menggunakan postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Fungsi matematika
Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript. Variabel x merepresentasikan proses animasi yang absolut diantara 0 (awal dari animasi) dan 1 (akhir dari animasi).
function (x: number): number {
}Dibawah ini kamu melihat kode untuk fungsi easing ini yang ditulis dengan TypeScript. Variabel x merepresentasikan proses animasi yang absolut diantara 0 (awal dari animasi) dan 1 (akhir dari animasi).
function (x: number): number {
}Cek perubahan easing:
Fungsi ini:
Fungsi ini
Fungsi linear:
Fungsi linear