CSS rayarwa

Css gabatarwa

Source: Shirin Yanar Gizo

Akwai shirye-shirye da yawa inda zaku iya gyarawa, ƙirƙirar montages ko ma ƙirƙira raye-raye, duk lokacin da akwai software da yawa da ke ƙara irin wannan nau'in ayyukan hulɗa. A cikin wannan sakon ba kawai za mu gabatar muku da duniyar rayarwa ba, amma kuma za mu gabatar muku da sabon aboki.

Kamar yadda kuka sani, duniyar kwamfuta tana cike da umarni da kayan aiki masu amfani don haɓaka shafukan yanar gizo ko kafofin watsa labarai na kan layi, waɗanda suke tare a halin yanzu. Kasance tare da mu kuma gano a cikin wannan sabuwar koyawa wata hanya don haɓaka matakin ku tare da kwamfuta da mu'amala.

Menene rayarwa?

Duniya na rayarwa

Source: Duk yan wasa

Muna son ku shigar da cikakken koyawa, amma saboda wannan, dole ne ku shiga duniyar raye-raye ko abin da ke cikin zane mai hoto, duniyar duniyar. m zane. 

Animations suma wani bangare ne na duniyar gani da sauti, hasali ma ba za su zama komi ba idan ko a cikinsu an gabatar da sauti da hoto mai motsi. Don haka, idan muka yi maganar “animation”, muna nufin abin da aka fi sani da “cartoons”.

Kamar yadda aka taƙaita a sama, rayarwa yana tasowa daga ikon ba da motsi zuwa wani abu, a cikin wannan yanayin zane-zane. To amma ta yaya ake samun nasarar duk waɗannan ƙungiyoyin? jerin zane ko hotuna cewa ta hanyar ba da umarni a jere, daya bayan daya, sun sami damar samar da ingantaccen motsi a gaban idanunmu, wanda ke ba da kansu da shiga cikin wasan kwaikwayo na gani.

A da, an tsara raye-rayen farko a kan zanen takarda, a cikin kowane ɗayansu, an zana halayen mai rai yana ɗaukar matakai, kuma da zarar an kai ƙarshen takardar, an wuce ɗaya bayan ɗaya da sauri don cimma tasirin motsi a cikin. zane.

Nau'in rayarwa

Akwai nau'ikan rayarwa daban-daban:

Cartoon ko raye-rayen gargajiya

Wannan salon ya ƙunshi ba da motsi zuwa firam ɗin jarumai ta firam. Da farko, lokacin da babu isassun hanyoyin gani na sauti, ana aiwatar da su ta hanyar zane da zanen kowane firam (ciki har da bango, mataki ko bangon wasan kwaikwayo), daga baya a yi fim ɗin akan abin da muka sani a matsayin kaset na fim.

Dakatar da motsi

Stop Motion fasaha ce mai motsi wacce ba ta da alaƙa da zane mai ban dariya. Bugu da ƙari, babban manufarsa ita ce ta kwaikwayi motsin abubuwa waɗanda a haƙiƙanin gaskiya ba su da tushe kuma ya kasu kashi biyu: motsin rai na yumbu ko yumbu da motsin abubuwa masu ƙarfi.

Pixelation

Pixelation wata dabara ce da ta zo daga Stop Motion kuma ta ƙunshi aiki da abubuwa waɗanda ba ƴan tsana ba ko samfuri, amma abubuwa gama gari ko mutane. Abubuwa ana ɗaukar hoto sau da yawa kuma suna matsawa kaɗan tare da kowane firam.

Rotoscopy

Ya ƙunshi zana wani zane kai tsaye, kamar bin diddigin zane akan wani zane ko na ainihin mutum. Ana la'akari da shi azaman mafari ga mocap, wato, ɗaukar motsi wanda ake amfani da shi don sake ƙirƙirar haruffan dijital a cikin duniyar silima.

Animation ta Cutouts ko Yanke Animation

