⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

Cubic Bezier generatorius

Kurkite pasirinktinę CSS cubic-bezier() laiko funkciją vilkdami du valdymo taškus, peržiūrėkite ją tiesiogiai lygindami su tiesine atskaitos kreive, tada nukopijuokite paruoštą reikšmę.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Vilkite oranžinę rankenėlę (P1) ir raudoną rankenėlę (P2), kad pakeistumėte kreivės formą – taip pat veikia ir rodyklių klavišai. X lieka apribotas tarp 0 ir 1, kaip reikalauja CSS; vilkite rankenėlę virš langelio arba žemiau jo, kad y išeitų už šio diapazono viršijimo ir atšokimo efektams.

Jūsų kreivė

Tiesinė (palyginimui)

Apdorojama... 0%

Rezultatas

Rašyti cubic-bezier(x1, y1, x2, y2) ranka ir perkrauti puslapį, norint patikrinti pojūtį, yra lėtas būdas derinti animaciją. Šis generatorius užveria tą ciklą: vilkite bet kurią valdymo taško rankenėlę ant kreivės arba įveskite tikslius skaičius į x1/y1/x2/y2 laukus – kreivė, nukopijuojama CSS eilutė ir tiesioginė animacijos peržiūra atsinaujina su kiekvienu pakeitimu: nereikia kūrimo žingsnio, nereikia perkrovimo.

Dvi ašys veikia skirtingai – taip ir sumanyta. x1 ir x2 lieka apriboti tarp 0 ir 1, nes būtent to CSS specifikacija iš tikrųjų reikalauja iš cubic-bezier() laiko funkcijos – reikšmė už šio diapazono yra tiesiog netinkama. y1 ir y2 tokio apribojimo neturi: vilkite rankenėlę virš langelio viršaus ar žemiau jo apačios, ir kreivė viršys savo pradžią ar pabaigą – būtent taip iš vienos švelninimo kreivės kuriami spyruoklės ir atšokimo stiliaus efektai.

Matyti skaičių nėra tas pats, kas matyti judesį, todėl peržiūra cikliškai rodo du identiškus rutuliukus vienas šalia kito: vienas juda naudodamas jūsų pasirinktą kreivę, kitas – paprastu pastoviu tiesiniu tempu. Stebėti, kaip jie lenktyniauja, yra greičiausias būdas nustatyti, ar švelninimo kreivė iš tikrųjų sukuria norimą pojūtį, prieš jai patenkant į stilių lentelę. Išankstinių nustatymų puslapiai – tikrieji skaičiai, slypintys už CSS nuosavo ease-in-out raktinio žodžio, sąžininga viršijimo aproksimacija, kurią kai kas vadina atšokimu, ir „Google“ paskelbta Material Design standartinė kreivė – yra paruošti atspirties taškai, nuo kurių galite pradėti vilkti, užuot pradėję nuo tuščių valdymo taškų.

Viskas veikia vietiškai jūsų naršyklėje: nereikia įkelti failų, nereikia paskyros, nereikia serverio užklausų – generatorius veikia ir atsijungus, kai tik puslapis yra įkeltas.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Vilkomas SVG kreivės redaktorius su dviem rankenėlėmis (P1 ir P2) ir redaguojamais x1/y1/x2/y2 skaitmenų įvesties laukais tikslioms iki pikselio reikšmėms.
  • Ciklinė animacijos peržiūra, lyginanti jūsų pasirinktinės cubic-bezier() laiko funkcijos judesį su tiesinės atskaitos rutuliuku, kad galėtumėte pamatyti švelninimą, o ne tik apie jį paskaityti.
  • Nukopijuojama cubic-bezier(x1, y1, x2, y2) eilutė, paruošta naudoti su transition-timing-function arba animation-timing-function, taip pat išankstinių nustatymų puslapiai, skirti ease-in-out, atšokimui ir Material Design standartinei kreivei.

Pagrindiniai privalumai

✓ Vilkite bet kurią valdymo taško rankenėlę ir stebėkite, kaip kartu keičiasi kreivė, tiesioginė animacijos peržiūra ir nukopijuojama CSS eilutė – nereikia mintinai mokėti koordinačių matematikos.
✓ Y gali viršyti 0 ir 1 ribas spyruoklės ar atšokimo efektams, o X išlieka apribotas 0–1 diapazone, kurio iš tikrųjų reikalauja CSS, todėl kiekviena nukopijuota reikšmė įklijavimo metu iškart yra tinkama.
✓ Gretinamoji peržiūra lygina jūsų pasirinktinę kreivę su paprasta tiesine atskaitos kreive, kad judesio pojūčio skirtumas – pati pagrindinė priežastis naudoti švelninimą – būtų akivaizdus iš pirmo žvilgsnio, o ne tik kodo išvestis.

Naudojimo atvejai

  • • Ar jums reikia nestandartinės CSS `transition-timing-function` ar `animation-timing-function` reikšmės vietoj vieno iš įtaisytųjų `ease` raktažodžių?
  • • Ar norite dar prieš įdiegdami pamatyti, kaip atrodo judesyje `cubic-bezier(0.42, 0, 0.58, 1)` — tikrieji skaičiai, slypintys už CSS raktažodžio `ease-in-out`?
  • • Ar kuriate šokinėjantį mygtuką, iškylantį langą ar kortelės animaciją ir jums reikia paruoštos „overshoot“ lėtinimo kreivės, kurią galėtumėte iškart nukopijuoti į savo stilių lentelę?