Ninaundaje curve ya kuegemea ya cubic-bezier maalum kwa CSS?

Buruta vishikio viwili vya nukta ya udhibiti kwenye grafu, andika thamani kamili za x1, y1, x2, y2, au chagua kielelezo. Kisha chagua CSS chini ya Muundo wa matokeo na ubofye Nakili kupata thamani ya cubic-bezier() kwa transition-timing-function.

Ninafanyaje athari ya kuruka au kupita kiasi kwa cubic-bezier?

Buruta kishikio juu au chini ya kisanduku ili thamani yake ya Y ipite 0-1. Y inaweza kuzidi masafa hayo, wakati X inabaki kati ya 0 na 1. Vielelezo vya back-out na anticipate ni sehemu za kuanzia za kupita kiasi zilizotengenezwa tayari.

Je, ninaweza kupata ulegezaji wa Tailwind, Framer Motion au anime.js?

Ndiyo. Vichupo vya muundo wa matokeo ni CSS, Tailwind, Framer Motion na anime.js. Vyote vinaunda nambari nne zilezile, kwa hivyo chagua kichupo na ubofye Nakili kuweka kijisehemu kwenye ubao wako wa kunakili.

Ninafanyaje kupakia thamani iliyopo ya cubic-bezier ili kuihariri?

Bandika thamani kama vile cubic-bezier(.17, .67, .83, .67) kwenye kisanduku cha kuingiza na ubofye Pakia. Ikiwa nambari nne haziwezi kusomwa, utapata ujumbe wa hitilafu. Mviringo pia umehifadhiwa kwenye URL ya ukurasa baada ya alama ya reli, kwa hivyo inaweza kushirikiwa.

Kwa nini onyesho la awali linahisi polepole kuliko mabadiliko yangu halisi?

Onyesho la awali la mwendo linatumia mpangilio wa Muda ambao unaweza kubadilisha, na chaguo-msingi ni polepole ili uweze kuchunguza mviringo. Fupisha Muda, kisha utumie Cheza Tena kuona mwendo kwa kasi unayopanga kusambaza.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

📈

Jenereta ya Mwelekeo wa Cubic-Bezier ya CSS bila malipo

Buni mwelekeo wa mwelekeo wa CSS kwa kuburuta nukta za udhibiti, hakiki mwendo kwa moja kwa moja, na nakili thamani ya cubic-bezier(). Inajumuisha violezo vya overshoot/bounce.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

Vuta vishikizo vya teal na waridi ili kuunda mkondo

Pointi za kudhibiti

x1y1x2y2

Onyesho la awali la mwendo

Mudasek 1.6

Mpito wa upana

Thamani ya CSS

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

Mipangilio ya awali

Vishikizo vya waridi na teal vinaweza kuvuta juu au chini ya sanduku (Y nje ya 0–1) ili kuunda athari za 'overshoot' / bounce kama back-out na anticipate. X inabaki ndani ya 0–1 (muda hauwezi kurudi nyuma).

Matumizi ya kawaida

CSS Easing ya MipangoTengeneza easing inayofika kwa asili kwa ajili ya athari za hover, menyu, na mabadilisho ya UI.
Bounse na Overshoot AnimationsTengeneza harakati za macheza ya spring/bounce kwa kuvuta pointi za kudhibiti nje ya kisanduku.
Easing kwa @keyframes AnimationsChagua chaguo la animation-timing-function sahihi kwa ajili ya CSS keyframe animations.
Thamani za Easing kwa JS Animation LibrariesPata thamani za cubic-bezier kwa GSAP, Framer Motion, anime.js, na zaidi.
Elewa Jinsi Easing Inavyofanya KaziAngalia uhusiano kati ya curve ya bezier na harakati inayoutengeneza.

Jinsi Inavyofanya Kazi

Kihariri kimejengwa kikamilifu kwenye kivinjari kwa kutumia hali ya React na SVG — hakuna maktaba inayoshughulikia hesabu ya mkondo. Pointi mbili za kudhibiti zinazoburutwa zinafafanua njia ya SVG cubic Bezier, na injini ya uhuishaji ya CSS ya kivinjari chenyewe inaendesha onyesho la awali la mwendo kwa kuingiza thamani ya cubic-bezier() inayotokana moja kwa moja kwenye sheria ya @keyframes.

1
Buruta au andika pointi za kudhibiti
Vishikizo viwili (P1 kwa bluu-kijani, P2 kwa waridi) viko kwenye kanvasi ya SVG. Kuburuta kunatumia Pointer Events API na setPointerCapture ili kishikizo kifuatilie kidole chako au mshale hata nje ya mpaka wa SVG. Unaweza pia kusukuma vishikizo kwa vitufe vya mshale au kuandika thamani kamili kwenye uingizaji wa namba wa x1/y1/x2/y2.
2
SVG inachora mkondo papo hapo
Mkondo ni kipengele kimoja cha SVG <path> ambacho amri yake ya C (cubic Bezier) inahesabiwa upya kutoka viwianishi vinne vya pointi za kudhibiti kwa kila sasisho la hali. Hakuna canvas, hakuna maktaba ya nje — kionyeshaji cha SVG cha kivinjari kinachora njia moja kwa moja.
3
Injini ya CSS ya kivinjari inaonyesha onyesho la awali la kulainisha
Uhuishaji tatu wa moja kwa moja (kitone kinachoteleza, mabadiliko ya upana, na kipimo) vinaendesha CSS @keyframes na thamani ya cubic-bezier() iliyoingizwa ndani. Injini ya uhuishaji ya kivinjari chenyewe inatafsiri mkondo, kwa hiyo unachokiona ndicho hasa CSS yako ya uzalishaji itakayotoa.
4
Nakili kipande kwa sintaksia ya mfumo wako
Vichupo vinapanga namba nne zile zile kama kazi ya transition-timing-function ya CSS, klasi ya thamani-huru ya Tailwind, safu ya kulainisha ya Framer Motion, au mfuatano wa kulainisha wa anime.js. Kipande kinaandikwa kwenye clipboard kwa navigator.clipboard. Mkondo pia umesimbwa kwenye hash ya URL (#b=x1,y1,x2,y2) ili uweze kushiriki au kuweka alama.