CSS animacijos

Yra daug programų, kuriose galite redaguoti, kurti montažus ar net kurti animacija, kiekvieną kartą yra daug programinės įrangos, kuri prideda tokio tipo interaktyvių projektų. Šiame įraše ne tik supažindinsime jus su animacijos pasauliu, bet ir su nauju draugu.

Kaip gerai žinote, kompiuterių pasaulyje gausu komandų ir naudingų įrankių, skirtų tinklalapiams ar internetinei medijai kurti, kurie šiuo metu egzistuoja kartu. Likite su mumis ir atraskite šioje naujoje mokymo programoje dar vieną būdą, kaip padidinti savo lygį naudojant kompiuteriją ir interaktyvumą.

Kas yra animacijos?

Norime, kad jūs pilnai įeitumėte į mokymo programą, tačiau tam būtina įeiti į animacijos pasaulį arba grafinio dizaino pasaulį. interaktyvus dizainas. 

Animacijos taip pat yra audiovizualinio pasaulio dalis, iš tikrųjų jos būtų nieko, jei jose būtų įvestas garsas ir judantis vaizdas. Dėl šios priežasties, kai kalbame apie „animaciją“, mes vadiname tai, kas populiariai žinoma kaip „animaciniai filmai“.

Kaip apibendrinta aukščiau, animacija atsiranda dėl gebėjimo suteikti judėjimą kažkam, šiuo atveju animaciniams filmams. Bet kaip visi šie judesiai pasiekiami? Na, be jokios abejonės, jie kyla iš to, ką mes vadiname piešinių ar nuotraukų sekos kad nuosekliai, vienas po kito užsakomi, jiems pavyksta mūsų akyse sukurti patikimą judėjimą, kuris pasiduoda ir patenka į vizualinės iliuzijos žaidimą.

Anksčiau pirmosios animacijos buvo kuriamos ant popieriaus lapų, kiekviename iš jų animacinis personažas buvo piešiamas žingsneliais, o pasiekus lapo pabaigą, greitai perkeliamas po vieną, kad būtų pasiektas judesio efektas. piešimas.

Animacijos tipai

Yra įvairių tipų animacijos:

Animacinis filmas arba tradicinė animacija

Šis stilius susideda iš judesio suteikimo pagrindiniam veikėjui kadras po kadro. Pradžioje, kai neužteko audiovizualinių priemonių, jie buvo atliekami piešiant ir nutapant kiekvieną kadrą (įskaitant ir animacijos foną, sceną ar foną), kad vėliau būtų filmuojami kaip žinome kaip kino juosta.

„Stop Motion“

„Stop Motion“ yra animacijos technika, neturinti nieko bendra su animaciniais filmais. Be to, pagrindinis jo tikslas yra imituoti objektų judesius, kurie realybėje yra visiškai statiški ir yra padalintas į dvi fazes: molio arba molio judėjimo animacija ir standžių objektų animacija.

Pikseliacija

Pikseliavimas yra iš Stop Motion sukurta technika, kurią sudaro darbas su objektais, kurie nėra nei lėlės, nei modeliai, o įprasti objektai ar žmonės. Objektai fotografuojami kelis kartus ir kiekvienu kadru šiek tiek pasislenka.

Rotoskopija

Jį sudaro tiesioginis kito piešinio piešimas, pvz., piešinio atsekimas kitame piešinyje arba realaus asmens atsekimas. Jis laikomas mocap, tai yra judesio fiksavimo, naudojamo skaitmeniniams personažams atkurti kino pasaulyje, pirmtaku.

Animacija iškarpomis arba iškirpti animacija

Tai technika, kurią sudaro figūrų karpymas, šios figūros gali būti pavaizduotos popieriuje arba nuotraukose. Veikėjų kūnas sukurtas remiantis išpjovomis, o judesys ir animacija atsiranda pakeitus minėtas išpjovas.

3d animacija

3D animacija atsiranda iš redaktoriaus programos, kuri leidžia atlikti modeliavimą ir animaciją. Šiuose dviejuose variantuose veikia geras apšvietimas, kameros judesiai ir specialieji efektai.

Šiuo metu yra ir kitų technikų, tokių kaip: tapyba ant stiklo, smėlio animacija, gujų ekranas ir tapyba ant celiulioido. 

Kas yra CSS?

Dabar, kai žinote šiek tiek daugiau apie animacijų pasaulį, laikas supažindinti jus su CSS akronimų pasauliu.

Sutrumpinimas CSS, žr. „pakopinio stiliaus lapus“. Ją sudaro kalba, kuri naudojama dizaino sektoriuje ir internetinių puslapių pristatyme, dar geriau, tai įrankių ir komandų serija, kuri yra atsakinga už tinklalapio pateikimą tokį, kokį matome pirmą kartą. jis jau sukurtas. Veikia kartu su įrankiu HTML (sutvarkyta iš pagrindinio puslapių turinio).

