Bounce-tyylinen CSS-kevennyskäyrä
Suunnittele mukautettu CSS-ajoitusfunktio cubic-bezier() vetämällä kahta ohjauspistettä, esikatsele sitä livenä lineaarista viittausta vasten ja kopioi sitten valmis arvo.
Tulos
Tämä sivu avaa generaattorin, jossa x1=0.68, y1=-0.55, x2=0.265, y2=1.55 on jo ladattu – ylityskäyrä joidenkin helpottavien kirjastojen tunnisteella easeOutBack. Negatiivinen y1 ja y2 arvon 1 yläpuolella ovat juuri se syy, miksi alla oleva animaation esikatselu vetää takaisin alun ja lopun ohi ennen asettumista; vetämällä joko kahvaa tai muokkaamalla numeroita tehdäksesi vaikutuksesta vahvempi tai pehmeämpi.
Rehellisesti sanoen, mitä tämä on: yhdellä kuutio-bezier()-käyrällä on vain kaksi ohjauspistettä, joten se voi arvioida yhtä ylitys-ja asettua -liikettä, ei aitoa usean pomppimisen fyysistä pomppimista, jossa on useita pieneneviä hyppyjä. Kirjaimelliseen pallopomppaustehosteeseen tarvitaan useita avainruutuja tai step()-segmenttejä ketjutettuina yhteen – tämä käyrä on lähimpänä tavallista siirtymäajoitusfunktiota yhdellä rivillä.
Tämä yksittäinen ylitys on edelleen juuri sitä, mitä useimmat pomppivat käyttöliittymät haluavat: painike, joka ponnahtaa hieman lepokokonsa yli, modaali, joka ylittää ennen asettumista, kortti, joka ponnahtaa paikalleen. Kopioi arvo sellaisena kuin se on tuon napakan tunteen saamiseksi tai pehmenna y1 kohti 0 ja y2 kohti 1 valitaksesi ylityksen takaisin.