Ložņu līniju animācija. Animācija svārsta GIF un LED displeju animācija

Sveiki, izkārtojuma un tīmekļa valodu cienītāji! Šodienas publikācijas tēma ir pamatoti: “Animācija HTML vietnei”. Animācijas mūsdienās ir diezgan populāras un rada visvairāk jautājumu iesācēju vidū. Tāpēc es vēlos pieskarties šai tēmai un pastāstīt, kādiem animācijas elementiem ir nepieciešami, kur tie tiek izmantoti visbiežāk un kādi rīki tiek izmantoti.

Es arī nolēmu parādīt konkrētus kodu piemērus, īstenojot populārus un pieprasītus uzdevumus. Izlasot rakstu līdz galam, jūs uzzināsit, kā ieviest tādus paņēmienus kā līmlente un krītošs sniegs. Tagad pāriesim pie raksta galvenās daļas!

Animācija ir sagrābusi pasauli

Patiešām, lielākā daļa tīmekļa resursu saturā izmanto animētus objektus. Visspilgtākais piemērs ir tiešsaistes veikali, kur, virzot kursoru virs modeļa vai produkta, tie ritina.

Iepriekš animācijas lomu spēlēja gif faili. Tomēr mūsdienās lielākā daļa kustīgo elementu tiek veikti, izmantojot kaskādes stila lapas. Turklāt ir daudzas bibliotēkas, kas vienkāršo tīmekļa izstrādātāju darbu, nodrošinot viņiem gatavus risinājumus.

Piemēram, Animate.css bibliotēka. Bibliotēku var lejupielādēt un pēc tam savienot ar programmas kodu, izmantojot < saite>.

Atzīme

Iespējams, dažkārt esat pamanījis, kā teksta saturs vietnē pārvietojas horizontāli vai vertikāli vai pat attēli. Tas izskatās sarežģīti, taču patiesībā par to ir atbildīgs tikai viens html valodas tags .

Vēlos atzīmēt, ka šis nav jauns elements un neattiecas uz html5. Sākotnēji tas tika izveidots pārlūkprogrammai Internet Explorer, taču pēc kāda laika to sāka atbalstīt arī citas pārlūkprogrammas.

Tātad, kā izveidot atzīmi? Patiesībā jums vienkārši jāievada vajadzīgais teksts pārī savienotajā tagā - un viņš "aizbēgs". Kā tieši viņš pārvietosies, tas ir cits jautājums.

Atribūts Apraksts
uzvedība Norāda, kā saturs tiek pārvietots:

aizstājējs– saturs pārvietojas starp divām robežām, atlecot no tām;

ritiniet– objekts pārvietojas it kā pa apli (parādās vienā pusē, pazūd otrā);

slidkalniņš– saturs iet līdz galam un apstājas.
cilpa Nosaka, cik reizes tiks atkārtots aprakstītā taga saturs. Piemēram, -1 tiek izmantots, lai atkārtotu bezgalīgi.
virziens Iestata kustības virzienu:

uz leju– pārvietojas no augšējās malas uz leju;

pa kreisi– no labās malas uz kreiso;

uz augšu– no apakšējās robežas līdz augšējai;

pa labi- no kreisās puses uz labo.
scrollmount Iestata pikseļu attālumu starp pašreizējo objekta pozīciju un nākamo. Ietekmē kustības ātrumu. Sākotnēji vienāds ar 6.
ritināšanas aizkave Tas ietekmē arī “darba” ātrumu, bet uz atjaunināšanas biežuma rēķina. Iestata aizkavi milisekundēs.

Tagad laiks apgūtās zināšanas izmēģināt praksē. Koda dialoglodziņā ielīmējiet tālāk norādīto programmatūras ieviešanu un palaidiet to pārlūkprogrammā.

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

Piemērs Džemperi

Lapā tika parādītas divas animācijas: skrienoša (vai drīzāk lecošā) līnija un lēcošais zirgs.

Tuvojoties ziemas mēnešiem, daudzi tiešsaistes resursu īpašnieki rotā savas vietnes ar egļu zariem, svētku rotaļlietām vai krītošu sniegu. Mēs izskatīsim pēdējo punktu.

Sniegpārslas iespējams veidot dažādos veidos. Daži zīmē savas veidnes uz caurspīdīga fona, citi izmanto gatavus materiālus no interneta, bet citi izmanto CSS rīkus. Es nolēmu pievienoties pēdējai grupai un piestrādāju pie stiliem.

Kā jau nopratāt, šoreiz animāciju veidos tikai un vienīgi kaskādes stila lapu iebūvētie mehānismi, lai gan ir arī citi risinājumu skripti. Tāpat mēs neizmantosim html, bet izmantosim tikai standarta marķējumu.

Lai izveidotu krītošu sniegu, jums jāizmanto šādi rīki:

īpašums animācija(kas parādījās css3 specifikācijā) un bloku @keyframes.

@keyframes palīdz noteikt tīmekļa lapas elementu stāvokli noteiktā laika posmā un tādējādi liek tiem pārvietoties. Atslēgvārds no iestata objektu sākotnējo atrašanās vietu un vārdu uz- fināls.

Reklāmas vispārīgs skats: @keyframes nosaukums (no (…)uz (…))

Animācija ir sadalīts vairākos parametros, no kuriem 4 mēs izmantosim.

Un tagad piemērs:

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



