CSS animazioak

Asko dira editatu, muntaiak sortu edota sortu ditzakezun programak animazioak, aldi bakoitzean mota honetako proiektu interaktiboak gehitzen dituzten software asko daude. Post honetan animazioen mundua ezagutzera emateaz gain, lagun berri bat aurkeztuko dizuegu.

Ondo dakizuenez, informatikaren mundua komandoz eta tresna baliagarriz beteta dago web orrialdeak edo sareko euskarriak garatzeko, gaur egun elkarrekin bizi direnak. Egon gurekin eta deskubritu tutorial berri honetan informatika eta interaktibitate maila handitzeko beste modu bat.

Zer dira animazioak?

Tutoretzan guztiz sartzea nahi dugu, baina horretarako animazioen munduan edo diseinu grafikoari dagokionez, munduan sartzea beharrezkoa da. diseinu interaktiboa. 

Animazioak ere ikus-entzunezkoen munduaren parte dira, izan ere, ez lirateke ezer izango haietan audio bat eta mugimenduzko irudi bat sartuko balira edo zeren. Hori dela eta, "animazioaz" hitz egiten dugunean, herrian "marrazki bizidunak" izenez ezagutzen dena aipatzen dugu.

Goian laburbildu den moduan, animazioa zerbaiti mugimendua emateko gaitasunetik sortzen da, kasu honetan marrazki bizidunetara. Baina nola lortzen dira mugimendu horiek guztiak?Ba, dudarik gabe, deitzen dugun horretatik sortzen dira, marrazkien edo argazkien sekuentziak jarraian ordenatuta, bata bestearen atzetik, gure begien aurrean mugimendu sinesgarri bat sortzea lortzen dutela, beraiek prestatzen direnak eta ilusio bisualaren jokoan sartzen direnak.

Lehen, lehen animazioak paper orrietan diseinatzen ziren, horietako bakoitzean, pertsonaia animatua pausoak emanez marrazten zen, eta behin orri amaierara iritsita, banan-banan azkar pasatzen zen mugimenduaren eragina lortzeko. marrazkia.

Animazio motak

Animazio mota desberdinak daude:

Marrazki bizidunak edo animazio tradizionalak

Estilo hau protagonistari fotogramaz fotograma mugimendua ematean datza. Hasieran, ikus-entzunezko baliabide nahikorik ez zegoenean, fotograma bakoitzaren marrazkiaren eta margoketaren bidez egiten ziren (animazioaren atzealdea, eszenatokia edo atzealdea barne), gero zinema-zinta gisa ezagutzen dugun horretan filmatzeko.

Gelditu mugimendua

Stop Motion marrazki bizidunekin zerikusirik ez duen animazio teknika bat da. Gainera, bere helburu nagusia errealitatean guztiz estatikoak diren objektuen mugimenduak simulatzea da eta bi fasetan banatzen da: buztinen edo buztinen mugimenduaren animazioa eta objektu zurrunen animazioa.

Pixelazioa

Pixelazioa Stop Motion-etik datorren teknika bat da eta ez panpinak ez modeloak, ohiko objektuak edo pertsonak baizik ez diren objektuak lantzean datza. Objektuak hainbat aldiz ateratzen dira eta apur bat mugitzen dira fotograma bakoitzean.

Errotoskopia

Beste marrazki baten zuzeneko marrazkian datza, hala nola marrazki baten trazadura beste marrazki batean edo pertsona erreal baten gainean. Mocaparen aitzindaritzat hartzen da, hau da, zinemaren munduan pertsonaia digitalak birsortzeko erabiltzen den motion capturearena.

Animazioa Cutouts edo Cut Out Animation

Figurak moztean datza teknika bat da, figura hauek paperean edo argazkietan irudikatu daitezke. Pertsonaien gorputza mozketetan oinarrituta eraikitzen da eta mugimendua eta animazioa ebakidura horien ordezkapenetik sortzen dira.

3D animazioa

3D animazioa editore-programa batetik sortzen da, eta horri esker simulazioak eta animazioak egin daitezke. Bi aldaera horien barruan, argiztapen ona, kameraren mugimenduak eta efektu bereziak jartzen dira harremanetan.

Gaur egun beste teknika batzuk ere badaude, hala nola: beiraren gaineko pintura, hondarraren animazioa, gujas pantaila eta zeluloidearen gaineko pintura. 

Zer da CSS?

Orain, animazioen munduari buruz apur bat gehiago ezagutzen duzunez, CSS akronimoen mundua ezagutzera emateko garaia da.

standak CSS, ikusi "kaskadako estilo-orriak". Diseinuaren sektorean eta web orrien aurkezpenean erabiltzen den lengoaia batek osatzen du, are hobeto, web orri bat lehen aldiz ikusten dugun moduan aurkezteaz arduratzen diren tresna eta komando batzuk dira. dagoeneko sortua da. Erremintarekin batera funtzionatzen du HTML (orrien oinarrizko edukietatik antolatuta).

Bere izena daukan hosto kopuruaren arabera zehazten da eta horietako batek besteengandik heredatzen ditu propietateak edo ezaugarriak. Hau da, blog txantiloi sinple batekin lan egin dezakezu, baina gune baten itxura pertsonalizatu nahi duzunean CSS ezarri beharko duzu CMS on batekin batera zure edukiaren irismena hobetzen lagunduko dizu.

