Penjana Bezier Kubik
Reka fungsi pemasaan CSS cubic-bezier() tersuai dengan menyeret dua titik kawalan, pratonton secara langsung terhadap rujukan linear, kemudian salin nilai sedia.
Hasilnya
Menaip cubic-bezier(x1, y1, x2, y2) dengan tangan dan memuat semula halaman untuk menyemak rasa ialah cara perlahan untuk menala animasi. Penjana ini menutup gelung itu: seret sama ada pemegang titik kawalan pada lengkung, atau taip nombor tepat ke dalam medan x1/y1/x2/y2, dan lengkung, rentetan CSS yang boleh disalin dan pratonton animasi langsung semua kemas kini pada setiap perubahan — tiada langkah binaan, tiada muat semula.
Kedua-dua paksi berfungsi secara berbeza dengan tujuan. x1 dan x2 kekal diapit antara 0 dan 1, kerana itulah yang sebenarnya diperlukan oleh spesifikasi CSS bagi fungsi pemasaan cubic-bezier() — nilai di luar julat itu adalah tidak sah. y1 dan y2 tidak mempunyai had sedemikian: seret pemegang di atas bahagian atas kotak atau di bawah bahagian bawah, dan lengkung melepasi permulaan atau penghujungnya, iaitu bagaimana kesan gaya musim bunga dan lantunan dibina daripada lengkung pelonggaran tunggal.
Melihat nombor tidak sama dengan melihat gerakan, jadi pratonton menjalankan dua bola yang sama bersebelahan pada gelung: satu bergerak menggunakan lengkung tersuai anda, satu lagi bergerak pada rentak linear malar biasa. Menonton mereka berlumba ialah cara terpantas untuk mengetahui sama ada lengkung pelonggaran benar-benar menghasilkan rasa yang anda inginkan, sebelum ia mencapai lembaran gaya. Halaman pratetap — nombor sebenar di sebalik kata kunci mudah masuk CSS sendiri, anggaran overshoot jujur yang sesetengahnya memanggil lantunan, dan keluk piawai Reka Bentuk Bahan yang diterbitkan oleh Google — adalah titik permulaan sedia yang anda boleh seret daripada titik kawalan kosong.
Semuanya berjalan secara setempat dalam penyemak imbas anda: tiada muat naik, tiada akaun, tiada pelayan pergi-balik dan penjana terus berfungsi di luar talian sebaik halaman dimuatkan.