animazzjonijiet CSS

Hemm ħafna programmi fejn tista’ teditja, toħloq muntaġġi jew saħansitra toħloq animazzjonijiet, kull darba hemm ħafna softwares li jżidu dan it-tip ta 'proġetti interattivi. F'din il-kariga mhux biss ser nintroduċuk fid-dinja tal-animazzjonijiet, iżda se nintroduċuk ukoll ħabib ġdid.

Kif tafu sew, id-dinja tal-kompjuter hija sħiħa ta 'kmandi u għodod utli għall-iżvilupp ta' paġni tal-web jew midja onlajn, li bħalissa jeżistu flimkien. Oqgħod magħna u skopri f'dan it-tutorja ġdida mod ieħor kif iżżid il-livell tiegħek bl-informatika u l-interattività.

X'inhuma l-animazzjonijiet?

Irridu li tidħol bis-sħiħ fit-tutorja, iżda għal dan, huwa meħtieġ li tidħol fid-dinja tal-animazzjonijiet jew dak li għandu x'jaqsam mad-disinn grafiku, id-dinja tal- disinn interattiv. 

L-animazzjonijiet huma wkoll parti mid-dinja awdjoviżiva, fil-fatt ma jkunu xejn jekk jew għax fihom, jiddaħħlu awdjo u immaġni li tiċċaqlaq. Għal din ir-raġuni, meta nitkellmu dwar "animazzjoni", nirreferu għal dak li huwa popolarment magħruf bħala "cartoons".

Kif imqassar hawn fuq, l-animazzjoni toħroġ mill-abbiltà li tagħti moviment lil xi ħaġa, f'dan il-każ cartoons. Imma kif jinkisbu dawn il-movimenti kollha?Sewwa, bla dubju, dawn joħorġu minn dak li nsejħu, sekwenzi ta' tpinġijiet jew ritratti li billi jiġu ordnati konsekuttivament, wieħed wara l-ieħor, jirnexxielhom jiġġeneraw moviment kredibbli quddiem għajnejna, li jisilfu u jidħlu fil-logħba tal-illużjoni viżwali.

Preċedentement, l-ewwel animazzjonijiet kienu ddisinjati fuq folji tal-karta, f'kull wieħed minnhom, il-karattru animat kien imfassal waqt passi, u ladarba ntlaħaq it-tmiem tal-folja, kien għadda wieħed wieħed malajr biex jinkiseb l-effett tal-moviment fil- tpinġija.

Tipi ta' animazzjoni

Hemm tipi differenti ta 'animazzjoni:

Cartoons jew Animazzjoni Tradizzjonali

Dan l-istil jikkonsisti li jagħti moviment lill-protagonist qafas b’qafas. Fil-bidu, meta ma kienx hemm biżżejjed mezzi awdjoviżivi, dawn kienu jsiru permezz tat-tpinġija u l-pittura ta’ kull frame (inkluż l-isfond, il-palk jew l-isfond tal-animazzjoni), biex wara jiġu ffilmjati fuq dak li nafu bħala film tape.

Waqqaf il-moviment

Stop Motion hija teknika ta’ animazzjoni li m’għandha x’taqsam xejn mal-kartuns. Barra minn hekk, l-għan ewlieni tiegħu huwa li jissimula l-movimenti ta 'oġġetti li fir-realtà huma totalment statiċi u huwa maqsum f'żewġ fażijiet: animazzjoni ta' tafal jew tafal ċaqliq u animazzjoni ta 'oġġetti riġidi.

Pixelation

Pixelation hija teknika li ġejja minn Stop Motion u tikkonsisti f’ħidma ma’ oġġetti li la huma pupi u lanqas mudelli, iżda oġġetti jew nies komuni. L-oġġetti jiġu fotografati diversi drabi u jaqilbu ftit ma 'kull frejm.

Rotoskopija

Tikkonsisti fit-tpinġija diretta ta’ tpinġija oħra, bħat-traċċar ta’ tpinġija fuq tpinġija oħra jew ta’ persuna reali. Huwa meqjus bħala prekursur għall-mocap, jiġifieri, għall-qbid tal-moviment li jintuża biex jerġgħu jinħolqu karattri diġitali fid-dinja taċ-ċinema.

