Krivulja popuščanja CSS v slogu odboja
Oblikujte časovno funkcijo CSS cubic-bezier() po meri tako, da povlečete dve kontrolni točki, jo predogledate v živo glede na linearno referenco in nato kopirate pripravljeno vrednost.
Rezultat
Ta stran odpre generator z že naloženimi x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — krivulja preseženja, ki jo nekatere knjižnice za popuščanje označujejo z easeOutBack. Negativni y1 in y2 nad 1 sta točno razlog, zakaj se spodnji predogled animacije pomakne čez svoj začetek in konec, preden se umiri; povlecite ročaj ali uredite številke, da bo učinek močnejši ali blažji.
Če sem iskren glede tega, kaj je to: posamezna krivulja cubic-bezier() ima samo dve kontrolni točki, tako da lahko približa eno gibanje prekoračitve in poravnave, ne pa pristnega fizičnega odboja z več odboji z več padajočimi skoki. Za dobeseden učinek odboja žoge bi potrebovali več ključnih sličic ali segmentov steps(), povezanih skupaj – ta krivulja je najbližje, kar lahko navadna funkcija za merjenje časa prehoda dobi v eni vrstici.
Ta posamezna prekoračitev je še vedno natanko tisto, kar si želi večina poskočnih uporabniških vmesnikov: gumb, ki se dvigne nekoliko čez svojo velikost v mirovanju, modal, ki preseže, preden se usede, kartica, ki se postavi na svoje mesto. Kopirajte vrednost, kakršna je, za ta hiter občutek ali zmehčajte y1 proti 0 in y2 proti 1, da zmanjšate prekoračitev.