Biļešu animācija parasti tiek izmantota diezgan lielos ekrānos. Tas ir saistīts ar faktu, ka mazam ekrānam ir grūti izvēlēties grafikas animāciju, lai tā izskatītos harmoniski un nenovērstu visu uzmanību. Taču teksta kustība tiek izmantota dažādiem ekrāna izmēriem.

LED indikators var būt gan pilnkrāsu, gan vienkrāsains, un tas ir ļoti svarīgi arī animācijas izmantošanā. Pilnkrāsu modeļos to var izmantot bez ierobežojumiem, bet vienkrāsu ekrāniem ir nepieciešams:

  • Lietot animāciju, kas sastāv no vienas krāsas;
  • Ņem vērā izmēru attiecību, pretējā gadījumā animācija vienkārši izplūdīs.

Vienkrāsu ekrāniem paredzētā teksta animācija nedrīkst būt pārāk sarežģīta un piesātināta ar efektiem. Atcerieties, ka viss tiks darīts vienā krāsā un var saplūst vienā spilgtā vietā.

Ērts formāts attēlu apmaiņai: gif, visbiežāk tiek izmantots, strādājot ar ekrāniem. Gif animācija līstošai līnijai var būt vienkrāsaina vai daudzkrāsaina, un tajā var būt līdz 256 krāsām.

LED ekrāna redaktoros GIF failus var izveidot gan statiskā stāvoklī, gan paralēli kustībā:

  • Pašu kustība attēlam;
  • Kustības efekts pa ekrānu.

Šajā gadījumā svārsta animācija tiek konfigurēta, izmantojot īpašas redaktora programmas, un tā ir jāizstrādā, izmantojot īpašus skriptus. Jūs varat tos lejupielādēt gatavā formātā vai pasūtīt izstrādi savai ierīcei.

Animācija LED indikatoram

Jebkura attēla dizains uz LED ekrāna var kļūt interesantāks, ja pievienojat tam kustību. Bet jums vajadzētu atšķirt to, kas animācija ir paredzēta LED indikatoram, un tās programmatūras efektiem. Tātad, jūs varat ielādēt animētu tekstu vai attēlu iestatījumu programmā gatavā formā. Failā būs ietverti secīgi kadri un informācija par katra no tiem attēlošanas laiku.

Ir divi veidi, kā animēt atzīmi.

Pirmais veids

Atveriet attēlu, kas būs fons (piemērs). Izveidojiet jaunu slāni. Izmantojot rīku “Taisnstūra laukums”, atlasiet nelielu taisnstūri, kas darbosies kā lauks, pa kuru līnija darbosies, un aizpildiet to ar kādu krāsu, kam nav nozīmes, jo no tā tiks noņemta redzamība.

Izveidojiet teksta slāni.

Pievienojiet teksta slānim slāņa masku un aizpildiet to ar melnu krāsu. Uzkāpiet uz slāņa ar taisnstūri un ielādējiet atlasīto apgabalu: cilne “Tab”. Novietojiet to uz slāņa maskas un aizpildiet izvēlēto laukumu ar baltu.

Noņemiet redzamību no slāņa ar taisnstūri. Cilnē “Logs” atlasiet “Laika skala” un izveidojiet sižetu. Pirmajā kadrā mēs iestatām “Cikla displeja laika izvēle” un “Cikla parametru izvēle”. Atsaistīt teksta slāni no slāņa maskas. Pārvietojiet līniju pa labi, lai tā pazustu no redzesloka. Tas nodrošinās taisnstūrveida laukumu, kas slāņa maskā ir izcelts baltā krāsā. Lai līnija būtu vienā līmenī, pārvietojoties, jums jāiespējo “Palīgelementi”: cilne “Skats”.

Otrajā kadrā mēs pārvietojam līniju pa kreisi, lai tā pazustu no redzesloka.

Stāvoklī turiet nospiestu taustiņu Shift un noklikšķiniet uz pirmā un otrā kadra. Noklikšķiniet uz ikonas "Izveidot starpkadrus". Dialoglodziņā iestatiet starpkadru skaitu.

Mēs iegūstam pirmo ložņu līnijas metodi.

Otrais veids

Izveidojiet teksta slāni, kas būs statisks, bet ar kustību imitāciju.

Izslēdziet redzamību visos slāņos, izņemot teksta slāni. Izveidojiet otu no teksta slāņa.

Mēs stāvam uz slāņa ar attēlu, izmantojiet rīku “Taisnstūra laukums”, lai atlasītu attēla daļu, uz kuras tiks simulēta ložņu līnija. Kopējiet atlasīto apgabalu un ielīmējiet.

Pievienojiet slāņa masku slānim ar attēla fragmentu un aizpildiet to ar melnu krāsu. Slāņu maskā izmantojiet otu no baltā teksta slāņa, lai atklātu slāni. Izveidojiet jaunu slāni virs slāņa ar attēla fragmentu un krāsojiet to ar atbilstošas ​​tumšas krāsas mīkstu otu. Padariet slāni par izgriezuma masku attiecībā pret alni ar attēla fragmentu: turot nospiestu taustiņu Alt, slāņu logā noklikšķiniet gar slāņu apmali.

Mēs veidojam sižetu. Pirmajā kadrā pārvietojiet slāni ar svītru pa labi.

Otrajā kadrā pārvietojiet slāni ar svītru pa kreisi.

Veidojam starpkadrus.

Mēs saglabājam animāciju un iegūstam otro metodi, simulējot atzīmi.



 

Varētu būt noderīgi izlasīt: