CSS-ն ընդդեմ JS անիմացիայի. Ո՞րն է ավելի արագ | WEBSTART TEAM

Այս նյութում Webstart-ի frontend ծրագրավորող Քրիստինեի հետ կխոսենք պարզ՝ բարդ թվացող պրոցեսների մասին։

Ծրագրավորման համաշխարհային թրենդներից արդեն որերորդ տարին է դուրս չեն գալիս անիմացիաները։ Անիմացիան արվում է ոչ միայն կայքին կրեատիվ տեսք հաղորդելու համար, այն նաև հաճախ կրում է ֆունկցիոնալ նշանակություն։ Օրինակ, եթե հարկավոր է ընդգծել կամ օգտատիրոջ ուշադրությունը հրավիրել ինչ-որ հրամանի, կոճակի կամ նախադասության վրա՝ այդ դեպքում ևս օգնության են գալիս անիմացիաները։

Մի փոքր սփոյլեր սկզբում։ Քրստինեն նշում է, որ JS-ի հնարավորություններն ավելի մեծ են. ընդունված է համարել, որ այն ավելի արագ է, սակայն դա միանշանակ չէ։ JavaScript-ը լեզու է և լոգիկա է պահանջում։

Եվ ուրեմն, նշված պրոցեսները լավ պատկերացնելու համար նախ պատասխանենք մի կարևոր հարցի։

Ինչպե՞ս են ստեղծվում անիմացիաները JS-ի օգնությամբ

Մի քիչ ծրագրավորման բառապաշար օգտագործենք, սկսնակներին այս տեղեկությունը հաստատ պետք կգա 🙂

Որպեսզի ստացվի անիմացիա, պետք է տվյալ կոնտեյներ էլեմենտը ստեղծված լինի հետևյալ կերպ՝ style = “position: relative”։ Իսկ այն տարրը, որին անիմացիա պետք է հաղորդվի, այսպես՝ style = “position: absolute”։

Իսկ այժմ անդրադառնանք մեր գլխավոր խնդրին։

JS և CSS անիմացիաների տարբերությունները

Քրիստինեն պնդում է, որ կան փոքրիկ անիմացիաներ, որոնք JS-ով ստեղծելն անիմաստ է, չնայած որ հնարավոր է, քանի որ CSS-ով այն ավելի արագ է ստացվում։

Ահա մի քանի օրինակ՝

• JS-ով կոճակի վրա քլիք ես անում ու պատասխանի համար ժամանակ կարող ես դնել, օրինակ՝ հինգ րոպեից արձագանքի։ Իսկ CSS-ի վրա դա, եթե անգամ հնարավոր է, ապա շատ ավելի աշխատատար կլինի։
  
  
• Հովըր, ֆոկուս, գույն, դիրք, չափսեր CSS-ով ենք ստեղծում։
  
  
• Եթե տվյալները ինչ-որ տեղից վերցնում ես և սպասում պատասխանի՝ դա JS-ով ես անում։

Այժմ անդրադառնանք JS-ի և CSS-ի գլխավոր տարբերություններին, որպեսզի իմանաս որը երբ գործածել՝ առանց փորձարկումների վրա ավելորդ ժամանակ վատնելու։

CSS անիմացիաները հիմնականում մշակվում են հոսքային կոմպոզիցիայով (animation thread), որը տարբերվում է գլխավոր բրաուզերի հոսքից (main thread)։ Եթե բրաուզերը կատարում է բարդ հրամանները գլխավոր հոսքում՝ անիմացիաներն առանց ընդհատնվելու կիրականացվեն։


Իրականում, անիմացիա պատրաստելու գործիքի ընտրության հարցում ավելի կարևոր է ոչ թե այն, թե ինչ է լիելու վերջնական տեսքը, այլ այն, թե ինչպես է դա արվելու։

Օրինակ՝ CSS-ը թույլ է տալիս ստեղծել html անիմացիաներ՝ առանց JavaScript օգտագործելու։ CSS-ը նաև կարող է JS-ից ավելի արագ աշխատել, եթե բրաուզերով օպտիմիզացնենք այն։

Եթե դիտարկենք CSS-ը որպես գործիք, այլ ոչ թե որպես լեզու, ապա կստացվի, որ այն ավելի արագ է և ավելի լավ է աշխատում, ինչը չի համապատասխանում իրականությանը։ Եվ ահա թե ինչու։

Օրինակ եթե անիմացիան պետք է լինի SVG ֆիլտրերով, ապա թույլ համակարգչի վրա այն ընդհատումներով կաշխատի, և ոչ մի ծրագիր չի օգնի։ Այստեղից հետևում է որ տվյալ պարագայում ամեն ինչ խիստ հարաբերական է։

Սակայն եթե այնուամենայնիվ պետք է ընտրել այդ երկուսից մեկը, ապա հետևյալ տեղեկությունը հաստատ կօգնի։

Ամփոփում

Եթե հարկավոր է անիմացիայի պրոցեսը կառավարել և հետագայում ընդլայնել ֆունկցիոնալը՝ հնարավորությունների հաշվին, ապա JS-ն այս առումով ավելի հարմար է։ Մնացած դեպքերում կարող ես օգտագործել CSS։

Իրականում լավագույն տարբերակն այս երկուսի համադրումն է, քանի որ CSS-ը անիմացիան նկարագրելու համար է, JS-ը միացնելու համար է։ Այդ դեպքում կայքն ավելի լավ և բալասնավորված է աշխատում։ Պարզ ասած՝ առաջինը շարժիչն է, իսկ երկրորդը՝ մեքենան։ Դե իսկ եթե այս ամենից քեզ ոչինչ պարզ չէր, ապա կապ հաստատրիր մեր մասնագետների հետ, մենք կօգնենք որոշել, թե պե՞տք է արդյոք քեզ անիմացիայով կայք։