Keluk Pelonggaran CSS Gaya Lantunan
Reka fungsi pemasaan CSS cubic-bezier() tersuai dengan menyeret dua titik kawalan, pratonton secara langsung terhadap rujukan linear, kemudian salin nilai sedia.
Hasilnya
Halaman ini membuka penjana dengan x1=0.68, y1=-0.55, x2=0.265, y2=1.55 telah dimuatkan — lengkung overshoot beberapa perpustakaan mengendurkan label easeOutBack. Y1 negatif dan y2 di atas 1 adalah tepat sebab pratonton animasi di bawah menarik balik melepasi permulaannya dan melepasi penghujungnya sebelum diselesaikan; seret sama ada mengendalikan atau mengedit nombor untuk menjadikan kesan lebih kuat atau lebih lembut.
Sejujurnya tentang perkara ini: satu lengkung cubic-bezier() hanya mempunyai dua titik kawalan, jadi ia boleh menganggarkan satu gerakan overshoot-and-settle, bukan lantunan fizikal berbilang lantunan tulen dengan beberapa lompatan yang semakin berkurangan. Untuk kesan lantunan bola literal, anda memerlukan berbilang bingkai utama atau segmen steps() yang dirantai bersama — lengkung ini adalah yang paling hampir yang boleh diperolehi oleh fungsi pemasaan peralihan biasa dalam satu baris.
Kelemahan tunggal itu masih sama seperti yang diingini oleh kebanyakan UI melenting: butang yang muncul sedikit melepasi saiz rehatnya, modal yang melampaui sebelum diselesaikan, kad yang muncul pada tempatnya. Salin nilai seadanya untuk rasa tajam itu, atau lembutkan y1 ke arah 0 dan y2 ke arah 1 untuk mendail overshoot kembali.