Սողացող գծի անիմացիա. Շարժապատկերներ GIF-ի համար և LED էկրանների անիմացիա

Բարև, դասավորության և վեբ լեզուների սիրահարներ: Այսօրվա հրապարակման թեման իրավամբ է՝ «Շարժապատկերներ html կայքի համար»: Անիմացիաները բավականին տարածված են այս օրերին և ամենաշատ հարցերն են առաջացնում սկսնակների շրջանում: Այդ իսկ պատճառով ուզում եմ անդրադառնալ այս թեմային և պատմել, թե ինչ անիմացիոն տարրեր են անհրաժեշտ, որտեղ են դրանք առավել հաճախ օգտագործվում և ինչ գործիքներ են օգտագործվում։

Ես նաև որոշեցի ցույց տալ կոդի կոնկրետ օրինակներ՝ իրականացնելով հանրաճանաչ և պահանջված առաջադրանքներ։ Հոդվածը մինչև վերջ կարդալուց հետո դուք կսովորեք, թե ինչպես կիրառել այնպիսի տեխնիկա, ինչպիսիք են ժապավենը և ձյունը: Այժմ անցնենք հոդվածի բուն մասին։

Շարժապատկերները փոթորկել են աշխարհը

Իրոք, վեբ ռեսուրսների մեծ մասը օգտագործում է անիմացիոն օբյեկտներ իրենց բովանդակության մեջ: Ամենավառ օրինակը առցանց խանութներն են, որտեղ երբ սավառնում եք մոդելի կամ ապրանքի վրա, նրանք պտտվում են:

Նախկինում անիմացիայի դերը խաղում էին gif ֆայլերը։ Այնուամենայնիվ, այսօր շարժվող տարրերի հիմնական մասը կատարվում է կասկադային ոճի թերթիկների միջոցով: Բացի այդ, կան բազմաթիվ գրադարաններ, որոնք հեշտացնում են վեբ ծրագրավորողների աշխատանքը՝ նրանց տրամադրելով պատրաստի լուծումներ։

Օրինակ՝ Animate.css գրադարանը։ Գրադարանը կարելի է ներբեռնել և այնուհետև միացնել ծրագրի կոդի միջոցով < հղում>.

Տիկեր

Դուք երբեմն նկատել եք, թե ինչպես է վեբկայքի տեքստային բովանդակությունը շարժվում հորիզոնական կամ ուղղահայաց, կամ գուցե նույնիսկ պատկերները շարժվում են: Դա մի փոքր բարդ է թվում, բայց իրականում դրա համար պատասխանատու է միայն մեկ html լեզվի պիտակը .

Ցանկանում եմ նշել, որ սա նոր տարր չէ և չի վերաբերում html5-ին։ Այն ի սկզբանե ստեղծվել էր Internet Explorer-ի համար, սակայն որոշ ժամանակ անց այլ բրաուզերներ սկսեցին աջակցել դրան։

Այսպիսով, ինչպես եք ստեղծում տիկտոր: Փաստորեն, դուք պարզապես պետք է մուտքագրեք անհրաժեշտ տեքստը զուգակցված պիտակի մեջ - և նա «կվազի»: Թե կոնկրետ ինչպես կտեղափոխվի, այլ հարց է։

Հատկանիշ Նկարագրություն
վարքագիծ Նշում է, թե ինչպես է բովանդակությունը տեղափոխվում.

այլընտրանքային– բովանդակությունը շարժվում է երկու սահմանների միջև՝ ցատկելով դրանցից.

ոլորել- առարկան շարժվում է շրջանագծի մեջ (հայտնվում է մի կողմից, անհետանում է մյուս կողմից);

Սլայդ– բովանդակությունը գնում է մինչև վերջ և կանգ է առնում:
հանգույց Որոշում է, թե քանի անգամ է կրկնվելու նկարագրված պիտակի բովանդակությունը: Օրինակ, -1-ն օգտագործվում է անորոշ ժամանակով կրկնելու համար:
ուղղությունը Սահմանում է շարժման ուղղությունը.

ներքեւ- շարժվում է վերին եզրից ներքև;

ձախ- աջ եզրից ձախ;

վերև- ստորին եզրից վերև;

ճիշտ- ձախից աջ:
scrollaunt Սահմանում է պիքսելային հեռավորությունը ընթացիկ օբյեկտի դիրքի և հաջորդի միջև: Ազդում է շարժման արագության վրա. Սկզբում հավասար է 6-ի:
scrolldelay Դա նույնպես ազդում է «վազքի» արագության վրա, սակայն թարմացման հաճախականության հաշվին։ Սահմանում է ուշացումը միլիվայրկյաններով:

