CSS-animatsioonid

Seal on palju programme, kus saate toimetada, montaaže luua või isegi luua animatsioonid, iga kord on palju tarkvara, mis lisavad seda tüüpi interaktiivseid projekte. Selles postituses me mitte ainult ei tutvusta teile animatsioonimaailma, vaid tutvustame teile ka uut sõpra.

Nagu te hästi teate, on arvutimaailm täis käske ja kasulikke tööriistu veebilehtede või võrgumeedia arendamiseks, mis praegu eksisteerivad koos. Jääge meiega ja avastage selles uues õpetuses veel üks viis oma arvutitöö ja interaktiivsuse taseme tõstmiseks.

Mis on animatsioonid?

Soovime, et siseneksite täielikult õpetusesse, kuid selleks on vaja siseneda animatsioonide maailma või graafilise disaini maailma. interaktiivne disain. 

Animatsioonid on samuti osa audiovisuaalsest maailmast, tegelikult poleks neist midagi, kui või sellepärast, et neis tuuakse sisse heli ja liikuv pilt. Sel põhjusel, kui me räägime "animatsioonist", viitame sellele, mida rahvasuus tuntakse kui "multifilme".

Nagu ülalpool kokku võetud, tekib animatsioon võimest anda millelegi, antud juhul multikatele, liikumist. Aga kuidas kõik need liikumised saavutatakse? Kahtlemata tulenevad need sellest, mida me kutsume jooniste või fotode jadad et järjestikku, üksteise järel tellides õnnestub neil meie silme all tekitada usutav liikumine, mis annab end välja ja siseneb visuaalse illusiooni mängu.

Varem olid esimesed animatsioonid kujundatud paberilehtedele, igas neist joonistati animeeritud tegelane sammude kaupa ja kui lehe lõpp oli jõutud, lasti see ükshaaval kiiresti läbi, et saavutada liikumise mõju. joonistamine.

Animatsiooni tüübid

Animatsioone on erinevat tüüpi:

Multifilm või traditsiooniline animatsioon

See stiil seisneb peategelasele liikumise andmises kaader kaadri haaval. Alguses, kui audiovisuaalseid vahendeid nappis, viidi need läbi iga kaadri (sh animatsiooni tausta, lava või tausta) joonistamise ja maalimise kaudu, et hiljem filmida meile tuntud filmilindile.

Peatage liikumine

Stop Motion on animatsioonitehnika, millel pole koomiksitega mingit pistmist. Lisaks on selle põhieesmärk simuleerida objektide liikumist, mis tegelikkuses on täiesti staatilised ja jaguneb kaheks faasiks: savi või claymotion animatsioon ja jäikade objektide animatsioon.

Pikselatsioon

Pixelation on Stop Motionist pärit tehnika, mis seisneb töös objektidega, mis pole ei nukud ega mudelid, vaid tavalised objektid või inimesed. Objekte pildistatakse mitu korda ja need nihkuvad iga kaadriga veidi.

Rotoskoopia

See koosneb teise joonise otsesest joonistamisest, näiteks joonise jälgimisest teisele joonisele või reaalsele isikule. Seda peetakse mocapi eelkäijaks, see tähendab liikumishõivet, mida kasutatakse digitaalsete tegelaste taasloomiseks kinomaailmas.

Animatsioon väljalõigete või väljalõike animatsiooni abil

See on tehnika, mis koosneb figuuride lõikamisest, neid kujundeid saab kujutada paberil või fotodel. Tegelaste keha on üles ehitatud väljalõigete põhjal ning liikumine ja animatsioon tekivad nende väljalõigete asendamisest.

3D animatsioon

3D-animatsioon pärineb redigeerimisprogrammist, mis võimaldab teostada simulatsioone ja animatsioone. Nende kahe variandi puhul puutuvad kokku hea valgustus, kaamera liigutused ja eriefektid.

Praegu on ka muid tehnikaid, näiteks: maal klaasile, animatsioon liivast, gujade ekraan ja maal tselluloidile. 

Mis on CSS?

Nüüd, kui teate animatsioonide maailmast veidi rohkem, on aeg tutvustada teile CSS-i akronüümide maailma.

Lühend CSS, vaadake "kaskaadlaaditabelid". See koosneb keelest, mida kasutatakse disainisektoris ja veebilehtede esitlemisel, veelgi parem, need on tööriistade ja käskude seeriad, mis vastutavad veebilehe esitlemise eest sellisena, nagu me seda esimest korda näeme. kui see on juba loodud. Töötab koos tööriistaga HTML (korrastatud lehtede põhisisu järgi).