Wata dabara ce da ta ƙunshi yankan ƙididdiga, waɗannan ƙididdiga za a iya wakilta a kan takarda ko a cikin hotuna. An gina jikin haruffa bisa ga yankewa kuma motsi da motsin rai suna tasowa daga maye gurbin da aka ce cutouts.

3d animation

3D rayarwa ya samo asali daga shirin edita, wanda ke ba da damar yin kwaikwayo da raye-raye. A cikin waɗannan bambance-bambancen guda biyu, haske mai kyau, motsi kamara da tasiri na musamman suna shiga cikin hulɗa.

A halin yanzu akwai kuma wasu dabaru kamar: zanen a kan gilashi, wasan kwaikwayo na yashi, allon gujas da zane a kan celluloid. 

Menene CSS?

Css interface na shirin

Source: Gidan Yanar Gizo Rosario Zama Studio

Yanzu da kun san ɗan ƙarin bayani game da duniyar rayarwa, lokaci ya yi da za mu gabatar muku da duniyar gajarta ta CSS.

Acronym CSS, koma zuwa "cascading style sheets". An kafa shi ta hanyar harshen da ake amfani da shi a cikin sassan zane da kuma gabatar da shafukan yanar gizon, har ma mafi kyau, su ne jerin kayan aiki da umarni waɗanda ke da alhakin gabatar da shafin yanar gizon kamar yadda muka gani a karon farko sau ɗaya. an riga an halicce shi. Yana aiki tare da kayan aiki HTML (shirya daga tushen abubuwan da ke cikin shafukan).

Ana ƙididdige sunansa da adadin zanen gadon da ke cikinsa kuma ɗayansu ya gaji kadarori ko halaye daga wasu. Wato, zaku iya aiki tare da samfurin bulogi mai sauƙi, amma lokacin da kuke son tsara kamannin rukunin yanar gizon kuna buƙatar aiwatar da CSS wanda tare da ingantaccen CMS zai taimaka muku haɓaka isar abubuwan ku.

Menene CSS don?

Tare da CSS, za ku iya tsara shafinku, wato, za ku iya gaya wa shafin yanar gizon ku yadda kuke son gano duk bayanan don mai kallo ya kasance da sauƙin sarrafawa da amfani a lokaci guda. Anan shigar da duk umarnin wasu abubuwa waɗanda ke cikin salo ko ƙirar shafin yanar gizon, misali, fonts, launuka, girma da sauransu. 

A al'ada, don ku fi fahimtar abin da wannan kayan aiki yake game da shi, ƙwararrun tallace-tallace na dijital sune farkon waɗanda suka fara fahimta game da wannan tunda su ne ke sarrafa su.

Mai rai a cikin CSS

To, yanzu da kun san kaɗan game da duniyar rayarwa da CSS. Yanzu ne lokacin da za a fara koyawa.

raye-rayen CSS suna ba ku damar raye-rayen canji tsakanin salon CSS ɗaya da wani. Waɗannan raye-rayen sun ƙunshi sassa biyu: a style wanda ke bayanin CSS animation da saitin firam wanda ke nuni da matsayinsa na farko da na ƙarshe, da kuma yiwuwar matsakaicin maki a cikinsa.

Kowane ɗayan waɗannan raye-rayen yana da jerin fa'idodi:

  • Amfani da shi yana da sauƙin gaske don raye-raye masu sauƙi, kuna iya yin shi ko da ba tare da sanin Javascript ba.
  • Animation yana nunawa daidai, har ma akan kwamfutoci marasa ƙarfi.
  • Kasancewar mai bincike yana sarrafa shi, yana ba da damar inganta ayyukansa da ingancinsa, don haka rage mita da aiwatar da shafuka ta hanyar da ba a iya gani.

Saitunan rayarwa

Don fara wasan kwaikwayo, da farko dole ne mu daidaita shi. Don yin wannan, za mu je zuwa kayan animation da sub-Properties. Wannan kayan aiki zai ba mu damar daidaita duka rhythm da tsawon lokacin motsin rai kuma ba ma jerin sa ba.

