Šliaužiančios linijos animacija. GIF animacija ir LED ekranų animacija

Sveiki, maketavimo ir interneto kalbų mėgėjai! Šiandien publikavimo tema pagrįstai yra: „Animacija HTML svetainei“. Animacijos šiais laikais gana populiarios ir pradedantiesiems kelia daugiausiai klausimų. Būtent todėl noriu paliesti šią temą ir pasakyti, kam reikalingi animaciniai elementai, kur jie dažniausiai naudojami ir kokios priemonės naudojamos.

Taip pat nusprendžiau parodyti konkrečių kodų pavyzdžius, įgyvendinančius populiarias ir paklausias užduotis. Perskaitę straipsnį iki galo, sužinosite, kaip pritaikyti tokius metodus kaip juosta ir krintantis sniegas. Dabar pereikime prie pagrindinės straipsnio dalies!

Animacija užvaldė pasaulį

Iš tiesų, daugumos žiniatinklio išteklių turinyje naudojami animuoti objektai. Ryškiausias pavyzdys yra internetinės parduotuvės, kur užvedus pelės žymeklį virš modelio ar gaminio, jie slenka.

Anksčiau animacijos vaidmenį atliko gif failai. Tačiau šiandien didžioji dalis judančių elementų atliekama naudojant pakopinius stiliaus lapus. Be to, yra daug bibliotekų, kurios supaprastina žiniatinklio kūrėjų darbą suteikdamos jiems paruoštus sprendimus.

Pavyzdžiui, Animate.css biblioteka. Biblioteką galima atsisiųsti ir prijungti prie programos kodo per < nuoroda>.

Tikeris

Galbūt kartais pastebėjote, kaip teksto turinys svetainėje juda horizontaliai arba vertikaliai, o gal net juda vaizdai. Tai atrodo šiek tiek sudėtinga, bet iš tikrųjų už tai atsakinga tik viena html kalbos žyma .

Norėčiau pastebėti, kad tai nėra naujas elementas ir nesusijęs su html5. Iš pradžių jis buvo sukurtas „Internet Explorer“, tačiau po kurio laiko jį pradėjo palaikyti kitos naršyklės.

Taigi, kaip sukurti žymėjimą? Tiesą sakant, jums tereikia įvesti reikiamą tekstą suporuotoje žymoje - ir jis „bėgs“. Kaip tiksliai jis judės – kitas reikalas.

Atributas apibūdinimas
elgesį Nurodo, kaip turinys perkeliamas:

Alternatyva– turinys juda tarp dviejų ribų, atsimušdamas nuo jų;

slinkti– objektas juda tarsi ratu (vienoje pusėje atsiranda, kitoje dingsta);

skaidrė– turinys eina iki galo ir sustoja.
kilpa Nustato, kiek kartų bus kartojamas aprašytos žymos turinys. Pavyzdžiui, -1 naudojamas kartoti neribotą laiką.
kryptis Nustato judėjimo kryptį:

žemyn– juda nuo viršutinio krašto žemyn;

paliko– iš dešiniojo krašto į kairę;

aukštyn– nuo ​​apatinės ribos iki viršutinės;

teisingai- iš kairės į dešinę.
scrollamount Nustato pikselių atstumą tarp dabartinės objekto padėties ir kito. Įtakoja judėjimo greitį. Iš pradžių lygus 6.
slinkties delsa Tai taip pat turi įtakos „darbo“ greičiui, tačiau atnaujinimo dažnio sąskaita. Nustato delsą milisekundėmis.

Dabar metas įgytas žinias išbandyti praktiškai. Į kodo dialogo langą įklijuokite toliau pateiktą programinės įrangos diegimą ir paleiskite jį naršyklėje.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Pavyzdys Džemperiai

Pavyzdys Džemperiai

Puslapyje buvo rodomos dvi animacijos: bėganti (tiksliau šokinėjanti) linija ir šuoliuojantis žirgas.

Artėjant žiemos mėnesiams, daugelis internetinių išteklių savininkų savo svetaines puošia eglių šakomis, šventiniais žaislais ar krentančiu sniegu. Mes nagrinėsime paskutinį punktą.

Snaiges galima sukurti įvairiais būdais. Vieni savo šablonus piešia skaidriame fone, kiti naudoja paruoštas medžiagas iš interneto, treti griebiasi CSS įrankių. Nusprendžiau prisijungti prie paskutinės grupės ir padirbėjau su stiliais.

Kaip jau supratote, šį kartą animacija bus kuriama išskirtinai įmontuotais kaskadinių stilių lapų mechanizmais, nors yra ir kitų sprendimų scenarijų. Be to, mes nenaudosime html, o naudosime tik standartinį žymėjimą.

Norėdami sukurti krintantį sniegą, turite naudoti šiuos įrankius:

nuosavybė animacija(kuri pasirodė css3 specifikacijoje) ir blokuoti @keyframes.

@keyframes padeda nustatyti tinklalapio elementų būseną tam tikru momentu ir taip priverčia juos judėti. raktinis žodis iš nustato pradinę objektų vietą ir žodį į– finalas.

Bendras skelbimo vaizdas: @keyframes pavadinimas (nuo (…)į (…))

Animacija yra padalintas į kelis parametrus, iš kurių 4 naudosime.

O dabar pavyzdys:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40



Ticker animacija paprastai naudojama gana dideliuose ekranuose. Taip yra dėl to, kad mažam ekranui sunku parinkti grafinę animaciją, kad ji atrodytų harmoningai ir neatitrauktų viso dėmesio. Tačiau teksto judėjimas naudojamas įvairiems ekrano dydžiams.