Animazzjoni minn Cutouts jew Cut out Animation

Hija teknika li tikkonsisti f'figuri tat-tqattigħ, dawn il-figuri jistgħu jkunu rappreżentati fuq il-karta jew fir-ritratti. Il-korp tal-karattri huwa mibni fuq il-bażi tal-qtugħ u l-moviment u l-animazzjoni joħorġu minn sostituzzjoni tal-qtugħ imsemmi.

Animazzjoni 3D

L-animazzjoni 3D toriġina minn programm editur, li jippermetti li jsiru simulazzjonijiet u animazzjonijiet. F'dawn iż-żewġ varjanti, jiġu f'kuntatt dawl tajjeb, movimenti tal-kamera u effetti speċjali.

Bħalissa hemm ukoll tekniki oħra bħal: il-pittura fuq il-ħġieġ, l-animazzjoni tar-ramel, l-iskrin tal-gujas u l-pittura fuq iċ-ċelluloid. 

X'inhu CSS?

Issa li taf ftit aktar dwar id-dinja tal-animazzjonijiet, wasal iż-żmien li nintroduċuk fid-dinja tal-akronimi CSS.

L-akronimu CSS, irreferi għal "folji ta 'stil ta' kaskata". Huwa magħmul minn lingwa li tintuża fis-settur tad-disinn u fil-preżentazzjoni tal-paġni tal-web, saħansitra aħjar, huma sensiela ta’ għodod u kmandi li huma inkarigati li jippreżentaw paġna web kif narawha għall-ewwel darba. ladarba tkun diġà nħolqot. Jaħdem flimkien mal-għodda HTML (organizzata mill-kontenut bażi tal-paġni).

Ismu huwa determinat min-numru ta 'folji li fih u waħda minnhom tirret proprjetajiet jew karatteristiċi minn oħrajn. Jiġifieri, tista 'taħdem b'mudell ta' blog sempliċi, iżda meta trid tippersonalizza d-dehra ta 'sit ser ikollok bżonn timplimenta CSS li flimkien ma' CMS tajjeb jgħinek ittejjeb il-firxa tal-kontenut tiegħek.

Għal xiex inhu CSS?

Bis-CSS, tista 'torganizza l-paġna tiegħek, jiġifieri, tista' tgħid lill-paġna web tiegħek kif trid issib l-informazzjoni kollha sabiex it-telespettatur ikun faċli biex jimmaniġġa u utli fl-istess ħin. Hawnhekk daħħal il-kmandi kollha ta 'xi elementi li huma parti mill-istil jew id-disinn tal-paġna web, pereżempju, il- fonts, kuluri, daqsijiet eċċ. 

Normalment, sabiex tifhem aħjar x'inhi din l-għodda, l-ispeċjalisti tal-marketing diġitali huma l-ewwel li jifhmu dwar dan peress li huma huma li jimmaniġġjawhom.

Anima f'CSS

Ukoll, issa li taf ftit dwar id-dinja ta 'animazzjonijiet u CSS. Issa huwa ż-żmien li tibda t-tutorja.

L-animazzjonijiet CSS jippermettulek tanima t-tranżizzjoni bejn stil CSS wieħed u ieħor. Dawn l-animazzjonijiet jikkonsistu f'żewġ komponenti: a stil li jiddeskrivi animazzjoni CSS u sett ta frejms li jindikaw l-istat inizjali u finali tiegħu, kif ukoll punti intermedji possibbli fiha.

Kull waħda minn dawn l-animazzjonijiet għandha serje ta 'vantaġġi:

• L-użu tiegħu huwa faċli ħafna għal animazzjonijiet sempliċi, tista 'tagħmel dan anki mingħajr ma jkollok għarfien ta' Javascript.
• L-animazzjoni tidher b'mod korrett, anke fuq kompjuters b'enerġija baxxa.
• Li tkun ikkontrollata minn browser, tippermetti li tottimizza l-prestazzjoni u l-effiċjenza tagħha, u b'hekk tnaqqas il-frekwenza u tesegwixxi t-tabs b'tali mod li ma jkunux viżibbli.

