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