Penjana Cubic Bezier

Menaip cubic-bezier(x1, y1, x2, y2) secara manual dan memuat semula halaman untuk memeriksa rasa adalah cara yang perlahan untuk menala animasi. Penjana ini menutup gelung itu: seret mana-mana pemegang titik kawalan pada lengkung, atau taip nombor tepat ke dalam medan x1/y1/x2/y2, dan lengkung, rentetan CSS siap salin serta pratonton animasi langsung semuanya dikemas kini pada setiap perubahan — tiada langkah bina, tiada muat semula.

Kedua-dua paksi berfungsi berbeza dengan sengaja. x1 dan x2 kekal diikat antara 0 dan 1, kerana itulah yang sebenarnya dikehendaki spesifikasi CSS daripada fungsi pemasaan cubic-bezier() — nilai di luar julat itu adalah tidak sah. y1 dan y2 tiada had sedemikian: seret pemegang melebihi bahagian atas kotak atau ke bawah bahagian bawah, dan lengkung melampaui melepasi permulaan atau penghujungnya, yang merupakan cara kesan gaya spring dan lantunan dibina daripada satu lengkung pelancaran tunggal.

Melihat nombor tidak sama dengan melihat gerakan, jadi pratonton menjalankan dua bola serupa sebelah-menyebelah dalam satu gelung: satu bergerak menggunakan lengkung tersuai anda, satu lagi bergerak pada rentak linear malar biasa. Menonton mereka berlumba adalah cara terpantas untuk mengetahui sama ada lengkung pelancaran benar-benar menghasilkan rasa yang anda mahukan, sebelum ia sampai ke helaian gaya. Halaman pratetap — nombor sebenar disebalik kata kunci ease-in-out CSS sendiri, anggaran lampauan jujur yang sesetengah orang panggil lantunan, dan lengkung standard Material Design terbitan Google — adalah titik permulaan sedia yang boleh anda seret dan bukannya titik kawalan kosong.

Semuanya berjalan setempat dalam pelayar anda: tiada muat naik, tiada akaun, tiada perjalanan pergi balik pelayan, dan penjana terus berfungsi luar talian setelah halaman dimuatkan.