Zertarako da CSS?

CSS-rekin zure orria antola dezakezu, hau da, zure web orrialdeari informazio guztia nola kokatu nahi duzun esan dezakezu, ikuslea maneiatzeko erraza eta aldi berean erabilgarria izan dadin. Hemen sartu web orriaren estiloaren edo diseinuaren parte diren elementu batzuen komando guztiak, adibidez, the letra-tipoak, koloreak, tamainak etab. 

Normalean, tresna hau zer den hobeto ulertzeko, marketin digitaleko espezialistak dira hori ulertzen lehenak, haiek baitira horiek maneiatzen dituztenak.

Animatu CSS-n

Bada, orain animazioen eta CSSen munduari buruz apur bat ezagutzen duzula. Tutoriala hasteko ordua da.

CSS animazioek CSS estilo baten eta bestearen arteko trantsizioa animatzeko aukera ematen dute. Animazio hauek bi osagai dituzte: a style CSS animazioa eta multzo bat deskribatzen dituena markoak hasierako eta amaierako egoera adierazten dutenak, baita tarteko puntu posibleak ere.

Animazio hauetako bakoitzak abantaila batzuk ditu:

• Bere erabilera oso erraza da animazio sinpleetarako, Javascript-en ezagutzarik izan gabe ere egin dezakezu.
• Animazioa behar bezala bistaratzen da, baita potentzia txikiko ordenagailuetan ere.
• Nabigatzaile batek kontrolatuta, bere errendimendua eta eraginkortasuna optimizatzeko aukera ematen du, horrela maiztasuna murrizten du eta fitxak ikusten ez diren moduan exekutatzen ditu.

Animazio ezarpenak

Animazio bat hasteko, lehenik eta behin konfiguratu beharko dugu. Horretarako, jabetzara joango gara animazioa eta bere azpi-propietateei. Tresna honek animazioaren erritmoa eta iraupena eta bere sekuentzia ere ez konfiguratzeko aukera emango digu.

Azpi-propietateak hauek dira:

animazioa - atzerapena

Elementua kargatzen den unetik animazio-sekuentziaren hasiera arteko atzerapen-denbora.

animazioa - zuzendaritza

Animazioak sekuentziaren amaieran hasierako fotogramara itzuli behar duen edo amaierara iristean hasieratik hasi behar duen adierazten du.

animazioa - iraupena

Animazioak bere zikloa amaitzeko zenbat denbora behar duen adierazten du (iraupena)

animazioa - iterazioa - zenbaketa

Errepikatzen den aldi kopurua. Adierazi dezakegu infinitua animazioa mugagabe errepikatzeko.

animazioa - izena

Animazioaren fotograma bakoitza deskribatzen duen izena zehazteko erabiltzen da.

animazioa - antzezlana - egoera

Animazio-sekuentzia pausatu eta berrekiteko aukera ematen dizu.

animazio - denbora-funtzioa

Animazioaren erritmoa adierazten du, hau da, nola erakusten diren animazio fotogramak, horretarako azelerazio-kurbak ezartzen dira.

animazioa - bete - modua

Animazioa amaitu ondoren propietateek zer balio izango dituzten zehazten du.

Konfiguratu sekuentzia fotogramekin

Behin ordua, nomenklatura eta abar konfiguratuta. Gure animazioari itxura bat eskaintzeko garaia da.

Horretarako, bi marko berri ezarriko ditugu eta araua erabiliko dugu @gako-fotogramak. Honekin, fotograma bakoitzak animazio-sekuentzian elementu bakoitza nola aurkitzen den deskribatzen du.

du adierazteko denbora eta erritmoa, markoak erabiltzen du ehunekoa eta tik eta noraHorri esker, hasiera noiz gertatzen den adierazi dezakegu %0arekin eta amaiera %100arekin.

Markoa eta testuaren animazioa

Fotograma gehiago gehitzeko eta testuarekin animatzeko, goiburuko letra-tipoaren tamaina handiagoa aplikatu behar duzu, goiburua handitu egin dadin denbora jakin batean mugitzen den heinean, eta gero jatorrizko tamainara jaitsi. Horretarako honako kode hau ezarriko dugu:

% 75 letra - tamaina: % 300; margn - ezkerra: % 25; zabalera: % 150;

Kode honekin, arakatzaileari iradokitzen diogu sekuentziaren % 75ean goiburuak % 25eko ezkerreko marjina duela eta % 200eko tamaina % 150eko zabalerarekin.

Animazio errepikapena

Animazio bat errepikatzeko, beharrezkoa da propietate hau erabiltzea animazioa - iterazioa - zenbaketa eta zenbat aldiz errepikatzea nahi dugun adierazi behar dugu. Guk ere erabil dezakegu infinitua beti errepika dadin.

Ondorioa

Ikusi duzuenez, CSSn animaziozko proiektuak sor ditzakezu eta eman dizkizugun pausoak jarraituz sartu zaitezke. Zure buruari galdetzen eta informatzen jarraitzen baduzu, aukera asko ditugula aurkituko duzu.

Ausartu zara jada?