Atlēcienu stila CSS atvieglošanas līkne
Izveidojiet pielāgotu CSS cubic-bezier() laika funkciju, velkot divus kontrolpunktus, priekšskatiet to tiešraidē pret lineāro atsauci, pēc tam kopējiet gatavu vērtību.
Rezultāts
Šajā lapā tiek atvērts ģenerators ar jau ielādētu x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — dažu atvieglošanas bibliotēku apzīmējumu easeOutBack pārsnieguma līkne. Negatīvā vērtība y1 un y2 virs 1 ir tieši iemesls, kāpēc tālāk redzamais animācijas priekšskatījums pavelk atpakaļ pirms sākuma un beigām, pirms tas tiek atrisināts; velciet vai nu rokturi, vai rediģējiet ciparus, lai padarītu efektu spēcīgāku vai maigāku.
Godīgi sakot, kas tas ir: vienai cubic-bezier() līknei ir tikai divi kontrolpunkti, tāpēc tā var aptuveni tuvināt vienu pārtīšanas un nosēšanās kustību, nevis īstu vairāku atlēcienu fizisko atlēcienu ar vairākiem lēcieniem, kas samazinās. Lai iegūtu burtisku bumbiņas atsitiena efektu, jums ir nepieciešami vairāki atslēgu kadri vai soļu () segmenti, kas ir savienoti kopā — šī līkne ir vistuvākā vienkāršai pārejas laika funkcijai, ko var iegūt vienā rindā.
Šis vienīgais pārsniegums joprojām ir tieši tas, ko vēlas vairums izdevīgāko lietotāja interfeisu: poga, kas uznirst nedaudz pāri tās miera izmēram, modāls, kas pārspēj pirms nosēšanās, karte, kas atsperas vietā. Nokopējiet vērtību tādu, kāda tā ir, lai iegūtu šo brīnišķīgo sajūtu, vai mīkstiniet y1 virzienā uz 0 un y2 pret 1, lai izsauktu pārsniegumu atpakaļ.