CSS mifananidzo

Kune akawanda mapurogiramu kwaunogona kugadzirisa, kugadzira montages kana kunyange kugadzira mifananidzo, pese paine akawanda softwares anowedzera iyi mhando yemapurojekiti anodyidzana. Mune ino post hatisi kuzongokuzivisa iwe kune iyo nyika yemifananidzo, asi isu tiri kuzokuzivisa iwe kushamwari itsva.

Sezvaunonyatsoziva, nyika yekombuta izere nemirairo uye maturusi anobatsira ekuvandudza mapeji ewebhu kana online media, izvo zvinogara pamwe chete. Gara nesu uye uwane mune ino dzidzo itsva imwe nzira yekuwedzera nhanho yako nekombuta uye nekudyidzana.

Chii chinonzi animations?

Tinoda kuti iwe upinde zvizere muchidzidzo, asi kune izvi, zvakakosha kuti upinde munyika yemifananidzo kana izvo zviri mugraphic dhizaini zvine chekuita, nyika ye interactive design. 

Mifananidzo iriwo chikamu chenyika yeaudiovisual, kutaura zvazviri vangave vasina kana kana nekuti mavari, odhiyo uye mufananidzo unofamba zvinounzwa. Nechikonzero ichi, kana tichitaura nezve "animation", tinoreva izvo zvinozivikanwa zvikuru se "makatuni."

Sezvakapfupikiswa pamusoro, animation inomuka kubva pakukwanisa kupa kufamba kune chimwe chinhu, mune iyi nyaya katuni. Asi mafambiro ese aya anowanikwa sei?Zvakanaka, pasina kupokana, anobva pane zvatinodaidza kuti, kutevedzana kwemifananidzo kana mifananidzo kuti kuburikidza nekuraira zvakatevedzana, imwe mushure meimwe, ivo vanokwanisa kugadzira kufamba kunovimbika pamberi pemeso edu, izvo zvinokweretesa ivo pachavo uye kupinda mumutambo wekuona nhema.

Kare, iwo ekutanga animations akagadzirwa pamapepa, mune rimwe nerimwe rawo, hunhu hwehupenyu hwakakweverwa achitora matanho, uye kana magumo epepa asvika, aipfuudzwa mumwe nemumwe nekukurumidza kuti awane mhedzisiro yekufamba mukati. drawing.

Animation types

Kune marudzi akasiyana eanimation:

Cartoon kana Traditional Animation

Ichi chimiro chine kupa mafambiro kune protagonist furemu nefuremu. Pakutanga, pakanga pasina nzira dzekuteerera dzakakwana, dzaiitwa kuburikidza nekudhirowa uye kupenda kwefuremu yega yega (kusanganisira kumashure, nhanho kana kumashure kweiyo animation), kuti itorerwe gare gare pane zvatinoziva setepi yefirimu.

Misa Motion

Stop Motion inzira yekupopotera isina chekuita nemakatuni. Uyezve, chinangwa chayo chikuru ndechekutevedzera mafambiro ezvinhu izvo muchokwadi zvakamira uye zvakakamurwa kuita zvikamu zviviri: animation yevhu kana claymotion uye animation yezvinhu zvakaomarara.

Pixelation

Pixelation inyanzvi inobva kuStop Motion uye inosanganisira kushanda nezvinhu zvisiri zvidhori kana modhi, asi zvinhu zvakajairika kana vanhu. Zvinhu zvinotorwa mifananidzo kakawanda uye chinja zvishoma nefuremu yega yega.

Rotoscopy

Inosanganisira kudhirowa kwakananga kwemumwe mufananidzo, sekutevedzwa kwechimwe chidhirowa kana kuti chemunhu chaiye. Inoonekwa seyakatangira mocap, ndiko kuti, kufambisa kubatwa kunoshandiswa kudzoreredza mavara edhijitari munyika yecinema.

Animation by Cutouts kana Cheka Animation

Iyo inyanzvi inosanganisira yekucheka manhamba, manhamba aya anogona kumiririrwa pamapepa kana mumifananidzo. Muviri wemavara wakavakwa zvichibva pakucheka uye kufamba uye animation inosimuka kubva pakutsiva yakataurwa cutouts.

3d animation

3D animation inotangira pachirongwa chemupepeti, chinobvumira kuti simulations uye mifananidzo iitwe. Mukati meiyi maviri akasiyana, kupenya kwakanaka, kufamba kwekamera uye yakakosha mhedzisiro zvinosangana.

Parizvino panewo mamwe matekiniki akadai se: pendi pagirazi, animation yejecha, chidzitiro chegujas uye pendi pa celluloid. 

Chii chinonzi CSS?

Zvino zvawava kuziva zvishoma nezve nyika yemaanimation, yave nguva yekuti tikuzivise kune nyika yeCSS acronyms.

Acronym CSS, kureva "cascading style sheets". Inoumbwa nemutauro unoshandiswa muchikamu chekugadzira uye mukuratidzwa kwemapeji ewebhu, kunyange zviri nani, iwo akatevedzana ezvishandiso uye mirairo iyo inotarisira kuburitsa peji rewebhu sezvatinoiona kekutanga. kana yatosikwa. Inoshanda pamwe chete nechishandiso HTML (yakarongwa kubva pahwaro hwemukati yemapeji).

Zita rayo rinotemerwa nehuwandu hwemashiti arimo uye rimwe rawo rinogara nhaka zvivakwa kana hunhu kubva kune vamwe. Ndiko kuti, iwe unogona kushanda neyakapfava blog template, asi kana iwe uchida kugadzirisa kutaridzika kwesaiti iwe uchafanirwa kuita CSS iyo pamwe chete neCMS yakanaka ichakubatsira iwe kuwedzera kusvika kwezviri mukati mako.

