Krivka uvoľnenia CSS v štýle odrazu
Navrhnite si vlastnú funkciu časovania CSS cubic-bezier() pretiahnutím dvoch kontrolných bodov, ukážte ich naživo oproti lineárnej referencii a potom skopírujte hotovú hodnotu.
Výsledok
Táto stránka otvorí generátor s už načítaným x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — krivka prekročenia, ktoré niektoré knižnice uľahčujú s označením easyOutBack. Záporné y1 a y2 nad 1 sú presne tým dôvodom, prečo sa náhľad animácie nižšie stiahne späť za svoj začiatok a za koniec, kým sa ustáli; potiahnite buď rukoväť alebo upravte čísla, aby bol efekt silnejší alebo jemnejší.
Aby som bol úprimný, o čo ide: jedna krivka cubic-bezier() má iba dva riadiace body, takže môže aproximovať jeden pohyb prekmitnutia a ustálenia, nie skutočný viacnásobný fyzický odraz s niekoľkými zmenšujúcimi sa skokmi. Na doslovný efekt odrazu lopty by ste potrebovali viacero kľúčových snímok alebo segmentov krokov () spojených dohromady – táto krivka je najbližšia, akú môže obyčajná funkcia načasovania prechodu dosiahnuť v jednom riadku.
Tento jediný prekmit je stále presne to, čo chce väčšina skákajúcich používateľských rozhraní: tlačidlo, ktoré mierne presiahne svoju pokojovú veľkosť, modál, ktorý pred ustálením prestrelí, karta, ktorá zapadne na svoje miesto. Skopírujte hodnotu tak, ako je, pre ten svižný pocit, alebo zjemnite y1 smerom k 0 a y2 smerom k 1, aby ste vytočili prekročenie späť.