📈

Soo Saaraha CSS Cubic-Bezier Easing oo Bilaash ah

Naqshadee curves easing CSS adiga oo jiidaya dhibcaha xakameynta, hordhac tooska ah dhaqdhaqaaqa, oo nuqul qiimaha cubic-bezier(). Waxaa ku jira presets overshoot/bounce.

Wuxuu ka shaqeeyaa browser-kaagaIsdiiwaangelin looma baahna, aan popup ahaynGalid looma baahnaWeligaa bilaash

Wuu shaqeeyaa oflaayn marka la shubo

Jiid gacmaha cagaaraanka & casaanka si aad u qaabayso qalooca

Barta xakamaynta

x1y1x2y2

Hordhaca dhaqdhaqaaqa

Mudda1.6s

Kala-guurka balaadhka

Qiimaha CSS

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

Hormar

Gacmaha casaanka iyo cagaaranka waxay ka jiidi karaan sare ama hoos sanduuqa (Y ka baxsan 0-1) si ay u abuuraan saameynta 'overshoot' / bocor sida back-out iyo anticipate. X wuxuu ku sii jiraa 0-1 (waqtigu dib uma noqon karo).

Sida Ay U Shaqeyso

Falanqeeyuhu wuxuu gebi ahaanba ku dhisan yahay biraawsarka isagoo isticmaalaya xaalad React iyo SVG — laybreri midna kama maareeyo xisaabta curve-ka. Laba dhibco xakameed oo la jiidi karo ayaa qeexaya dariiq Bezier cubic ah oo SVG ah, injineerka animation-ka CSS ee biraawsarku laftiisu wuxuu sameeyaa fiiriye-tijaabada dhaqdhaqaaqa isagoo geliya qiimaha cubic-bezier() ee la soo saaray si toos ah xeerka @keyframes.

1
Jiid ama qor dhibcaha xakameedka
Laba gacmood (P1 midab teal ah, P2 midab rose ah) ayaa fadhiya canvas SVG ah. Jiididdu waxay isticmaashaa API-ga Pointer Events oo leh setPointerCapture si gacantu ugu raacdo farahaaga ama cursor-ka xitaa marka ay ka baxdo xuduudka SVG-ga. Sidoo kale waxaad gacmaha ku dhaqaajin kartaa furayaasha fallaarta ama waxaad ku qori kartaa qiyamka saxda ah gelitaannada lambarrada x1/y1/x2/y2.
2
SVG-gu wuxuu ku sawiraa curve-ka waqti dhabta ah
Curve-ku waa hal element SVG <path> ah kaasoo amarkiisa C (cubic Bezier) dib loo xisaabiyo afarta iskudubaridyada dhibcaha xakameedka isbeddel kasta oo xaaladeed. Canvas ma jiro, laybreri dibadeedna ma jiro — renderer-ka SVG ee biraawsarku wuxuu toos u sawiraa dariiqa.
3
Injineerka CSS ee biraawsarku wuxuu tijaabiyaa easing-ka
Saddex animation oo firfircoon (dhibic socota, isbeddel ballaadh, iyo miisaan) waxay wadaan CSS @keyframes oo leh qiimaha cubic-bezier() ee inline lagu geliyay. Injineerka animation-ka biraawsarku laftiisu wuxuu fasiraa curve-ka, sidaa darteed waxaad aragtid waa exactly waxa CSS-kaaga wax-soo-saarku sameyn doono.
4
Koobi qayb-koodhka syntax-ka framework-kaaga
Tabs waxay qaabeeyaan isla afarta lambar sida transition-timing-function CSS ah, fasal qiime-arbitrary-value Tailwind ah, array ease Framer Motion ah, ama qoraal easing anime.js ah. Qayb-koodhku waxaa loo qoraa clipboard-ka navigator.clipboard. Curve-ka sidoo kale waxaa lagu sumeeyay hash-ka URL-ka (#b=x1,y1,x2,y2) si aad u wadaagto ama u bookmark-garayso.