Chii chinonzi CSS?

NeCSS, unogona kuronga peji rako, kureva kuti, unogona kuudza peji rako rewebhu kuti unoda kuwana sei ruzivo rwese kuitira kuti muoni ave nyore kubata uye anobatsira panguva imwe chete. Pano isa mirairo yese yezvimwe zvinhu zviri chikamu chemaitiro kana magadzirirwo ewebhu peji, semuenzaniso, iyo mafonti, mavara, saizi nezvimwe. 

Kazhinji, kuti unzwisise zviri nani kuti chishandiso ichi chii, nyanzvi dzekushambadzira dzedhijitari ndivo vekutanga kunzwisisa nezve izvi sezvo vari ivo vanozvibata.

Hupenyu muCSS

Zvakanaka, ikozvino zvaunoziva zvishoma nezve nyika yemifananidzo uye CSS. Ino ndiyo nguva yekutanga tutorial.

CSS animations inokutendera kuti upe hupenyu hwekuchinja pakati peimwe CSS maitiro uye imwe. Aya maanimation ane zvikamu zviviri: a style iyo inotsanangura CSS animation uye seti ye mafuremu izvo zvinoratidza chimiro chayo chekutanga uye chekupedzisira, pamwe nemapoinzi anobvira epakati mairi.

Imwe neimwe yeaya animation ine nhevedzano yezvakanakira:

• Kushandiswa kwayo kuri nyore kwazvo kune akareruka animations, unogona kuzviita kunyangwe usina ruzivo rweJavascript.
• Animation inoratidzwa nemazvo, kunyangwe pamakomputa ane simba shoma.
• Kudzorwa nebrowser, inobvumira kukwenenzvera kuita kwayo uye kugona kwayo, nekudaro kuderedza kuwanda uye kuita ma tabo nenzira yekuti ivo vasaonekwe.

Animation settings

Kuti utange animation, chekutanga pane zvese tichafanirwa kuigadzira. Kuti tiite izvi, tichaenda kune pfuma kuchangamuka uye kune yayo sub-zvivakwa. Ichi chishandiso chinotitendera kugadzirisa zvese zviri zviviri rhythm uye nguva yeanimation uye kwete kutevedzana kwayo.

Iwo ma sub-properties ndeaya:

animation - kunonoka

Kunonoka nguva pakati penguva iyo chinhu charemerwa uye kutanga kwekutevedzana kweanimation.

animation - nzira

Inoratidza kuti animation inofanira kudzokera kune yekutanga furemu panoperera nhevedzano here kana kuti inofanira kutanga kubva kwekutanga kana yasvika kumagumo.

animation - duration

Inoratidza huwandu hwenguva iyo animation inotora kuti ipedze kutenderera kwayo (nguva)

animation - iteration - count

Nhamba yenguva inodzokororwa. Tinogona kuratidza risingaperi kudzokorora animation nekusingaperi.

animation - zita

Inoshandiswa kudoma zita rinotsanangura imwe neimwe yemafuremu eanimation.

animation - play - state

Inokutendera kuti ugone kumbomira uye kutangisa kutevedzana kweanimation.

animation - nguva- basa

Inoratidza rhythm yeiyo animation, kureva, maratidziro emafuremu epopopu, nekuda kweizvi, macurves ekumhanyisa anotangwa.

animation - zadza - modhi

Inotsanangura izvo zvimiro zvichave nazvo mushure mekupera kweanimation.

Gadzirisa kutevedzana nemafuremu

Kana isu tagadzirisa nguva, iyo nomenclature nezvimwe. Yave nguva yekupa kutarisa kana kunzwa kune yedu animation.

Kuti tiite izvi, tichagadzira mapuranga maviri matsva uye shandisa mutemo @keyframes. Neizvi, furemu yega yega inotsanangura kuti chinhu chimwe nechimwe chinowanikwa sei panguva yekutevedzana kweanimation.

Kuratidza the nguva uye rhythm, furemu inoshandisa percentage and with kubva uye kuendaNekuda kweizvi, tinogona kuratidza kana kutanga kunoitika ne0% uye kupera ne100%.

Frame uye mavara animation

Kuti uwedzere mamwe mafuremu uye nekuararamisa nemavara, unofanirwa kuisa saizi yakakura yemusoro wefonti kuitira kuti musoro uwedzere apo unofamba kwenguva yakatarwa, uye wozodzikira kuhukuru hwayo hwepakutanga mushure. Nokuda kweizvi tichagadzira kodhi inotevera:

75% font - saizi: 300%; margn - kuruboshwe: 25%; hupamhi: 150%;

Nekodhi iyi, tinokurudzira kubhurawuza kuti mu75% yekutevedzana, musoro une kuruboshwe rwe25% uye saizi ye200% nehupamhi hwe150%.

Animation repeat

Kuita animation idzokorore, unofanirwa kushandisa chivakwa chinotevera animation - iteration - count uye tinofanira kuratidza kuti tinoda kuti idzokororwe kangani. Tinogonawo kushandisa risingaperi kuitira kuti igare ichidzokororwa.

Mhedziso

Sezvawaona, muCSS unogona kugadzira mapurojekiti ane hupenyu uye unogona kupinda nawo nekutevera matanho atakakupa. Kana iwe ukaramba uchibvunza nekuzvizivisa iwe pachako, iwe uchaona kuti kune akawanda sarudzo anowanikwa kwatiri.

Watozvishingisa here?