Kā izveidot pielāgotu kubiskā Bezjē gluduma līkni CSS?

Velciet abus vadības punktu turus grafikā, ievadiet precīzas x1, y1, x2, y2 vērtības vai izvēlieties priekšiestatījumu. Pēc tam izvēlieties CSS zem Izejas formāts un noklikšķiniet uz Kopēt, lai iegūtu cubic-bezier() vērtību priekš transition-timing-function.

Kā izveidot atlēciena vai pārspīlējuma efektu ar cubic-bezier?

Velciet turi virs vai zem lodziņa tā, lai tā Y vērtība pārsniegtu 0-1. Y var pārsniegt šo diapazonu, kamēr X paliek starp 0 un 1. 'Atpakaļ-ārā' un 'paredzēšanas' priekšiestatījumi ir gatavi pārspīlējuma sākumpunkti.

Vai es varu iegūt gludumu priekš Tailwind, Framer Motion vai anime.js?

Jā. Izejas formāta cilnes ir CSS, Tailwind, Framer Motion un anime.js. Tās visas formatē tos pašus četrus skaitļus, tāpēc izvēlieties cilni un noklikšķiniet uz Kopēt, lai ievietotu fragmentu starpliktuvē.

Kā ielādēt esošu cubic-bezier vērtību, lai to rediģētu?

Ielīmējiet vērtību, piemēram, cubic-bezier(.17, .67, .83, .67), importēšanas lodziņā un noklikšķiniet uz Ielādēt. Ja četrus skaitļus nevar nolasīt, tiek parādīts kļūdas ziņojums. Līkne tiek saglabāta arī lapas URL aiz jaucējzīmes, tāpēc to var kopīgot.

Kāpēc priekšskatījums šķiet lēnāks nekā manas reālās pārejas?

Kustības priekšskatījums izmanto Ilgums iestatījumu, kuru varat mainīt, un noklusējuma vērtības ir lēnākas, lai jūs varētu izpētīt līkni. Samaziniet Ilgums, pēc tam izmantojiet Atskaņot atkārtoti, lai redzētu kustību tādā ātrumā, kādu plānojat izmantot.

Vai tas tiešām ir bezmaksas?

Jā. Katrs rīks ir bezmaksas, bez konta un kredītkartes. Darbs notiek jūsu ierīcē, nevis mūsu serveros, tāpēc tas ir bezmaksas.

Vai tas darbojas mobilajā ierīcē?

Jā. Tas darbojas mūsdienu mobilajos pārlūkos iOS un Android ierīcēs, nekas nav jāinstalē.

📈

CSS kubiskā Bezjē gluduma ģenerētājs bez maksas

Noformē CSS gluduma līknes, velkot vadības punktus, priekšskatī kustību tiešraidē un kopē cubic-bezier() vērtību. Ietver pārspiešanas/atsitiena iepriekšiestatījumus.

Darbojas pārlūkprogrammāBez reģistrācijas, bez uznirstošiem logiemNav nepieciešama pieteikšanāsBezmaksas uz visiem laikiem

Darbojas bezsaistē pēc ielādes

Velciet tirkīzā un rozā rokturīšus līknes veidošanai

Vadības punkti

x1y1x2y2

Kustības priekšskatījums

Ilgums1,6 s

Platuma pāreja

CSS vērtība

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

Iepriekšēji iestatījumi

Rozā un tirkīza rokturīšus var vilkt virs vai zem lodziņa (Y ārpus 0–1), veidojot „pārsniegšanas"/atsitiena efektus kā back-out un anticipate. X paliek robežās 0–1 (laiks nevar iet atpakaļ).

Biežākie lietojumi

Pielāgots CSS pārejas mīkstināšanasProjektējiet dabiskas sajūtas mīkstināšanu pelu efektiem, izvēļņiem un UI pārejām.
Atlēciena un pārlieces animācijasIzveidojiet jautru atsperes/atlēciena kustību, velkot vadības punktus ārpus lodziņa.
Mīkstināšana @keyframes animācijāmAtlasiet pareizo animācijas funkciju CSS atslēgas kadra animācijām.
Mīkstināšanas vērtības JS animācijas bibliotēkāmIegūstiet kubisko Bēzjē vērtības GSAP, Framer Motion, anime.js un citus.
Izprotiet, kā darbojas mīkstināšanaSkatiet attiecību starp Bēzjē līkni un kustību, ko tas rada.

Kā tas darbojas

Redaktors ir veidots pilnībā pārlūkprogrammā, izmantojot React stāvokli un SVG — neviena bibliotēka neapstrādā līknes matemātiku. Divi velkami kontroles punkti definē SVG kubisko Bezjē līkni, un pārlūkprogrammas paša CSS animācijas dzinējs izpilda kustības priekšskatījumu, ievietojot iegūto cubic-bezier() vērtību tieši @keyframes noteikumā.

1
Velciet vai rakstiet kontroles punktus
Divi turētāji (P1 tirkīza krāsā, P2 rožu krāsā) atrodas uz SVG audekla. Vilkšana izmanto Pointer Events API ar setPointerCapture, lai turētājs sekotu jūsu pirkstam vai kursoram pat ārpus SVG robežas. Varat arī pabīdīt turētājus ar bultiņu taustiņiem vai ierakstīt precīzas vērtības x1/y1/x2/y2 skaitļu ievadēs.
2
SVG zīmē līkni reālajā laikā
Līkne ir viens SVG <path> elements, kura C (kubiskā Bezjē) komanda tiek pārrēķināta no četrām kontroles punktu koordinātēm ar katru stāvokļa atjauninājumu. Nav audekla, nav ārējas bibliotēkas — pārlūkprogrammas SVG renderētājs zīmē trajektoriju tieši.
3
Pārlūkprogrammas CSS dzinējs priekšskata izlīdzināšanu
Trīs dzīvas animācijas (slīdošs punkts, platuma pāreja un mērogs) izpilda CSS @keyframes ar iekļautu cubic-bezier() vērtību. Pārlūkprogrammas pašas animācijas dzinējs interpretē līkni, tāpēc tas, ko redzat, ir tieši tas, ko radīs jūsu produkcijas CSS.
4
Kopējiet fragmentu jūsu ietvara sintaksē
Cilnes formatē tos pašus četrus skaitļus kā CSS transition-timing-function, Tailwind patvaļīgas vērtības klasi, Framer Motion ease masīvu vai anime.js izlīdzināšanas virkni. Fragments tiek ierakstīts starpliktuvē ar navigator.clipboard. Līkne tiek arī kodēta URL fragmentā (#b=x1,y1,x2,y2), tāpēc varat to koplietot vai saglabāt grāmatzīmēs.