⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

Atšokimo stiliaus CSS lengvinimo kreivė

Sukurkite pasirinktinę CSS cubic-bezier() laiko nustatymo funkciją vilkdami du valdymo taškus, peržiūrėkite ją tiesiogiai pagal tiesinę nuorodą, tada nukopijuokite paruoštą reikšmę.

Vilkite oranžinę rankeną (P1) ir raudoną rankenėlę (P2), kad pakeistumėte kreivės formą – taip pat veikia ir rodyklių klavišai. X lieka užfiksuotas tarp 0 ir 1, kaip reikalauja CSS; vilkite rankenėlę virš arba po langeliu, kad nusiųstumėte y už šio diapazono, kad gautumėte viršijimo ir atmetimo efektus.

Jūsų kreivė

Linijinis (palyginimui)

Apdorojama... 0%

Rezultatas

Šiame puslapyje atidaromas generatorius, kai x1=0.68, y1=-0.55, x2=0.265, y2=1.55 jau įkeltas – kai kurių palengvinančių bibliotekų žymėjimo easeOutBack viršijimo kreivė. Neigiamas y1 ir y2 virš 1 yra būtent tai, kodėl toliau pateikta animacijos peržiūra atsitraukia prieš pradžią ir pabaigą prieš atsiskaitant; vilkite rankenėlę arba redaguokite skaičius, kad efektas būtų stipresnis arba švelnesnis.

Atvirai kalbant apie tai, kas tai yra: viena kubinio-bezier() kreivė turi tik du valdymo taškus, todėl ji gali apytiksliai apytiksliai atlikti vieną peršokti ir nusistovėti judesį, o ne tikrą kelių atšokimų fizinį atšokimą su keliais mažėjančiais šuoliais. Norint pasiekti tiesioginį kamuoliuko atšokimo efektą, jums reikės kelių pagrindinių kadrų arba žingsnių () segmentų, sujungtų grandinėje – ši kreivė yra arčiausiai paprastos perėjimo laiko funkcijos, kurią gali pasiekti vienoje eilutėje.

Tas vienintelis viršijimas vis dar yra būtent tai, ko nori labiausiai šoktelėjusi vartotojo sąsaja: mygtukas, kuris šiek tiek iššoka virš jo ramybės dydžio, modalas, kuris peršoka prieš nusistovėdamas, kortelė, kuri svyruoja į vietą. Nukopijuokite vertę tokią, kokia yra, kad jaustumėtės aštriai, arba sušvelninkite y1 link 0, o y2 - link 1, kad sugrąžintumėte viršijimą.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Vilkamasis SVG kreivės redaktorius su dviem rankenomis (P1 ir P2) ir redaguojamomis x1/y1/x2/y2 skaičių įvestimis pikselių tikslumui gauti.
  • Animacijos peržiūra, kurioje tinkintas kubinis-bezier() laikas lyginamas su linijiniu atskaitos rutuliu, kad galėtumėte matyti palengvėjimą, o ne tik jį perskaityti.
  • Nukopijuojama kubinė bezier (x1, y1, x2, y2) eilutė, paruošta perėjimo laiko funkcijai arba animacijos laiko funkcijai, taip pat iš anksto nustatyti puslapiai, kad būtų lengviau įvesti, atšokti ir naudoti standartinę medžiagų dizaino kreivę.

Pagrindiniai privalumai

✓ Vilkite bet kurią valdymo taško rankenėlę ir stebėkite kreivę, tiesioginės animacijos peržiūrą ir kopijuojamą CSS eilutę – nereikia įsiminti koordinačių matematikos.
✓ Y gali viršyti 0 ir 1 spyruoklės ir atmetimo efektams, o X išlieka 0–1 diapazone, kurio iš tikrųjų reikalauja CSS, todėl kiekviena nukopijuota vertė galioja ją įklijuojant.
✓ Greta peržiūra suderina jūsų pasirinktą kreivę su paprasta linijine nuoroda, todėl judėjimo pojūčio skirtumas – visa priežastis, kodėl reikia naudoti lengvinimą – akivaizdu iš pirmo žvilgsnio, o ne tik kodo išvestis.

Naudojimo atvejai

  • • Ar jums reikia tinkintos CSS perėjimo laiko funkcijos arba animacijos laiko funkcijos reikšmės, o ne vieno iš integruotų lengvųjų raktinių žodžių?
  • • Ar norite tiksliai pamatyti, kaip kubinis-bezieris (0,42, 0, 0,58, 1) – realūs skaičiai, esantys už paties CSS raktinio žodžio „paprastas įvedimas“ – atrodo judantys prieš jį išsiųsdami?
  • • Ar kuriate šokinėjantį mygtuką, modalinę ar kortelių animaciją ir jums reikia paruoštos viršijimo palengvinimo kreivės, kurią norite nukopijuoti tiesiai į stiliaus lapą?