Curba de relaxare CSS în stilul sărituri
Proiectați o funcție de sincronizare CSS cubic-bezier() personalizată trăgând două puncte de control, previzualizați-o în direct față de o referință liniară, apoi copiați valoarea gata.
Rezultat
Această pagină deschide generatorul cu x1=0.68, y1=-0.55, x2=0.265, y2=1.55 deja încărcat - o curbă de depășire, unele biblioteci ușoare eticheta easeOutBack. Negativul y1 și y2 de deasupra lui 1 sunt exact motivul pentru care previzualizarea animației de mai jos se trage înapoi dincolo de începutul său și de sfârșitul său înainte de a se stabili; trageți fie mâner, fie editați numerele pentru a face efectul mai puternic sau mai blând.
Fiind sincer despre ce este aceasta: o singură curbă cubic-bezier() are doar două puncte de control, astfel încât poate aproxima o mișcare de depășire și de așezare, nu o săritură fizică autentică cu mai multe sărituri cu mai multe hopuri în scădere. Pentru un efect literal de săritură a mingii, ai avea nevoie de mai multe cadre cheie sau segmente de pași () înlănțuite împreună - această curbă este cea mai apropiată o funcție simplă de sincronizare a tranziției pe o linie.
Acea depășire unică este încă exact ceea ce își dorește cea mai mare interfață de utilizare: un buton care trece puțin peste dimensiunea sa de repaus, un modal care depășește înainte de a se stabili, un card care se fixează la loc. Copiați valoarea așa cum este pentru acea senzație captivantă sau înmuiați y1 spre 0 și y2 spre 1 pentru a forma depășirea înapoi.