📈

Olùmúdásílẹ̀ Ìdarí CSS Cubic-Bezier Ọ̀fẹ́

Ṣàkàwé àwọn ìdarí CSS nípa fífa àwọn ojú-ìdarí, wo ìṣíṣàn náà lákòókò gidi, kí o sì dàkọ iye cubic-bezier(). Ó ní àwọn ìsètò overshoot/bounce.

Ó ń ṣiṣẹ́ nínú ẹ̀rọ àwárí rẹKò sí ìforúkọsílẹ̀, kò sí àwọn àṣàyẹ̀wò tí ó ń jádeKò nílò ìwọléỌfẹ títí láé

Ó ń ṣiṣẹ́ láìsí ìsopọ̀ ní kété tí a bá kó wọlé

Fa àwọn ìdálẹ̀kùn teal àti rose láti ṣe àpẹẹrẹ ìlà náà

Àwọn ojú-ìdarí (control points)

x1y1x2y2

Àyẹ̀wò ìṣíṣẹ́

Gígùn1.6s

Ìyípadà ìbú

Iye CSS

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

Àwọn ìṣètò

Àwọn ìdálẹ̀kùn rose àti teal lè fà sókè tàbí sísàlẹ̀ àpótí náà (Y ju 0-1 lọ) láti ṣẹ̀dá ipa 'overshoot' / bounce bí back-out àti anticipate. X ń dúró láàrin 0-1 (àkókò kò lè yíra padà).

Bí Ó Ṣe Ń Ṣiṣẹ́

A kọ́ olùṣàtúnṣe náà pátápátá nínú aṣàwákiri pẹ̀lú ipò React àti SVG — kò sí ìwé-ìṣirò tí ó ń darí ìṣírò ìlà náà. Àwọn pọ́ìnti ìdarí méjì tí a lè fà ń ṣàlàyé ọ̀nà SVG cubic Bezier kan, ẹ́ńjìnnì àwòrán CSS aṣàwákiri fúnrarẹ̀ sì ń darí àkíyèsí ìlọ́po nípa fífi iye cubic-bezier() tí ó jáde sí i tààrà sí i sínú òfin @keyframes.

1
Fà tàbí kọ àwọn pọ́ìnti ìdarí
Ìdarí méjì (P1 ní teal, P2 ní rose) ń jókòó lórí canvas SVG kan. Fífà ń lo API Pointer Events pẹ̀lú setPointerCapture nítorí náà ìdarí náà ń tọpasẹ̀ ìka tàbí àmì-ọwọ́ rẹ kódà lóde ààlà SVG náà. O tún lè fi ìdarí wọ̀nyí sí ipò pẹ̀lú àwọn kọ́kọ́rọ́ ọ̀fà tàbí kọ iye gan-an sí àwọn ìbáwọlé nọ́mbà x1/y1/x2/y2.
2
SVG ń yà ìlà náà ní àkókò gidi
Ìlà náà jẹ́ ẹ̀yà SVG <path> kan ṣoṣo tí àṣẹ C rẹ̀ (cubic Bezier) ni a tún ṣírò láti inú àwọn ìdí pọ́ìnti-ìdarí mẹ́rin ní gbogbo ìṣàtúnṣe ipò. Kò sí canvas, kò sí ìwé-ìṣirò ìta — ẹ́ńjìnnì SVG aṣàwákiri ń yà ọ̀nà náà tààrà.
3
Ẹ́ńjìnnì CSS aṣàwákiri ń fi ìrọ̀rọ̀ náà hàn
Àwòrán láàyè mẹ́ta (ojú tí ń rìn, ìtẹ̀síwájú ìbú, àti ìwọ̀n) ń lo CSS @keyframes pẹ̀lú iye cubic-bezier() tí a fi sílo tààrà. Ẹ́ńjìnnì àwòrán aṣàwákiri fúnrarẹ̀ ń túmọ̀ ìlà náà, nítorí náà ohun tí o rí gan-an ni ohun tí CSS ìṣiṣẹ́ rẹ yóò mú jáde.
4
Dàkọ àpẹẹrẹ náà ní gírámà ilé-iṣẹ́ rẹ
Àwọn tábu ń ṣe àgbékalẹ̀ nọ́mbà mẹ́rin kan náà gẹ́gẹ́ bí transition-timing-function CSS, kíláàsì iye-àṣàrò Tailwind, ọ̀wọ́ ease Framer Motion, tàbí ọ̀wọ́ ọ̀rọ̀ ìrọ̀rọ̀ anime.js. A kọ àpẹẹrẹ náà sí clipboard pẹ̀lú navigator.clipboard. A tún ń ṣe àmúlò ìlà náà nínú hash URL (#b=x1,y1,x2,y2) nítorí náà o lè pín tàbí fi í pamọ́.