CSS easing krivulja u stilu odbijanja
Dizajnirajte prilagođenu CSS cubic-bezier() funkciju mjerenja vremena povlačenjem dviju kontrolnih točaka, pregledajte je uživo u odnosu na linearnu referencu, zatim kopirajte gotovu vrijednost.
Rezultat
Ova stranica otvara generator s već učitanim x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — krivulja prekoračenja koju neke biblioteke za ublažavanje označavaju easeOutBack. Negativni y1 i y2 iznad 1 upravo su razlog zašto se pregled animacije u nastavku povlači nakon početka i kraja prije nego što se smiri; povucite ili držite ili uredite brojeve kako bi učinak bio jači ili blaži.
Da budemo iskreni o tome što je ovo: jedna cubic-bezier() krivulja ima samo dvije kontrolne točke, tako da može aproksimirati jedno kretanje prekoračenja i smirivanja, a ne pravi fizički odskok s višestrukim odskocima s nekoliko opadajućih skokova. Za doslovni efekt odbijanja lopte trebat će vam više ključnih sličica ili steps() segmenata povezanih lancem — ova je krivulja najbliže što obična funkcija prijelaza-tempiranja može dobiti u jednom retku.
To jedno prekoračenje i dalje je točno ono što većina skakutavih korisničkih sučelja želi: gumb koji iskoči malo iznad svoje veličine u mirovanju, modal koji prelazi prije nego što se spusti, kartica koja skoči na svoje mjesto. Kopirajte vrijednost kakva jest za taj brzi osjećaj ili ublažite y1 prema 0 i y2 prema 1 da vratite prekoračenje.