Selle nime määrab selles sisalduvate lehtede arv ja üks neist pärib omadused või omadused teistelt. See tähendab, et saate töötada lihtsa ajaveebimalliga, kuid kui soovite saidi välimust kohandada, peate juurutama CSS-i, mis koos hea CMS-iga aitab teil sisu ulatust suurendada.

Milleks CSS on mõeldud?

CSS-i abil saate oma lehte korrastada, see tähendab, et saate oma veebilehele öelda, kuidas soovite kogu teabe asukohta leida, et vaatajal oleks lihtne käsitseda ja samal ajal kasulik olla. Siia sisestage mõnede veebilehe stiili või kujunduse osaks olevate elementide kõik käsud, näiteks fondid, värvid, suurused jne. 

Tavaliselt saavad digitaalse turunduse spetsialistid sellest esimesena aru, et saaksite selle tööriistaga paremini aru saada, kuna nemad tegelevad sellega.

Animeerida CSS-is

Nüüd, kui teate natuke animatsioonide ja CSS-i maailmast. Nüüd on aeg alustada õpetust.

CSS-animatsioonid võimaldavad teil animeerida üleminekut ühe CSS-stiili ja teise vahel. Need animatsioonid koosnevad kahest komponendist: a stiil mis kirjeldab CSS-animatsiooni ja komplekti raamid mis näitavad selle alg- ja lõppseisundit ning võimalikke vahepunkte selles.

Igal neist animatsioonidest on mitmeid eeliseid:

• Selle kasutamine on lihtsate animatsioonide jaoks väga lihtne, saate seda teha isegi ilma Javascripti tundmata.
• Animatsioon kuvatakse õigesti isegi vähese energiatarbega arvutites.
• Kuna see on brauseri juhitav, võimaldab see optimeerida selle jõudlust ja tõhusust, vähendades seeläbi sagedust ja käivitades vahekaarte nii, et need pole nähtavad.

Animatsiooni seaded

Animatsiooni käivitamiseks peame kõigepealt selle konfigureerima. Selleks läheme kinnistule animatsioon ja selle alamomadustele. See tööriist võimaldab meil konfigureerida nii animatsiooni rütmi kui ka kestust ja isegi mitte selle järjestust.

Alamomadused on järgmised:

animatsioon - viivitus

Viivitus elemendi laadimise hetke ja animatsioonijada alguse vahel.

animatsioon - suund

Näitab, kas animatsioon peaks jada lõpus minema tagasi alguskaadrisse või lõppu jõudes alustama algusest.

animatsioon – kestus

Näitab aega, mis kulub animatsiooni tsükli lõpuleviimiseks (kestus).

animatsioon - iteratsioon - loendus

Kordamiste arv. Võime näidata lõpmatu animatsiooni lõputult korrata.

animatsioon - nimi

Seda kasutatakse animatsiooni iga kaadrit kirjeldava nime määramiseks.

animatsioon – mängimine – olek

Võimaldab teil animatsiooni jada peatada ja jätkata.

animatsioon - ajastus - funktsioon

See näitab animatsiooni rütmi, st kuidas animatsiooni kaadreid näidatakse, selleks luuakse kiirenduskõverad.

animatsioon - täitke - režiim

Määrab, millised väärtused on atribuutidel pärast animatsiooni lõppu.

Seadistage järjestus raamidega

Kui oleme kellaaja, nomenklatuuri jne konfigureerinud. On aeg anda meie animatsioonile ilme või tunne.

Selleks loome kaks uut raami ja kasutame reeglit @ võtmeraamid. Sellega kirjeldab iga kaader, kuidas iga element animatsioonijada jooksul leitakse.

Et näidata aeg ja rütm, raam kasutab protsent ja alates ja kuniTänu sellele saame näidata, millal toimub algus 0% ja lõpp 100%.

Raami ja teksti animatsioon

Rohkemate raamide lisamiseks ja nende tekstiga animeerimiseks peate rakendama päise fondi suuremat suurust, nii et päis suureneb teatud aja jooksul liikumisel ja seejärel väheneb seejärel algse suuruseni. Selleks loome järgmise koodi:

75% font - suurus: 300%; marginaal - vasak: 25%; laius: 150%;

Selle koodiga soovitame brauserile, et 75% jada puhul oleks päise vasak veeris 25% ja suurus 200% laiusega 150%.

Animatsiooni kordus

Animatsiooni kordumiseks peate kasutama järgmist atribuuti animatsioon - iteratsioon - loendus ja me peame märkima, mitu korda soovime seda korrata. Saame ka kasutada lõpmatu nii et seda korratakse alati.

Järeldus

Nagu olete näinud, saate CSS-is luua animeeritud projekte ja saate selle sisestada, järgides teile antud juhiseid. Kui jätkate uurimist ja enda teavitamist, avastate, et meil on palju võimalusi.

Kas olete juba julgenud?