Kaip sukurti pasirinktinę cubic-bezier lengvinimo kreivę CSS?

Vilkite dvi valdymo taškų rankenėles grafike, įveskite tikslias x1, y1, x2, y2 reikšmes arba pasirinkite iš numatytųjų parinkčių. Tada Išvesties formatas pasirinkite CSS ir spustelėkite Kopijuoti, kad gautumėte cubic-bezier() reikšmę, skirtą transition-timing-function.

Kaip sukurti atšokimo arba peršokimo efektą su cubic-bezier?

Vilkite rankenėlę virš arba žemiau langelio, kad jos Y reikšmė išeitų už 0–1 ribų. Y gali viršyti šį diapazoną, o X lieka tarp 0 ir 1. Numatytosios parinktys back-out ir anticipate yra paruošti peršokimo pradžios taškai.

Ar galiu gauti lengvinimą, skirtą Tailwind, Framer Motion arba anime.js?

Taip. Išvesties formato skirtukai yra CSS, Tailwind, Framer Motion ir anime.js. Visi jie formatuoja tuos pačius keturis skaičius, todėl pasirinkite skirtuką ir spustelėkite Kopijuoti, kad įrašytumėte fragmentą į iškarpinę.

Kaip įkelti esamą cubic-bezier reikšmę, kad ją redaguočiau?

Įklijuokite reikšmę, pvz., cubic-bezier(.17, .67, .83, .67), į importavimo laukelį ir spustelėkite Įkelti. Jei nepavyksta nuskaityti keturių skaičių, gaunate klaidos pranešimą. Kreivė taip pat išsaugoma puslapio URL po grotelių ženklo, todėl ja galima dalintis.

Kodėl peržiūra atrodo lėtesnė nei mano tikrieji perėjimai?

Judėjimo peržiūra naudoja Trukmė nustatymą, kurį galite keisti, o numatytosios reikšmės yra lėtesnės, kad galėtumėte išstudijuoti kreivę. Sutrumpinkite Trukmė, tada naudokite pakartojimą, kad pamatytumėte judėjimą tokiu greičiu, kokiu planuojate paleisti.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia.

📈

CSS cubic-bezier lengvinimo generatorius nemokamai

Kurkite CSS lengvinimo (easing) kreives vilkdami valdymo taškus, peržiūrėkite judėjimą gyvai ir kopijuokite cubic-bezier() reikšmę. Yra persūkio / atšokimo šablonų.

Veikia jūsų naršyklėjeBe registracijos, be iššokančių langųPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

Vilkite žydras ir rausvas rankenėles, kad suformuotumėte kreivę

Valdymo taškai

x1y1x2y2

Judėjimo peržiūra

Trukmė1,6 s

Pločio perėjimas

CSS reikšmė

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

Išankstiniai nustatymai

Rausvas ir žydras rankenėles galima tempti virš arba žemiau langelio (Y už 0–1 ribų), kad būtų gauti „persūkio“ / atšokimo efektai, pvz., back-out ir anticipate. X lieka 0–1 ribose (laikas negali eiti atgal).

Dažniausi naudojimo būdai

Pasirinktinis CSS perėjimo palengvinimasSuprojektuokite natūralaus pojūčio palengvinimą naudojantis efektais, meniu ir UI perėjimais.
Šuolio ir peraugimo animacijosSukurkite linksmas pavasario/šuolio judesius traukdami valdymo taškus iš dėžės.
Palengvinimas @keyframes animacijųPasirinkite tinkamą animacijos laiko funkciją CSS raktinės kadro animacijoms.
Palengvinimo vertės JS animacijos bibliotekomsGaukite kubines Bézier vertes GSAP, Framer Motion, anime.js ir dar daugiau.
Supraskite, kaip veikia palengvinimasPamatykite ryšį tarp Bézier kreivės ir judesio, kurį ji sukuria.

Kaip tai veikia

Redaktorius sukurtas visiškai naršyklėje, naudojant React būseną ir SVG — jokia biblioteka nevaldo kreivės matematikos. Du tempiami valdymo taškai apibrėžia SVG kubinės Bezjė kreivės kelią, o pati naršyklės CSS animacijos sistema atkuria judesio peržiūrą, tiesiogiai įterpdama gautą cubic-bezier() reikšmę į @keyframes taisyklę.

1
Tempkite arba įveskite valdymo taškus
Ant SVG drobės yra du taškai (P1 žydras, P2 rausvas). Tempimas naudoja Pointer Events API su setPointerCapture, todėl taškas seka jūsų pirštą ar žymeklį net už SVG ribų. Taškus taip pat galite pastumti rodyklių klavišais arba įvesti tikslias reikšmes į x1/y1/x2/y2 skaitinius laukus.
2
SVG piešia kreivę realiu laiku
Kreivė yra vienas SVG <path> elementas, kurio C (kubinės Bezjė) komanda perskaičiuojama iš keturių valdymo taškų koordinačių su kiekvienu būsenos atnaujinimu. Jokio canvas, jokios išorinės bibliotekos — kelią tiesiogiai piešia naršyklės SVG atvaizdavimo sistema.
3
Naršyklės CSS variklis peržiūri lengvinimą
Trys gyvos animacijos (slenkantis taškas, pločio perėjimas ir mastelio keitimas) naudoja CSS @keyframes su tiesiogiai įterpta cubic-bezier() reikšme. Pati naršyklės animacijos sistema interpretuoja kreivę, todėl tai, ką matote, yra tiksliai tai, ką sukurs jūsų produkcinis CSS.
4
Nukopijuokite fragmentą jūsų karkaso sintaksei
Skirtukai formatuoja tuos pačius keturis skaičius kaip CSS transition-timing-function, Tailwind laisvos reikšmės klasę, Framer Motion ease masyvą arba anime.js lengvinimo eilutę. Fragmentas įrašomas į iškarpinę per navigator.clipboard. Kreivė taip pat užkoduojama URL fragmente (#b=x1,y1,x2,y2), todėl ja galite pasidalyti ar ją įsiminti.