Այժմ ժամանակն է փորձարկել ձեռք բերված գիտելիքները գործնականում։ Տեղադրեք տիկերի հետևյալ ծրագրային ներդրումը կոդի երկխոսության վանդակում և գործարկեք այն բրաուզերում:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Օրինակ Թռիչքներ

Օրինակ Թռիչքներ

Էջում ցուցադրված էր երկու անիմացիա՝ վազող (ավելի ճիշտ՝ ցատկող) գիծ և վազող ձի։

Քանի որ ձմռան ամիսները մոտենում են, շատ առցանց ռեսուրսների սեփականատերեր զարդարում են իրենց կայքերը եղևնու ճյուղերով, տոնական խաղալիքներով կամ ձյունով: Մենք կզբաղվենք վերջին կետով.

Հնարավոր է ձյան փաթիլներ ստեղծել տարբեր ձևերով. Ոմանք իրենց կաղապարները նկարում են թափանցիկ ֆոնի վրա, մյուսներն օգտագործում են պատրաստի նյութեր ինտերնետից, իսկ մյուսները դիմում են CSS գործիքներին։ Ես որոշեցի միանալ վերջին խմբին և իմ կախարդանքն աշխատեցի ոճերի վրա։

Ինչպես կռահեցիք, այս անգամ անիմացիան կստեղծվի բացառապես կասկադային ոճերի թերթիկների ներկառուցված մեխանիզմներով, թեև կան այլ լուծման սցենարներ։ Բացի այդ, մենք չենք օգտագործի html, այլ կօգտագործենք միայն ստանդարտ նշում:

Տեղացող ձյուն ստեղծելու համար անհրաժեշտ է օգտագործել հետևյալ գործիքները.

սեփականություն անիմացիա(որը հայտնվել է css3 ճշգրտման մեջ) և արգելափակել @keyframes.

@keyframesօգնում է որոշել վեբ էջի տարրերի վիճակը ժամանակի որոշակի կետում և այդպիսով ստիպում է նրանց շարժվել: Հիմնաբառ -իցսահմանում է օբյեկտների նախնական գտնվելու վայրը և բառը դեպի- վերջնական.

Գովազդի ընդհանուր տեսք. @keyframes անունը (սկսած (…)դեպի (…))

Անիմացիաբաժանված է մի քանի պարամետրերի, որոնցից 4-ը մենք կօգտագործենք:

Իսկ հիմա օրինակ.

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 անիմացիան սովորաբար օգտագործվում է բավականին մեծ էկրանների վրա: Դա պայմանավորված է նրանով, որ փոքր էկրանի համար դժվար է ընտրել գրաֆիկական անիմացիա, որպեսզի այն ներդաշնակ տեսք ունենա և չշեղի ողջ ուշադրությունը: Սակայն տեքստի շարժումն օգտագործվում է էկրանի մեծության լայն տեսականիով:

LED ցուցիչկարող է լինել կամ ամբողջական գունավոր կամ մոնոխրոմ, և սա նույնպես մեծ նշանակություն ունի անիմացիայի օգտագործման համար: Ամբողջ գունավոր մոդելներում այն ​​կարող է օգտագործվել առանց սահմանափակումների, սակայն մեկ գունավոր էկրանների համար անհրաժեշտ է.

  • Կիրառել մեկ գույնից բաղկացած անիմացիա;
  • Հաշվի առեք չափերի հարաբերակցությունը, հակառակ դեպքում անիմացիան պարզապես կմղվի:

Մեկ գունավոր էկրանների համար տիկերի տեքստի աշխուժացումը չպետք է լինի չափազանց բարդ և բեռնված էֆեկտներով: Հիշեք, որ ամեն ինչ արվելու է նույն գույնով և կարող է միաձուլվել մեկ լուսավոր կետի մեջ:

Պատկերների փոխանակման հարմար ձևաչափ՝ gif, որն առավել հաճախ օգտագործվում է էկրանների հետ աշխատելիս: Gif անիմացիան սողացող գծի համար կարող է լինել միագույն կամ բազմագույն և պարունակում է մինչև 256 գույն:

LED էկրանի խմբագրիչներում GIF ֆայլերը կարող են ստեղծվել ինչպես ստատիկ դիրքում, այնպես էլ զուգահեռ շարժման մեջ.

  • Սեփական շարժում պատկերի համար;
  • Շարժման ազդեցությունը էկրանի վրա:

Այս դեպքում տիկերի անիմացիան կազմաձևվում է հատուկ խմբագրիչ ծրագրերի միջոցով և պետք է նախագծված լինի հատուկ սկրիպտների միջոցով: Դուք կարող եք դրանք ներբեռնել պատրաստի ձևաչափով կամ պատվիրել մշակում ձեր սարքի համար:

Անիմացիա LED ցուցիչի համար