Karamar kadara su ne:

rayarwa - jinkiri

Lokacin jinkiri tsakanin lokacin da aka ɗora kayan aikin da farkon jerin raɗaɗi.

rayarwa - shugabanci

Yana nuna ko motsin motsin ya kamata ya koma wurin farawa a ƙarshen jerin ko kuma ya kamata ya fara daga farkon lokacin da ya kai ƙarshe.

rayarwa - duration

Yana Nuna adadin lokacin da rayarwa ke ɗauka don kammala zagayowar sa (lokacin)

rayarwa - iteration - ƙidaya

Yawan lokuta ana maimaita shi. Za mu iya nuna iyaka don maimaita motsin rai har abada.

rayarwa - suna

Ana amfani da shi don tantance sunan da ke bayyana kowane firam ɗin motsin rai.

rayarwa - wasa - jihar

Yana ba ku damar iya dakatarwa da ci gaba da jerin abubuwan raɗaɗi.

rayarwa - lokaci- aiki

Yana nuna yanayin motsin rai, wato, yadda ake nuna firam ɗin motsin rai, don wannan, an kafa masu lanƙwasa hanzari.

rayarwa - cika - yanayin

Yana ƙayyadad da abin da ƙimar kaddarorin za su kasance da su bayan ƙarewar motsin rai.

Saita jeri tare da firam

Da zarar mun saita lokaci, nomenclature da dai sauransu. Lokaci ya yi da za mu ba da kallo ko ji ga raye-rayen mu.

Don yin wannan, za mu kafa sababbin firam guda biyu kuma za mu yi amfani da ƙa'idar @bbchausa. Tare da wannan, kowane firam yana bayyana yadda ake samun kowane nau'i yayin jerin rayayye.

Don nuna lokaci da kari, firam ɗin yana amfani yawan da tare da daga kuma zuwaGodiya ga wannan, zamu iya nuna lokacin da farkon ya faru tare da 0% kuma ƙarshen tare da 100%.

Frame da motsin rubutu

Don ƙara ƙarin firam ɗin da rayar da su da rubutu, kuna buƙatar yin amfani da girman girman font ɗin taken ta yadda rubutun ya ƙaru yayin da yake motsawa na adadin lokaci, sannan ya ragu zuwa ainihin girman sa daga baya. Domin wannan za mu kafa code mai zuwa:

75% font - girman: 300%; gefe - hagu: 25%; nisa: 150%;

Tare da wannan lambar, muna ba da shawarar mai binciken cewa a cikin 75% na jerin, taken yana da gefen hagu na 25% da girman 200% tare da faɗin 150%.

Maimaita motsin rai

Don yin maimaita motsin rai, kuna buƙatar amfani da dukiya mai zuwa rayarwa - iteration - ƙidaya kuma dole ne mu nuna sau nawa muke son a maimaita. Za mu iya kuma amfani iyaka ta yadda a kullum ake maimaitawa.

ƙarshe

Kamar yadda kuka gani, a cikin CSS za ku iya ƙirƙirar ayyuka masu rai kuma kuna iya shigar da su ta bin matakan da muka ba ku. Idan kuka ci gaba da tambaya da sanar da kanku, za ku gane cewa akwai zaɓuɓɓuka da yawa da ke akwai a gare mu.

Kun riga kun kuskura?


Bar tsokaci

Your email address ba za a buga. Bukata filayen suna alama da *

*

*

  1. Wanda ke da alhakin bayanan: Miguel Ángel Gatón
  2. Manufar bayanan: Sarrafa SPAM, sarrafa sharhi.
  3. Halacci: Yarda da yarda
  4. Sadarwar bayanan: Ba za a sanar da wasu bayanan ga wasu kamfanoni ba sai ta hanyar wajibcin doka.
  5. Ajiye bayanai: Bayanin yanar gizo wanda Occentus Networks (EU) suka dauki nauyi
  6. Hakkoki: A kowane lokaci zaka iyakance, dawo da share bayanan ka.