Kaip naudoti „CSS3“ perėjimus ir animacijas, kad pažymėtumėte UI pakeitimus

Dizaineriai ir menininkai ilgą laiką eksperimentuoja su judesiais, poveikiais ir įvairiomis iliuzijomis, siekdami pridėti papildomą sluoksnį savo darbui. Opos judėjimas 1960-aisiais pradėjo naudoti optines iliuzijas, kad susidarytų įspūdis apie judesį.

Nuo tada atsirado naujesni ir naujesni metodai, pvz., Neseniai populiarus kinetinis menas, išplečiantis žiūrovo požiūrį, naudojant daugiamatį judėjimą. „Motion“ taip pat pasirodė kompiuterių moksle, išradus pirmąjį mirksintį žymeklį 1967 m.

Išankstinio kūrimo metu „DOM“ elementai paprastai buvo animuoti „JavaScript“ prieš išleidžiant „CSS3“, o tai vis dar veikia, tačiau Naujos „CSS3“ įdiegtos savybės leidžia tobulinti savo dizainą su skirtingais efektais ir judesiais intuityviau.

Du pagrindiniai būdai, kuriuos siūlo CSS3, yra perėjimai ir animacijos. Šiame pranešime pažvelgsime į tai, kas jie yra, koks skirtumas tarp jų ir kaip galite juos naudoti.

Perėjimai

Pereinamieji ir animaciniai darbai yra naudojami vizualizuoti pokyčius valstybėje HTML elemento modifikuoti vieną ar daugiau CSS savybių.

Paprasčiausia būsenos keitimo vizualizavimo forma yra mygtuko arba nuorodos spalvos keitimas, kai jis užsidega. Kai taip atsitinka, elementas gauna šiek tiek kitokį stilių, kurį žiūrovas paprastai pastebi taip, tarsi kažkas judėtų ekrane.

Nuorodos CSS savybių keitimas pakyla (arba fokusavimu arba paspaudimu) yra seniausia ir paprasčiausia perėjimų forma, ir ji egzistavo dar prieš CSS3 erą.

 a spalva: oranžinė;  a: svirtis spalva: raudona;  a: fokusavimas spalva: mėlyna;  a: aplankyta spalva: žalia; 

Perėjimai naudojami, kai HTML elementas keičiasi iš vienos iš anksto nustatytų būsenų į kitą. CSS3 pristatė naujas savybes, leidžiančias atlikti sudėtingesnius vaizdus nei anksčiau, pavyzdžiui, laiko nustatymo funkcijas arba trukmės kontrolę.

Išsiaiškinsime, kaip animacijos skiriasi, peržiūrėsime naujas CSS savybes kitame skyriuje. Dabar pažiūrėkime svarbiausius dalykus, kuriuos reikia žinoti apie perėjimus.

1. Jie visada turi pradžią ir pabaigą.
2. Būsena tarp pradžios ir pabaigos taškų yra netiesiogiai apibrėžta naršyklėje, tai negalime pakeisti su CSS.
3. Jie reikalauja aiškus paleidimas, pvz., pridedant naują pseudoklį pagal CSS, arba naują klasę pagal jQuery.

Jūs galite pamatyti gražią išmaniai išnaudotų CSS3 perėjimų žemiau pavyzdį, kuriame autorius atskleidžia paslėptą informaciją tokiu būdu, kuris nėra įsibrovęs, bet vis dar orientuoja vartotojų dėmesį į naują turinį.

Animacijos

Jei norime vizualizuoti būsenos pasikeitimus sudėtingesniais judesiais arba jei neturime aiškios paleidimo, pvz. jei norime pradėti poveikį, kai puslapis įkeliamas, animacija yra kelias.

Animacijos leidžia nustatyti sudėtingesnį kelią, nustatydami ir konfigūruodami savo raktų rėmeliai. Raktų rėmeliai yra tarpiniai taškai animacijos metu, tai leidžia mums keisti animacinio elemento stilių tiek kartų, kiek norime.

Nors CSS3 siūlo puikius būdus sukurti sudėtingas animacijas, dažniausiai juos sunkiau sukurti nei perėjimai, todėl ten yra daug puikių animacinių bibliotekų, kurios gali palengvinti mūsų darbą.

Svarbiausi dalykai, kuriuos reikia žinoti apie CSS3 animacijas, yra šie:

1. jie nereikalauja aiškios paleidimo, jie gali prasidėti puslapio apkrova arba kai naršyklėje vyksta kitas DOM įvykis
2. jie gali būti naudojami tais atvejais, kai naudojami perėjimai, pavyzdžiui, kai pridedama arba pašalinama nauja klasė arba pseudoklasas (nors tai yra rečiau naudojamas atvejis)
3. jie reikalauja, kad nustatytume kai kurias pagrindines rėmus (tarpines būsenas)
4. galime nurodyti šių raktų rėmelių skaičių, dažnį ir stilių