LED էկրանի վրա ցանկացած պատկերի դիզայնը կարող է ավելի հետաքրքիր դառնալ, եթե դրան ավելացնեք շարժում: Բայց դուք պետք է տարբերեք, թե ինչ է անիմացիան LED ցուցիչի համար և դրա սեփական ծրագրային էֆեկտները: Այսպիսով, դուք կարող եք բեռնել անիմացիոն տեքստը կամ պատկերը կարգավորումների ծրագրում ավարտված ձևով: Ֆայլը կպարունակի հաջորդական շրջանակներ և տեղեկատվություն դրանցից յուրաքանչյուրի ցուցադրման ժամանակի մասին:

Տիկերը կենդանացնելու երկու եղանակ կա.

Առաջին ճանապարհը

Բացեք պատկերը, որը կլինի ֆոն (օրինակ): Ստեղծեք նոր շերտ: Օգտագործելով «Ուղղանկյուն տարածք» գործիքը, ընտրեք մի փոքր ուղղանկյուն, որը կգործի որպես դաշտ, որի երկայնքով կանցնի գիծը և այն լրացրեք ինչ-որ գույնով, ինչը նշանակություն չունի, քանի որ տեսանելիությունը կհեռացվի դրանից:

Ստեղծեք տեքստային շերտ:

Տեքստի շերտին ավելացրեք շերտի դիմակ և լրացրեք այն սևով: Քայլեք ուղղանկյունով շերտի վրա և բեռնեք ընտրված տարածքը՝ «Tab» ներդիրը: Տեղադրեք այն շերտի դիմակի վրա և ընտրված հատվածը լրացրեք սպիտակով։

Հեռացրեք տեսանելիությունը շերտից ուղղանկյունով: «Պատուհան» ներդիրում ընտրեք «Ժամանակացույց» և ստեղծեք պատմություն: Առաջին կադրում մենք սահմանել ենք «Ցիկլի ցուցադրման ժամանակի ընտրություն» և «Ցիկլի պարամետրերի ընտրություն»: Անջատեք տեքստային շերտը շերտի դիմակից: Տեղափոխեք գիծը դեպի աջ, որպեսզի այն անհետանա տեսադաշտից: Սա կապահովի ուղղանկյուն տարածք, որը սպիտակով ընդգծված է շերտի դիմակում: Որպեսզի գիծը շարժվելիս լինի նույն մակարդակի վրա, դուք պետք է միացնեք «Օժանդակ տարրեր»՝ «Դիտել» ներդիրը:

Երկրորդ կադրի վրա գիծը տեղափոխում ենք դեպի ձախ, որպեսզի այն անհետանա տեսադաշտից։

Պատկերատախտակի վրա սեղմած պահեք Shift ստեղնը և սեղմեք առաջին և երկրորդ շրջանակները: Կտտացրեք «Ստեղծել միջանկյալ շրջանակներ» պատկերակը: Երկխոսության վանդակում սահմանեք միջանկյալ շրջանակների քանակը:

Մենք ստանում ենք սողացող գծի առաջին մեթոդը:

Երկրորդ ճանապարհ

Ստեղծեք տեքստային շերտ, որը կլինի ստատիկ, բայց շարժման իմիտացիայով:

Անջատեք տեսանելիությունը բոլոր շերտերից, բացառությամբ տեքստի շերտի: Տեքստի շերտից վրձին պատրաստեք։

Մենք կանգնած ենք պատկերով շերտի վրա, «Ուղղանկյուն տարածք» գործիքի օգնությամբ ընտրում ենք պատկերի այն հատվածը, որի վրա կսիմուլյացվի սողացող գիծը։ Պատճենեք ընտրված տարածքը և տեղադրեք:

Պատկերի հատվածով շերտին ավելացրեք շերտի դիմակ և լրացրեք այն սևով: Շերտի դիմակում օգտագործեք վրձին սպիտակ տեքստային շերտից՝ շերտը բացահայտելու համար: Պատկերի հատվածով ստեղծեք նոր շերտ շերտի վերևում և ներկեք այն համապատասխան մուգ գույնի փափուկ վրձնով։ Պատկերի մի հատվածով շերտը դարձրեք կտրող դիմակ՝ կապված կաղնիների հետ. Alt ստեղնը սեղմած պահելով, կտտացրեք շերտերի պատուհանի շերտերի եզրագծի երկայնքով:

Մենք ստեղծում ենք սյուժե. Առաջին շրջանակի վրա շերտը շարժեք աջ կողմում:

Երկրորդ շրջանակի վրա շերտը շարժեք դեպի ձախ։

Մենք ստեղծում ենք միջանկյալ շրջանակներ:

Մենք պահպանում ենք անիմացիան և ստանում երկրորդ մեթոդը՝ նմանակելով տիկերը։



 

Կարող է օգտակար լինել կարդալ.