Põrke stiilis CSS-i leevendamiskõver
Kujundage kohandatud CSS-i cubic-bezier() ajastusfunktsioon, lohistades kahte kontrollpunkti, kuvage selle reaalajas eelvaade lineaarse viite suhtes ja seejärel kopeerige valmis väärtus.
Tulemus
See leht avab generaatori, kus x1=0,68, y1=-0,55, x2=0,265, y2=1,55 on juba laaditud – see on mõne kergendava teegi tähis easeOutBack. Negatiivne y1 ja y2 1 kohal on täpselt põhjus, miks allolev animatsiooni eelvaade tõmbub tagasi algusest ja lõpust enne settimist; efekti tugevamaks või õrnemaks muutmiseks lohistage kas käepidet või muutke numbreid.
Kui aus olla, mis see on: ühel cubic-bezier() kõveral on ainult kaks kontrollpunkti, nii et see võib ligikaudselt hinnata üht üle- ja paigalseisu liikumist, mitte tõelist mitme põrgatusega füüsilist põrget koos mitme kahaneva hüppega. Palli põrkeefekti saavutamiseks on vaja mitut võtmekaadrit või step() segmenti, mis on omavahel aheldatud – see kõver on kõige lähemal, mida tavaline üleminekuaja funktsioon võib ühel real olla.
See üksainus ületamine on ikka täpselt see, mida enamik kopsakaid kasutajaliideseid soovib: nupp, mis hüppab veidi üle puhkesuuruse, modaal, mis ületab enne settimist, kaart, mis hüppab kohale. Kopeerige väärtus sellisel kujul, nagu see on, või pehmendage y1 0 suunas ja y2 1 suunas, et tagasi valida.