Jo pavadinimą lemia lapų skaičius, o vienas iš jų paveldi savybes ar savybes iš kitų. Tai reiškia, kad galite dirbti su paprastu tinklaraščio šablonu, bet kai norite tinkinti svetainės išvaizdą, turėsite įdiegti CSS, kuris kartu su gera TVS padės padidinti jūsų turinio pasiekiamumą.

Kam skirtas CSS?

Naudodami CSS galite tvarkyti savo puslapį, tai yra, galite nurodyti savo tinklalapiui, kaip norite rasti visą informaciją, kad žiūrovas būtų lengvai tvarkomas ir tuo pačiu būtų naudingas. Čia įveskite visas kai kurių elementų, kurie yra tinklalapio stiliaus ar dizaino dalis, komandas, pavyzdžiui, šriftai, spalvos, dydžiai ir kt. 

Paprastai tam, kad geriau suprastumėte, apie ką šis įrankis, skaitmeninės rinkodaros specialistai pirmieji apie tai supranta, nes jie yra tie, kurie juos tvarko.

Animuoti naudojant CSS

Na, dabar, kai šiek tiek žinote apie animacijų ir CSS pasaulį. Atėjo laikas pradėti mokymo programą.

CSS animacija leidžia animuoti perėjimą iš vieno CSS stiliaus į kitą. Šios animacijos susideda iš dviejų komponentų: a stilius kuriame aprašoma CSS animacija ir rinkinys rėmai kurie nurodo jo pradinę ir galutinę būseną bei galimus tarpinius taškus joje.

Kiekviena iš šių animacijų turi keletą privalumų:

• Jį labai lengva naudoti paprastoms animacijoms, galite tai padaryti net nežinant Javascript.
• Animacija rodoma teisingai, net ir mažai energijos naudojančiuose kompiuteriuose.
• Valdomas naršyklės, leidžia optimizuoti jos veikimą ir efektyvumą, taip sumažinant dažnį ir paleidžiant skirtukus taip, kad jų nesimatytų.

Animacijos nustatymai

Norėdami pradėti animaciją, pirmiausia turėsime ją sukonfigūruoti. Norėdami tai padaryti, mes eisime į turtą animacija ir jos sub-ypatybės. Šis įrankis leis mums sukonfigūruoti ir ritmą, ir animacijos trukmę, o net ne jos seką.

Subypatybės yra šios:

animacija – delsimas

Vėlavimo laikas nuo elemento įkėlimo momento iki animacijos sekos pradžios.

animacija – režisūra

Nurodo, ar animacija turi grįžti į pradžios kadrą sekos pabaigoje, ar ji turi prasidėti nuo pradžios, kai pasiekia pabaigą.

animacija – trukmė

Nurodo laiką, per kurį animacija užbaigia savo ciklą (trukmė)

animacija – iteracija – skaičius

Kiek kartų tai kartojama. Galime nurodyti begalinis kartoti animaciją neribotą laiką.

animacija – pavadinimas

Jis naudojamas norint nurodyti pavadinimą, apibūdinantį kiekvieną animacijos kadrą.

animacija – žaidimas – būsena

Leidžia pristabdyti ir tęsti animacijos seką.

animacija – laiko nustatymo funkcija

Tai rodo animacijos ritmą, tai yra, kaip rodomi animacijos kadrai, tam nustatomos pagreičio kreivės.

animacija - užpildymas - režimas

Nurodo, kokias ypatybių vertes turės pasibaigus animacijai.

Nustatykite seką su rėmeliais

Kai sukonfigūravome laiką, nomenklatūrą ir kt. Atėjo laikas pasiūlyti mūsų animacijos išvaizdą.

Norėdami tai padaryti, sukursime du naujus rėmelius ir naudosime taisyklę @rakto kadrai. Taip kiekvienas kadras aprašo, kaip kiekvienas elementas randamas animacijos sekos metu.

Norėdami nurodyti laikas ir ritmas, rėmas naudoja procentas ir nuo ir ikiDėl to galime nurodyti, kada pradžia vyksta su 0%, o pabaiga su 100%.

Rėmelių ir teksto animacija

Jei norite pridėti daugiau rėmelių ir juos animuoti tekstu, turite pritaikyti didesnį antraštės šriftą, kad antraštė padidėtų tam tikrą laiką judant, o vėliau sumažėtų iki pradinio dydžio. Tam mes sukursime šį kodą:

75 % šriftas – dydis: 300 %; marža - kairė: 25%; plotis: 150%;

Naudodami šį kodą siūlome naršyklei, kad 75% sekos antraštės kairioji paraštė būtų 25%, o dydis - 200%, o plotis - 150%.

Animacijos kartojimas

Kad animacija kartotųsi, būtina naudoti šią savybę animacija – iteracija – skaičius ir turime nurodyti, kiek kartų norime, kad tai kartotųsi. Taip pat galime naudoti begalinis kad tai visada kartotųsi.

Išvada

Kaip matėte, CSS galite kurti animuotus projektus ir įvesti juos atlikdami nurodytus veiksmus. Jei ir toliau klausiate ir informuosite save, pamatysite, kad mums yra daug galimybių.

Ar jau išdrįsote?