Toliau pateiktame pavyzdyje galite pamatyti vėsią animuotą išskleidžiamąjį meniu. Animacija prasideda paspaudus mygtuką. Tai pasiekiama pridedant papildomų klasių sąrašo elementams su jQuery, kai paspaudžiamas įvykis.

Šios naujos klasės yra animuotos su nurodytomis @keyframes CSS failo taisyklės. Papildomos klasės pašalinamos jQuery, kai vartotojas kitą kartą spustelės mygtuką, o meniu vėl paslėptas.

CSS savybės ir @keyframes Taisyklė

Perėjimams galime naudoti arba perėjimas trumpalaikė nuosavybė arba 4 vienos su perėjimu susijusios savybės: pereinamasis turtas, perėjimo trukmė, pereinamojo laiko nustatymo funkcija, ir pereinamojo laikotarpio vėlavimas. Trumpa nuosavybė apima visas atskiras savybes sutrumpinta forma.

Animacijoms yra animacija stenografinė nuosavybė mūsų rankose, kuri reiškia ne mažiau kaip 8 atskiras animacijos savybes animacijos pavadinimas, animacijos trukmė, animacijos ir laiko nustatymo funkcija, animacijos uždelsimas, animacijos-iteracijos skaičius, animacijos kryptis, animacijos užpildymo režimas, ir animacinio žaidimo būsena.

Svarbiausias dalykas tiek perėjimams, tiek animacijoms yra tai, kad mes visada reikia nurodyti CSS savybes, kurios bus pakeistos būsenos keitimo metu. Su perėjimais atrodo taip:

 .elementas fonas: oranžinis; pereinamasis turtas: fonas; perėjimo trukmė: 3s; pereinamojo laiko nustatymo funkcija: lengvumas;  .elementas: hover background: red; 

Mes nurodėme fonas nuosavybė, nes tai bus permainos metu.

Viename perėjime galime pakeisti daugiau nei vieną CSS nuosavybę, šiuo atveju aukščiau nurodytas kodas būtų pakeistas taip: pereinamasis turtas: fonas, siena;. Taip pat galime naudoti pereinamasis turtas: visi;, jei nenorime atskirai nurodyti kiekvieno turto.

Galime pasirinkti stenografą perėjimas nuosavybė. Jei tai padarysime, visada turime atkreipti dėmesį į tinkamą vidinių savybių tvarką (žr. Sintaksę dokumentuose).

 .elementas fonas: oranžinis; perėjimas: fono 3s lengvumas;  .elementas: hover background: red; 

Jei norime sukurti animaciją, privalome nurodyti susijusią raktų rėmeliai. CSS savybės turi būti pakeistos atskirai @keyframes at-taisykles. Štai pavyzdys, kaip galime tai padaryti:

 .elementas pozicija: santykinis; animacijos pavadinimas: skaidrė; animacijos trukmė: 3s; animacijos ir laiko nustatymo funkcija: lengvumas;  @keyframes slide 0% kairėje: 0;  50% kairėje: 200px;  100% kairėje: 400px; 

Pirmiau pateiktame pavyzdyje mes sukūrėme labai paprastą slankųjį efektą. Mes apibrėžėme animacijos pavadinimas, tada susieti 3 raktų rėmelius, kuriuos nurodėme @keyframes slide … at-taisykles. Procentai nurodo animacijos trukmę, taigi 50% pasitaiko pavyzdyje 1.5s.

Mes galėtume naudoti trumpinį animacija taip pat gali nustatyti paprastesnius raktų rėmus iš į valdyti tokiu būdu:

 .elementas pozicija: santykinis; animacija: skaidrių 3s lengvumas;  @keyframes slide iš left: 0;  į kairę: 400px; 

Sudėtingesnių animacijų kūrimas yra savo meno forma, jei jus domina, galite perskaityti du mūsų animacijos vadovus apie tai, kaip sukurti pažangią programą ir kaip sukurti atšokimo efektą.

Kai kuriate perėjimus ir animacijas, turite tai žinoti ne visos CSS savybės gali būti animuotos, todėl visada yra gera idėja patikrinti CSS animatable turtą, kurį norite pakeisti.

CSS3 animacijos ir perėjimai ilgą laiką dirbo su tiekėjo priešdėliais, kurių daugiau nereikia naudoti, tačiau „Mozilla“ kūrėjų tinklas vis dar rekomenduoja pridėti -žiniatinklio rinkinys tam tikrą laiką, kaip parama Webkit pagrindu veikiančioms naršyklėms tik neseniai pasiekė stabilumą.