Settings ta' animazzjoni

Biex tibda animazzjoni, l-ewwelnett ikollna nikkonfiguraha. Biex tagħmel dan, aħna se mmorru fil-proprjetà animazzjoni u s-sub-propjetajiet tagħha. Din l-għodda se tippermettilna nikkonfiguraw kemm ir-ritmu kif ukoll it-tul tal-animazzjoni u lanqas is-sekwenza tagħha.

Is-sub-proprjetajiet huma:

animazzjoni - dewmien

Ħin ta 'dewmien bejn il-mument li l-element jitgħabba u l-bidu tas-sekwenza ta' animazzjoni.

animazzjoni - direzzjoni

Tindika jekk l-animazzjoni għandhiex terġa' lura għall-qafas tal-bidu fl-aħħar tas-sekwenza jew jekk għandhiex tibda mill-bidu fl-aħħar.

animazzjoni - tul

Jindika l-ammont ta' ħin li l-animazzjoni tieħu biex tlesti ċ-ċiklu tagħha (it-tul)

animazzjoni - iterazzjoni - għadd

In-numru ta' drabi li jiġi ripetut. Nistgħu nindikaw infinita biex tirrepeti l-animazzjoni indefinittivament.

animazzjoni - isem

Jintuża biex jispeċifika l-isem li jiddeskrivi kull wieħed mill-frejms tal-animazzjoni.

animazzjoni - play - stat

Jippermettilek li tkun tista 'tieqaf u terġa' tibda s-sekwenza ta 'animazzjoni.

animazzjoni - timing- funzjoni

Tindika r-ritmu tal-animazzjoni, jiġifieri kif jintwerew il-frejms tal-animazzjoni, għal dan, il-kurvi tal-aċċelerazzjoni huma stabbiliti.

animazzjoni - imla - mod

Jispeċifika liema valuri se jkollhom il-proprjetajiet wara li tispiċċa l-animazzjoni.

Waħħal is-sekwenza b'frejms

Ladarba nkunu kkonfigurajna l-ħin, in-nomenklatura eċċ. Wasal iż-żmien li noffru dehra jew sensazzjoni lill-animazzjoni tagħna.

Biex tagħmel dan, aħna se nistabbilixxu żewġ frames ġodda u nużaw ir-regola @ keyframes. Ma 'dan, kull frame jiddeskrivi kif kull element jinstab matul is-sekwenza ta' animazzjoni.

Biex tindika l- ħin u ritmu, il-qafas juża persentaġġ u ma ' minn u lejnGrazzi għal dan, nistgħu nindikaw meta jsir il-bidu b'0% u t-tmiem b'100%.

Animazzjoni qafas u test

Biex iżżid aktar frejms u tanimahom bit-test, għandek bżonn tapplika daqs akbar tat-tipa tal-header sabiex l-header jiżdied hekk kif jiċċaqlaq għal ammont ta 'żmien stabbilit, u mbagħad jonqos għad-daqs oriġinali tiegħu wara. Għal dan se nistabbilixxu l-kodiċi li ġej:

75% font - daqs: 300%; margn - xellug: 25%; wisa ': 150%;

B'dan il-kodiċi, nissuġġerixxu lill-browser li f'75% tas-sekwenza, l-header għandu marġini tax-xellug ta '25% u daqs ta' 200% b'wisa 'ta' 150%.

Irrepeti animazzjoni

Biex tagħmel animazzjoni ripetuta, għandek bżonn tuża l-proprjetà li ġejja animazzjoni - iterazzjoni - għadd u rridu nindikaw kemm-il darba rridu li tiġi ripetuta. Nistgħu nużaw ukoll infinita sabiex ikun dejjem ripetut.

Konklużjoni

Kif rajt, fis-CSS tista’ toħloq proġetti animati u tista’ tidħol fiha billi ssegwi l-passi li tajniek. Jekk tkompli tistaqsi u tinforma lilek innifsek, tiskopri li hemm ħafna għażliet disponibbli għalina.

Diġà azzardart?