📈

Kyauta Mai Ƙirƙirar CSS Cubic-Bezier Easing

Tsara curves na easing na CSS ta hanyar jan wuraren sarrafawa, ka gwada motsin a rai, ka kwafi ƙimar cubic-bezier(). Ya haɗa da zaɓuɓɓukan overshoot/bounce.

Yana aiki a cikin browser ɗinkaBa a bukatar rajista, babu tsalle-tsalleBabu buƙatar shigaKyauta har abada

Yana aiki babu haɗi da zarar an loda shi

Ja hannayen teal da rose don sifanta lanƙwasa

Wuraren kula

x1y1x2y2

Misalin motsi

Tsawon lokaci1.6s

Sauyawar faɗi

Ƙimar CSS

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

Saitattun tsari

Hannayen rose da teal na iya jan sama ko ƙasa akwatin (Y bayan 0-1) don ƙirƙirar tasirin 'wuce gona da iri' / motsi kamar back-out da anticipate. X yana zama tsakanin 0-1 (lokaci ba zai iya komawa baya ba).

Yadda Yake Aiki

An gina editan gaba ɗaya a burauza ta amfani da yanayin React da SVG — babu ɗakin karatu da yake sarrafa lissafin lanƙwasa. Wurare biyu masu iya ja suna tantance hanyar SVG cubic Bezier; injin motsi na CSS na burauzarka da kansa yana gudanar da dubawar motsi ta hanyar saka ƙimar cubic-bezier() da aka samu kai tsaye a wata ka'idar @keyframes.

1
Ja ko rubuta wuraren dubawa
Hannaye biyu (P1 a teal, P2 a rose) suna zaune a wani canvas na SVG. Jawo yana amfani da Pointer Events API tare da setPointerCapture don hannun ya bin diddigin yatsanka ko alamarka ko da wajen iyakar SVG. Za ka iya kuma matsa hannaye da maɓallan kibiya ko rubuta ainihin ƙimomi zuwa abubuwan shigarwar lamba x1/y1/x2/y2.
2
SVG yana zana lanƙwasa a lokaci na gaskiya
Lanƙwasar wani abu ne guda na SVG <path> wanda umarninsa C (cubic Bezier) ake sake lissafta shi daga daidaitawar wurare guda huɗu a kowace sabuntawar yanayi. Babu canvas, babu ɗakin karatu na waje — mai zanawa na SVG na burauza yana zana hanyar kai tsaye.
3
Injin CSS na burauza yana dubawar sauƙaƙawar
Motsawa guda uku masu rai (wani dige mai zamewa, sauyawar fadi, da girma) suna gudanar da CSS @keyframes tare da ƙimar cubic-bezier() da aka saka a cikin gida. Injin motsi na burauzarka da kansa yana fassara lanƙwasar, don haka abin da kake gani shine daidai abin da CSS ɗinka na samarwa zai bayar.
4
Kwafi guntun a syntax na tsarinka
Shafuka suna tsara iri ɗayan lambobi huɗu a matsayin CSS transition-timing-function, wani aji na Tailwind arbitrary-value, wani jeri na Framer Motion ease, ko wani harafin sauƙaƙawa na anime.js. Ana rubuta guntun zuwa clipboard da navigator.clipboard. Ana kuma ɓoye lanƙwasar a cikin hash na URL (#b=x1,y1,x2,y2) don ka iya raba ko yin alama gare ta.