📈

Gjenerues Lakoreje CSS Cubic-Bezier Falas

Projektoni lakore lëvizjeje CSS duke tërhequr pikat e kontrollit, parashikoni lëvizjen drejtpërdrejt dhe kopjoni vlerën cubic-bezier(). Përfshin preseta overshoot/bounce.

Funksionon në shfletuesin tuajPa regjistrim, pa dritare kërcyeseNuk kërkohet hyrjeI lirë përgjithmonë

Funksionon jashtë linje sapo ngarkohet

Tërhiqni dorezat bruz dhe roze për të formësuar kurbën

Pika kontrolli

x1y1x2y2

Pamja paraprake e lëvizjes

Kohëzgjatja1.6s

Kalimi i gjerësisë

Vlera CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Paracaktime

Dorezat roze dhe bruz mund të tërhiqen sipër ose poshtë kutisë (Y përtej 0-1) për të krijuar efekte 'overshoot' / kërcimi si back-out dhe anticipate. X mbetet brenda 0-1 (koha nuk mund të kthehet mbrapsht).

Si funksionon

Redaktuesi është ndërtuar tërësisht në shfletues duke përdorur gjendjen e React-it dhe SVG — asnjë bibliotekë nuk trajton matematikën e kurbës. Dy pika kontrolli të tërheqshme përcaktojnë një shteg SVG kub Bezier, dhe motori i vetë animacionit CSS i shfletuesit e xhiron parashikimin e lëvizjes duke futur vlerën rezultuese cubic-bezier() direkt në një rregull @keyframes.

1
Tërhiq ose shkruaj pikat e kontrollit
Dy doreza (P1 në ngjyrë teal, P2 në ngjyrë rozë) rrinë mbi një canvas SVG. Tërheqja përdor API-në Pointer Events me setPointerCapture kështu që doreza gjurmon gishtin apo kursorin tënd edhe jashtë kufirit të SVG-së. Mund t'i lëvizësh gjithashtu dorezat me tastet shigjeta ose të shkruash vlera të sakta te hyrjet numerike x1/y1/x2/y2.
2
SVG vizaton kurbën në kohë reale
Kurba është një element i vetëm SVG <path> komanda C (kub Bezier) e të cilit rillogaritet nga katër koordinatat e pikave të kontrollit në çdo përditësim gjendjeje. Pa canvas, pa bibliotekë të jashtme — vizatuesi SVG i shfletuesit e vizaton shtegun direkt.
3
Motori CSS i shfletuesit parashikon zbutjen
Tri animacione të drejtpërdrejta (një pikë rrëshqitëse, një kalim gjerësie, dhe një shkallëzim) xhirojnë @keyframes CSS me vlerën cubic-bezier() të futur brendazi. Motori i vetë animacionit të shfletuesit e interpreton kurbën, kështu që ajo që sheh është saktësisht ajo që CSS-ja jote e prodhimit do të prodhojë.
4
Kopjo fragmentin në sintaksën e kornizës tënde
Skedat formatojnë të njëjtat katër numra si një transition-timing-function CSS, një klasë vlere arbitrare Tailwind, një varg ease Framer Motion, ose një varg zbutjeje anime.js. Fragmenti shkruhet te clipboard me navigator.clipboard. Kurba kodohet gjithashtu në hash-in e URL-së (#b=x1,y1,x2,y2) kështu që mund ta ndash ose ta ruash si faqerojtës.