LED indikatorius gali būti spalvotas arba vienspalvis ir tai taip pat labai svarbu naudojant animaciją. Visų spalvų modeliuose jis gali būti naudojamas be apribojimų, tačiau vienspalviams ekranams būtina:

  • Taikyti animaciją, susidedančią iš vienos spalvos;
  • Atsižvelkite į dydžio santykį, kitaip animacija tiesiog susilies.

Vienspalvių ekranų animacinio žymeklio tekstas neturėtų būti pernelyg sudėtingas ir kupinas efektų. Atminkite, kad viskas bus padaryta ta pačia spalva ir gali susilieti į vieną ryškią vietą.

Patogus formatas keistis vaizdais: gif, dažniausiai naudojamas dirbant su ekranais. Šliaužiančios linijos GIF animacija gali būti vienos spalvos arba kelių spalvų ir turėti iki 256 spalvų.

LED ekrano rengyklėse GIF failus galima kurti tiek statinėje padėtyje, tiek lygiagrečiai judant:

  • Savas judėjimas įvaizdžiui;
  • Judėjimo per ekraną poveikis.

Šiuo atveju stulpelio animacija sukonfigūruojama naudojant specialias redaktoriaus programas ir turi būti sukurta naudojant specialius scenarijus. Galite atsisiųsti juos paruoštu formatu arba užsisakyti kūrimą savo įrenginiui.

Animacija šviesos diodams

Bet kokio vaizdo dizainas LED ekrane gali tapti įdomesnis, jei prie jo pridėsite judesio. Tačiau turėtumėte atskirti, kas yra animacija, skirta LED žymekliui, ir jos programinės įrangos efektus. Taigi, į nustatymų programą galite įkelti paruoštą animuotą tekstą ar vaizdą. Failoje bus nuoseklūs kadrai ir informacija apie kiekvieno iš jų rodymo laiką.

Yra du būdai animuoti žymeklį.

Pirmas būdas

Atidarykite vaizdą, kuris bus fonas (pavyzdys). Sukurkite naują sluoksnį. Naudodami įrankį „Stačiakampis plotas“ pasirinkite nedidelį stačiakampį, kuris veiks kaip laukas, kuriuo eis linija, ir užpildykite jį tam tikra spalva, o tai nesvarbu, nes matomumas iš jo bus pašalintas.

Sukurkite teksto sluoksnį.

Pridėkite sluoksnio kaukę prie teksto sluoksnio ir užpildykite juoda spalva. Užlipkite ant sluoksnio su stačiakampiu ir įkelkite pasirinktą sritį: skirtuką „Tab“. Uždėkite jį ant sluoksnio kaukės ir užpildykite pasirinktą sritį balta spalva.

Pašalinkite matomumą iš sluoksnio su stačiakampiu. Skirtuke „Langas“ pasirinkite „Laiko juosta“ ir sukurkite siužetinę schemą. Pirmajame kadre nustatome „Ciklo rodymo laiko pasirinkimas“ ir „Ciklo parametrų pasirinkimas“. Atsiekite teksto sluoksnį nuo sluoksnio kaukės. Perkelkite liniją į dešinę, kad ji dingtų iš akių. Taip bus sukurta stačiakampė sritis, kuri sluoksnio kaukėje paryškinta balta spalva. Kad linija judant būtų tame pačiame lygyje, turėtumėte įjungti „Pagalbinius elementus“: skirtuką „Rodinys“.

Antrame kadre liniją perkeliame į kairę, kad ji dingtų iš akių.

Siužetinėje juostoje laikykite nuspaudę klavišą Shift ir spustelėkite pirmąjį ir antrąjį kadrus. Spustelėkite piktogramą „Sukurti tarpinius kadrus“. Dialogo lange nustatykite tarpinių kadrų skaičių.

Gauname pirmąjį šliaužiančios linijos metodą.

Antras būdas

Sukurkite teksto sluoksnį, kuris bus statinis, bet imituojantis judesį.

Išjunkite visų sluoksnių, išskyrus teksto, matomumą. Padarykite teptuką iš teksto sluoksnio.

Stovime ant sluoksnio su vaizdu, naudodami įrankį „Stačiakampis plotas“ pasirinkite vaizdo dalį, kurioje bus imituojama šliaužianti linija. Nukopijuokite pasirinktą sritį ir įklijuokite.

Pridėkite sluoksnio kaukę prie sluoksnio su vaizdo fragmentu ir užpildykite jį juoda spalva. Sluoksnio kaukėje naudokite šepetėlį iš balto teksto sluoksnio, kad atskleistumėte sluoksnį. Virš sluoksnio su vaizdo fragmentu sukurkite naują sluoksnį ir nudažykite jį minkštu atitinkamos tamsios spalvos šepetėliu. Padarykite sluoksnį kirpimo kauke briedžio atžvilgiu su vaizdo fragmentu: laikydami nuspaudę klavišą Alt, spustelėkite sluoksnių lange sluoksnių kraštą.

Kuriame siužetinę lentelę. Pirmajame kadre perkelkite sluoksnį su juostele į dešinę.

Antrame kadre perkelkite sluoksnį su juostele į kairę.

Kuriame tarpinius kadrus.

Išsaugome animaciją ir gauname antrąjį metodą, imituojantį žymėjimą.



 

Gali būti naudinga perskaityti: