CSS cubic-bezier generatorius

Kas yra šis įrankis?

cubic-bezier() yra CSS laiko funkcija, kuri valdo, kaip animuojama ar pereinama reikšmė greitėja ir lėtėja laikui bėgant, o ne juda pastoviu greičiu. Ji apibrėžiama dviem valdymo taškais — (x1, y1) ir (x2, y2) — kurie sulenkia kreivę tarp fiksuoto pradžios taško (0,0) ir pabaigos taško (1,1). X reikšmės privalo likti tarp 0 ir 1, bet y reikšmės gali viršyti šį intervalą, kad sukurtų peršokimo ar atšokimo efektus.

Rašant ranka, derinti keturis dešimtainius skaičius, siekiant pojūčio, kuris nebūtų nei per staigus, nei per suglebęs, reikalauja daug bandymų ir klaidų. Šis įrankis pakeičia šį spėliojimą tiesioginiu valdymu: vilkite slankiklį, stebėkite, kaip lenkiasi kreivė ir atitinkamai juda peržiūros rutulys, ir kopijuokite CSS, kai judesys pasirodo tinkamas.

Šaltinis: CSS Easing Functions Level 1, W3C — specifikacija, apibrėžianti cubic-bezier() ir penkis pavadintus raktažodžius, kuriais paremti šio įrankio šablonai.

Kodėl jį naudoti?

• Gyvas SVG grafikas tiksliai rodo, kaip jūsų kreivė lenkiasi tarp fiksuotų pradžios ir pabaigos taškų, aiškumo dėlei nupiešiant abu valdymo taškus ir jų rankenėles.
• Paleidimo mygtukas animuoja peržiūros elementą palei takelį, naudodamas tikslią jūsų kreivę, tad galite pajusti judesį, o ne tik matyti statišką grafiką.
• Vieno paspaudimo šablonai penkioms standartinėms pavadintoms švelninimo funkcijoms — ease, ease-in, ease-out, ease-in-out ir linear — kaip aprašyta CSS Easing Functions specifikacijoje.
• Y reikšmės gali nusileisti žemiau 0 ar viršyti 1, leidžiant kurti peršokimo/atšokimo stiliaus švelninimus, kurių pavadinti raktažodžiai negali sukurti.
• Sugeneruoja paruoštą įklijuoti transition-timing-function CSS kodą — ta pati reikšmė veikia ir animation-timing-function.
• Viskas vyksta jūsų naršyklėje — niekas iš to, ką konfigūruojate, niekur nesiunčiama. Nemokama, be registracijos.

Kaip naudoti

1. Vilkite x1/y1 slankiklius, kad nustatytumėte pirmąjį valdymo tašką, formuojantį, kaip prasideda animacija.
2. Vilkite x2/y2 slankiklius, kad nustatytumėte antrąjį valdymo tašką, formuojantį, kaip baigiasi animacija.
3. Stebėkite juodą kreivę grafike — kreivė, iškylanti virš įstrižainės iš pradžių, reiškia, kad judesys prasideda greitai, o ta, kuri lieka žemiau jos, reiškia lėtą pradžią.
4. Spustelėkite Play, kad pamatytumėte, kaip peržiūros elementas juda palei takelį, naudodamas jūsų kreivę kaip transition-timing-function.
5. Išbandykite šabloną (ease, ease-in, ease-out, ease-in-out, linear) kaip pradžios tašką, tada nuo jo pastumkite slankiklius.
6. Nukopijuokite sugeneruotą CSS ir įklijuokite į transition ar animation taisyklę.

Pavyzdys

Įvestis

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Išvestis

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

Tai standartinis CSS ease raktažodis, išrašytas kaip aiškūs valdymo taškai — greita pradžia, staigus pagreitėjimas, tada palaipsniui lėtėjimas link pabaigos.

Kodėl y reikšmės gali viršyti 0–1

Skirtingai nei x ašis, kuri reprezentuoja laiką ir turi eiti nuo 0 iki 1, y ašis reprezentuoja animuojamos reikšmės progresą ir tokio apribojimo neturi. Nustačius y1 žemiau 0 ar y2 virš 1, kreivė nusileidžia žemiau pradžios reikšmės arba peršoka pabaigos reikšmę prieš nusistovėdama — tai peršokimo ir numatymo efektų, naudojamų mygtukų paspaudimuose, modalinių langų atsiradime ir žaismingose sąsajos mikro-sąveikose, pagrindas. Nė vienas iš penkių pavadintų raktažodžių (ease, ease-in, ease-out, ease-in-out, linear) to negali sukurti; tam reikia pritaikytos cubic-bezier().

transition-timing-function ir animation-timing-function

Šio įrankio sugeneruota cubic-bezier() reikšmė veikia identiškai abiejose savybėse. Naudokite transition-timing-function, kai judesį sukelia būsenos pasikeitimas (kaip hover ar klasės perjungimas), ir animation-timing-function @keyframes valdomoje animacijos taisyklėje, kai tas pats švelninimo pojūtis turi būti taikomas automatiškai ar cikle.

Dažni švelninimo šablonai

• Greitas sąsajos atsakas (mygtukai, jungikliai): laikykite valdymo taškus arti įstrižainės su nedideliu ease-out poslinkiu, pvz., cubic-bezier(0.4, 0, 0.2, 1).
• Material Design standartinė kreivė: cubic-bezier(0.4, 0, 0.2, 1) — greita pradžia, švelnus baigimas, plačiai naudojama skydelių ir kortelių perėjimams.
• Atšokimas/peršokimas: pakelkite y2 virš 1, pvz., cubic-bezier(0.34, 1.56, 0.64, 1), žaismingam iššokimo pojūčiui.
• Numatymas prieš judesį: nuleiskite y1 žemiau 0, kad elementas šiek tiek atsitrauktų prieš judėdamas pirmyn.
• Sklandus ease-in-out kartojamoms animacijoms: laikykite kreivę beveik simetrišką aplink centrą.

Derinimas su kitais CSS įrankiais

Švelninimo kreivė retai naudojama atskirai — ji dažniausiai taikoma elementui, kuriam taip pat reikia apibrėžti šešėlius, suapvalintus kampus ar gradientus. Sugeneruokite vizualų stilių su kitais žemiau esančiais CSS įrankiais, tada pridėkite laiko funkciją iš šio įrankio prie tos pačios taisyklės ar transition/animation deklaracijos.

→ box-shadow generatorius · border-radius generatorius

Dažniausiai užduodami klausimai