CSS Cubic Bezier generatorius
Vilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.
cubic-bezier(0.25, 0.1, 0.25, 1)Kreivė braižoma tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.
DUK
Ką reiškia dvi rankenėlės ir keturi skaičiai?
Kreivė eina iš apačios kairėje (pradžia) į viršų dešinėje (pabaiga), kur laikas bėga iš kairės į dešinę, o progresas – iš apačios į viršų. Dvi rankenėlės yra valdymo taškai, kurie ją išlenkia – kiekvienas turi X ir Y koordinates, todėl kartu jie sudaro cubic-bezier(x1, y1, x2, y2). X reikšmė visada lieka tarp 0 ir 1, o Y gali išeiti virš viršutinės arba žemiau apatinės ribos, kad sukurtų perviršio arba atatrankos judesį prieš sustojant.
Kaip naudoti šią reikšmę savo CSS kode?
Nukopijuokite „cubic-bezier()“ funkciją ir įklijuokite ją ten, kur nurodoma animacijos greičio kreivė (timing function) – transition-timing-function, animation-timing-function arba trumpajame užrašyme, pvz., transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Raktiniai žodžiai ease, ease-in, ease-out ir ease-in-out yra tiesiog fiksuotos cubic-bezier kreivės, todėl pasirinkę vieną iš šių nustatymų pamatysite tikslią reikšmę.
Ar galima sukurti šoktelėjimo (bounce) arba elastingumo efektą?
Savaime ne. Viena cubic-bezier kreivė gali sukurti pasirengimo ir perviršio efektą (išankstiniai nustatymai su „back“ ištempia vieną rankenėlę už rėmelio ribų būtent tam), tačiau judėjimas gali vykti tik viena kryptimi iki sustojimo. Šoktelėjimo (bounce) ar elastingo judėjimo efektai keičia kryptį kelis kartus, o to viena cubic-bezier kreivė išreikšti negali – tam reikalingi CSS keyframes arba linear() funkcija su daugeliu taškų.