Bounce-stílusú CSS-könnyítő görbe
Tervezzen meg egy egyéni CSS cubic-bezier() időzítési függvényt két vezérlőpont húzásával, tekintse meg élőben a lineáris referenciával szemben, majd másolja a kész értéket.
Eredmény
Ez az oldal megnyitja a generátort, ahol x1=0,68, y1=-0,55, x2=0,265, y2=1,55 már betöltött – ez egy túllépési görbe néhány könnyítési könyvtár easyOutBack címkéjével. A negatív y1 és az 1 feletti y2 pontosan ezért az alábbi animációs előnézet visszahúzza a kezdetét és a végét, mielőtt rendeződik; húzza a fogantyút vagy szerkessze a számokat, hogy erősebb vagy gyengédebb legyen a hatás.
Őszintén szólva, hogy mi is ez: egyetlen cubic-bezier() görbének csak két vezérlőpontja van, tehát egy túllövés és megállapodó mozgást tud megközelíteni, nem pedig egy valódi többszörös visszapattanást, több csökkenő ugrással. A szó szerinti labdapattanó hatás eléréséhez több kulcskockára vagy step() szegmensre van szükség, amelyek egymáshoz vannak láncolva – ez a görbe a legközelebb egy sima átmenet-időzítési függvényhez egy sorban.
Ez az egyetlen túllövés még mindig pontosan az, amire a legtöbb ugráló felhasználói felület vágyik: egy gomb, amely kissé túllép a nyugalmi méreténél, egy modális, amely túllendül, mielőtt elhelyezkedik, egy kártya, amely a helyére ugrik. Másolja ki az értéket a jelenlegi állapotában, hogy visszakapja a túllépést, vagy lágyítsa az y1-et 0 felé, az y2-t pedig 1 felé.