Գրաֆիկա ստեղծելու համար JavaScript- ի 11 շրջանակներ

Հեղինակ: Randy Alexander

Ստեղծման Ամսաթիվը: 4 Ապրիլ 2021

Թարմացման Ամսաթիվը: 16 Մայիս 2024

Տեսանյութ: Рынок IT в 2021. Intel и конкуренты. Игры от Netflix. [MJC News #8]

Բովանդակություն

01. D3.js
02. Գծապատկեր. Js
03. Chartist
04. Բրիտչարթս
05. Տաուչարց
06. Երկու. Js
07. Pts.js
08. Անիմե. Js
09. PixiJS
10. dդոգ
11. Snap.svg

Javascript- ի շրջանակները կարող են կատարել մի շարք գործառույթներ: Այստեղ մենք դիտելու ենք որոշ գրադարաններ, որոնք կօգնեն ձեզ ստեղծել ցնցող գրաֆիկա:

Theննարկիչը առաջարկում է մի քանի բարձր էներգիայի գծագրման API և մակերեսներ: Առավել ուշագրավ են կտավի տարրը և մասշտաբային վեկտորային գրաֆիկան (SVG): Այս երկու հատկություններն էլ այժմ հասանելի են գրեթե բոլոր աշխատասեղաններում և բջջային դիտարկիչներում, բայց դրանց օգտագործման համար անհրաժեշտ API- ները բավականին ցածր մակարդակի են և «ցածր մակարդակը» սովորաբար վերածվում է շատ հոգնեցուցիչ և ավելորդ կոդի ՝ պարզ բաներ անելու համար:

Քանի որ հոգնեցուցիչ և ավելորդ կոդ գրելը բարձր չէ այն բաների ցուցակում, որոնք սովորաբար հաճույք են ստանում մշակողները, նույնիսկ կոդերի լավագույն խմբագրիչների և ծրագրավորման լավագույն նոթբուքերի առկայության դեպքում, բարեբախտաբար, մատչելի են մի քանի գրադարաններ, որոնք կօգնեն ձեզ ձեր զննարկչի գծագրման բոլոր պահանջների հարցում:

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

01. D3.js

D3.js- ը JavaScript գրաֆիկական գրադարանների գլխավոր ղեկավարն է: Շաբաթական ավելի քան մեկ միլիոն ներբեռնումներ npm- ում, դա միգուցե ամենահայտնի և լայնորեն օգտագործվող գրաֆիկական գրադարաններից է: Այն նույնիսկ ունի իր սեփական Վիքիպեդիայի էջը: Եկեք ընդունենք, չէ՞ որ դա այն ժամանակ է, երբ գիտեք, որ հասցրել եք մեծ ժամանակ անցկացնել:

D3- ը հնարավորություն է տալիս կառուցել ցանկացած տեսակի տվյալների արտացոլում: Դուք միայն պետք է նայեք դրա օրինակների էջին `հնարավորությունների աշխարհը տեսնելու համար: Ավելի լավ է, այցելեք Shirley Wu- ի Համիլթոն երաժշտական երաժշտության յուրաքանչյուր տողի ինտերակտիվ պատկերացում, եթե իսկապես ուզում եք ձեր մտքերը փչել:

D3- ը համապարփակ գործիք է: Այն ունի իր սեփական DOM ընտրությունը, AJAX հնարավորությունները և նույնիսկ գույքային պատահական թվերի գեներատորը: D3- ի յուրաքանչյուր բաղադրիչ իր հանգույցի մոդուլն է, որը պետք է ներմուծվի: Օրինակ, ընտրության մոդուլը կոչվում է d3- ընտրություն: Կան նաև զանգվածների, ձևերի, գույների, քաշել-թողնելու, ժամանակի և շատ ավելին մոդուլներ:

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

Դա հիմնականում այն պատճառով է, որ տվյալների բարդ տեսլականներ ստեղծելու համար պահանջվում է, որ դուք ցածր մակարդակի պատկերացում ունենաք այն պատկերացման մասին, որը ցանկանում եք ստեղծել: D3- ը նախապես թխված գծապատկերների լավագույն տարբերակը չէ: Դրա համար կան մի քանի այլ ընտրություններ, որոնք ձեզ շատ ավելի արագ կգտնեն «հաջողության փոսում»:

D3- ն ունակ է մատուցել կտավին և SVG- ին: Այնուամենայնիվ, D3- ի իրական հմայքը կայանում է նրանում, որ կարող է «տվյալների կապը» առաջացնել իր ստեղծած գրաֆիկայի հետ: Մտածեք գծապատկեր, որը փոփոխվում է մուտքային տվյալների փոփոխության հետ մեկտեղ: SVG- ի միջոցով յուրաքանչյուր գրաֆիկական տարր անհատական տարր է, որը կարող է ընտրվել և թարմացվել: Դա հնարավոր չէ կտավի հետ, և, քանի որ D3- ը հիմնովին վերաբերում է տվյալների արտացոլման հզորացմանը, SVG- ն սովորաբար նախընտրելի ելքային ձևաչափն է:

02. Գծապատկեր. Js

Chart.js- ը բաց կոդով նախագիծ է JavaScript- ով ուժեղ գծապատկերներ կառուցելու համար: Chart.js- ի և D3- ի միջև մեծ տարբերությունն այն է, որ չնայած D3- ով ցանկացած բան կարող ես կառուցել, Chart.js- ը սահմանափակում է քեզ ութ նախնական կառուցված գծապատկերների `գծի, ձողի, կարկանդակի, բևեռի, փուչիկի, ցրման, տարածքի և խառը: Չնայած սա կարծես թե սահմանափակող է, բայց հենց դա է ավելի պարզ դարձնում Chart.js- ը: Սա հատկապես ճիշտ է նրանց համար, ովքեր տվյալների մասնագետ չեն, բայց գիտեն իրենց հիմնական դիրքը գծապատկերի շուրջ:

Շարահյուսությունը կառուցված է գծապատկերի տիպի շուրջ: Դուք նախանշում եք նոր գծապատկեր առկա կտավի վրա, նախանշում գծապատկերի տեսակը և այնուհետև սահմանում գծապատկերի ընտրանքները: Chart.js- ը մատուցում է միայն կտավին: Սա խնդիր չէ, քանի որ բոլոր ժամանակակից զննարկիչները սատարում են HTML կտավի տարրը, բայց դա կարող է լինել դադարեցում այն ծրագրավորողների համար, ովքեր SVG աջակցության պահանջներ ունեն:

Դա նաև նշանակում է, որ դուք սահմանափակված եք հնարավոր անիմացիաներով: Տուփից դուրս Chart.js- ն աջակցում է բոլոր մեղմացնող հավասարումների և անիմացիաները նշված են մեկ հատկության պարամետրով: Չնայած դրանով արագ և հեշտ է դառնում անիմացիոն գծապատկեր ստանալը, բայց SVG անհատական տարրեր չունենալը խանգարում է ձեզ կատարել բարդ անիմացիաներ ՝ օգտագործելով CSS3 անցումներ և անիմացիաներ:

Ի տարբերություն D3- ի, Chart.js- ը մոդուլային չէ, ուստի անհրաժեշտ է ընդամենը մեկ JavaScript ընդգրկում `բոլոր գործառույթների և գծապատկերների տեսակների աջակցություն ստանալու համար: Դա ավելի հեշտ է դարձնում գործը, բայց նշանակում է, որ ձեր ակտիվները կարող են շատ ավելի մեծ լինել: Սա հատկապես ճիշտ է, եթե դուք ժամանակի առանցքներ եք պահանջում - Chart.js- ն այնուհետև պահանջում է Moment.js, որը k 51 կիլոգրամ է նվազեցված և սեղմված: Շատ ավելի հեշտ է ստեղծել գծապատկեր Chart.js- ի հետ, քան D3- ի: Այնուամենայնիվ, կա մի առաստաղ, որը գալիս է պարզության հետ: Կարող եք գտնել, որ տուփից դուրս եք հանել իր սահմանած սահմանի սահմանը: Հաճախ մշակողները սկսում են Chart.js- ի նման լուծմամբ, այնուհետև ավարտում են D3- ը:

Եթե Chart.js- ի պարզությունը ձեզ գրավիչ է, գուցե ձեզ իսկապես դուր գա հաջորդ տարբերակը ՝ Chartist:

03. Chartist

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

Chartist- ը փոքր է նաև Chart.js- ի համեմատ: Այն կշռում է ընդամենը 10 ԿԲ ՝ զրոյական կախվածությամբ: Դա կարող է լինել այն պատճառով, որ այն առաջարկում է միայն գծապատկերների երեք տեսակ. Տող, ձև և կարկանդակ: Այս տիպերի մեջ կան տատանումներ (այսինքն ՝ ցրման գծապատկերը Chartist- ում գծի տեսակ է), բայց կազմվածքի փոքր չափը և դյուրինությունը հակադրվում է տուփից դուրս գծապատկերների բացակայության պատճառով:

Chartist- ը կտավի փոխարեն մատուցում է SVG- ին `այն դարձնելով շատ ավելի անհատականացվող տեսքի և զգացողության տեսանկյունից, ինչպես նաև շատ ավելի մեծ վերահսկողություն ապահովելով ինտերակտիվության և անիմացիաների վրա: Այնուամենայնիվ, կտավ մատչելու հնարավորություն չունենալը նշանակում է, որ կարող է ավելի դժվար ժամանակ անցնել որոշակի գործողությունների: Օրինակ ՝ կա կտավ նկարին պատկեր դարձնելու API (toDataURI): SVG- ի համար այդ տարբերակը գոյություն չունի, ուստի գծապատկեր որպես պատկեր արտահանելը շատ բարդ կլինի: Իդեալական աշխարհում դուք հնարավորություն կունենաք մատուցել երկու ռեժիմներին:

Chartist գծապատկերները կազմաձևելը ավելի հեշտ է, քան Chart.js- ն, քանի որ առկա են ավելի քիչ տարբերակներ: Չնայած այս գծապատկերները հնարավոր է ընդլայնել բավականին մեծ ֆունկցիոնալությամբ, դրանց կենտրոնացումը պարզության վրա նշանակում է, որ դրանք, ըստ սահմանման, պարզ են: Chartist- ը հիանալի լուծում է նրանց համար, ովքեր կարիք ունեն գծապատկերային բազային լուծման: Գծապատկերները կազմաձևելը դժվար է կարգավորել, քանի որ դրանք պահանջում են որոշակի գիտելիքներ այն մասին, թե ինչպես կարելի է տվյալները կարգավորել որոշակի առանցքի երկայնքով և խմբավորել որոշակի ձևերով: Chartist- ը գծապատկերի մասը հնարավորինս պարզ է դարձնում, բայց կարող եք ավելի հզոր լուծման կարիք ունենալ, երբ ավելի հարմարավետ կդառնաք ձեր գծապատկերների ստեղծման հարցում:

Chartist- ը նաև թվարկում է բաց կոդով շրջանակային աջակցություն, ներառյալ React և Angular: Իր կայքում Vue փաթեթի մասին հիշատակում չկա:

04. Բրիտչարթս

Britecharts- ը գծապատկերային գրադարան է, որը փաթաթում է D3- ը: Այն պատրաստել է Eventbrite- ը, որն այնուհետև թողարկել է նախագիծը թույլատրելի Apache V2 արտոնագրի ներքո:

Այն առաջարկում է շատ նվազագույն, բայց գեղագիտական տեսանկյունից հաճելի գծապատկերներ: Չնայած վանիլային D3- ով ձևավոր գծապատկերի ստեղծումը բավականին խնդիր կարող է լինել, Britecharts- ի փաթաթումը դա դարձնում է նույնքան պարզ, որքան նոր barChart օբյեկտ ստեղծելը և այնուհետև սահմանել դրա լայնությունն ու բարձրությունը:

barChart. լայնությունը (500): բարձրությունը (500);

Britecharts- ն աջակցում է գծապատկերների բոլոր հիմնական տեսակներին. Տող, ձող, բլիթ, փամփուշտ, ցրման հողամաս, կայծ և քայլ, ինչը ավելին է, քան այն գրադարանները, ինչպիսիք են Chartist- ը: Այն նաև տրամադրում է հիմնական գործիքների հուշումներ և լեգենդների ֆունկցիոնալություն: Գծապատկերների անիմացիաները ներկառուցված են, և Eventbrite- ը տրամադրել է մի քանի գեղեցիկ գունային սխեմաներ:

Ի վերջո, Britecharts- ը հիանալի տարբերակ է գծապատկերների հիմնական ֆունկցիոնալության համար: Կազմաձևման օբյեկտները բավականին պարզ են, և դուք դեռ ստանում եք ծածկույթի տակ գտնվող D3- ի հզորությունը `առանց որևէ բան իմանալու հենց D3- ի մասին: Շատ ծրագրավորողներ դա ավելի համոզիչ տարբերակ կգտնեն, քան պարզապես հիմքից ամբողջական գծապատկեր կառուցել D3- ով:

Այն նաև կենտրոնանում է D3- ի տվյալների պարտադիր ասպեկտների վրա ՝ այն բավականին լավ դարձնելով գծապատկերների համար, որոնք պետք է փոխվեն, քանի որ տվյալների հիմքում ընկած փոփոխությունները: Չնայած մատչելի տեսակների մեջ որոշակիորեն սահմանափակող է, այն ունի նաև բազային գծապատկերի տեսակ, որը կարող եք ընդլայնել ՝ ստեղծելով ձեր սեփական գծապատկերների նոր տեսակները:

05. Տաուչարց

Taucharts- ը գծապատկերային գծագրերի մեկ այլ լուծում է, որը փաթաթում է D3- ի բարդությունը հեշտությամբ իրականացվող API- ի մեջ: Այն կառուցված է «Գրաֆիկայի քերականություն» գրքի ՝ հեղինակ Լելանդ Ուիլկինսոնի գրքից: Այն հնարավորություն է տալիս հասկանալ, թե երբ և ինչպես օգտագործել տվյալների որ տեսողականացումը տարբեր տեսակի տվյալների ցուցադրման համար:

Տուփից դուրս այն պարունակում է գծային, գծային, ցրման գծի, տարածքի և երեսպատման գծապատկերներ: Այնուամենայնիվ, այն իրականացնում է «Գրաֆիկայի քերականություն» –ից «Taucharts Language» հասկացությունները, որը տրամադրում է մի շրջանակ, որի մեջ պետք է իրականացնել ձեր սեփական տվյալների արտացոլումը:

Taucharts- ը բավականին համոզիչ է թվում, և այն, որ այն կառուցված է D3- ի վրա, այն դարձնում է գրավիչ և հզոր տարբերակ: Այնուամենայնիվ, կա այն զգացումը, որ մշակողին անհրաժեշտ է նաև կարդալ «Գրաֆիկայի քերականությունը» ՝ իր ուժն ամբողջությամբ օգտագործելու համար:

Մինչ այժմ մենք լուսաբանեցինք միայն գծապատկերներ և տվյալների արտացոլում: Դա պայմանավորված է նրանով, որ գծապատկերներ նկարելը զննարկչում գրաֆիկական գրադարանի ամենատարածված օգտագործման դեպքն է: Բայց դա ոչ մի դեպքում միակը չէ: Գրաֆիկայի մեկ այլ բավականին տարածված սցենար, իհարկե, անիմացիան է:

06. Երկու. Js

Չշփոթել D3.js- ի հետ, two.js- ը բաց կոդով JavaScript գրադարան է `ցանցում երկչափ նկարչության համար: Այն նաև ի վիճակի է թիրախավորել բոլոր երեք գրաֆիկական տարբերակները ժամանակակից զննարկիչներում ՝ SVG, Canvas և WebGL:

Two.js- ն որոշակիորեն նման է D3- ին այն առումով, որ այն խստորեն կենտրոնացած է գծագրության վրա և չունի նախապես թխված գծապատկերներ կամ ընտրելու ինտերակտիվ կառուցվածքներ: Սա նշանակում է, որ ճիշտ այնպես, ինչպես D3- ը, ձեզ հարկավոր է հիմքում ընկալել գծագրի այն տեսակը, որը դուք փորձում եք անել և ինչպես դրան հասնել երկու.js կառուցվածքների միջոցով: Շրջան նկարելը բավականին պարզ է: Մյուս կողմից, մանրամասն անիմացիայի ստեղծումը շատ ավելի բարդ ձեռնարկ է: Two.js- ը միայն վերացական է նկարում է ձևերի ձանձրույթը, ոչ թե ընդհանուր գծագրության տատիդը:

Two.js- ը նաև հետևում է ձեր ստեղծած բոլոր օբյեկտներին, այնպես որ կարող եք ցանկացած պահի հղել և կենդանացնել դրանք: Սա հատկապես կարևոր է, եթե դուք զբաղվում եք խաղերի մշակմամբ, և ունեք ակտիվներ, որոնք պետք է հետևեն այնպիսի բանի համար, ինչպիսին է բախումների հայտնաբերումը: Այն ունի ներկառուցված անիմացիայի օղակ, որը ձեզ ազատում է անիմացիայի շրջանակների մասին անհանգստանալու մտքից և հեշտացնում է կապել անիմացիոն գրադարանում, ինչպիսին է GreenSock- ը:

Չնայած two.js հզոր է, դրա ազատ ձևը կարող է որոշ մշակողների անվստահ թողնել, թե ինչպես սկսել, և դա ավելի շատ գործիք է 2D նկարչության և անիմացիայի համար: Մեկ այլ հիանալի տարբերակ է pts.js.

07. Pts.js

Pts- ը նաև երկչափ նկարչական գրադարան է: Այնուամենայնիվ, այն սկզբունքորեն տարբերվում է two.j- ից, քանի որ այն օգտագործում է նախապես որոշված մեթոդաբանություն, թե ինչպես պետք է նկարներն ու անիմացիաները հավաքվեն ՝ տարածություն, ձև և կետ: Նմանությունը բացատրելու համար դրա մշակողները օգտագործում են ֆիզիկական աշխարհից: Տիեզերքը թուղթ է: Ձևը մատիտն է: Եվ կետը ձեր գաղափարն է:

Դրա իրականացման առումով տարածությունը կտավի տարր է: Կտավի տարրը ստեղծվելուց հետո կարող եք դրան նվագարկիչներ ավելացնել: Դրանք կարող են լինել կամ գործառույթներ կամ օբյեկտներ: Այս գործառույթներն ու օբյեկտները պետք է համապատասխանեն տարածության կանխորոշված ինտերֆեյսին: Pts- ը կառուցված է TypeScript- ի վրա, ուստի կարիք չկա կռահել, թե որոնք են դրանք, քանի որ ձեր օգտագործած գործիքակազմը, ամենայն հավանականությամբ, կառաջարկի ինքնալրացում ունեցողներին:

Օրինակ, տարածությունն ունի մեկնարկի գործառույթ, որը կարող եք նշել: Սա ծածկագիր է, որը գործարկվում է, երբ տարածքը պատրաստ է: Այս գործառույթների շրջանակներում դեպի տարածություն նկարելը տեղի է ունենում ձևի օբյեկտի միջոցով: Ձևի առարկաները կարող են նկարել ցանկացած տեսակի ձև, և կետն այն է, թե որտեղ են այս իրերը տեղակայված տարածության մեջ:

Pts- ը, կարծես, հիմնականում նախատեսված է ինտերակտիվ պատկերացումներ և անիմացիաներ ստեղծելու համար: Դրա իրականացումը հետաքրքիր է, չնայած բավականին վերացական: Մշակողները կարող են դժվարությամբ հասկանալ Pts- ի պահանջվող «տարածքը, ձևը, կետը» մոդելը: Սա ևս մեկ մտավոր խոչընդոտ է, որը պետք է վերացվի `բացի ձևեր պարզապես նկարելուց և կենդանացնելուց:

08. Անիմե. Js

Anime.js- ը հիմնականում անիմացիոն գրադարան է: Այն ներկառուցված ցնցող համակարգ ունի ՝ ավելի պարզ դարձնելու համար բարդ անիմացիաներ, որոնք համընկնում են կամ կախված են մեկ այլ կատարման դեպքից: Ընդունված է, որ անիմացիաները համաժամեցվեն միասին կամ միմյանց հրահրեն: Stնցող համակարգը հեշտացնում է դրա իրականացումը, քանի որ այն օգնում է թեթեւացնել որոշ վերերկրյա էջեր ՝ էջում կատարվող ամեն ինչը հետևելու և անիմացիայի ժամանակացույցերը ձեռքով կազմաձևելու համար:

Ի տարբերություն մինչ այժմ լուսաբանված նկարների գրադարանների, anime.js- ը չունի ձևեր նկարելու API: Փոխարենը, դա ենթադրում է, որ ձեր ձևերն արդեն գոյություն ունեն, և որ դուք ցանկանում եք կենդանացնել դրանք: Սա այն հիանալի է դարձնում գրադարանների համար, ինչպիսիք են two.js. Anime.js- ն ունի աջակցություն CSS հատկությունների, SVG, DOM և նույնիսկ JavaScript օբյեկտների անիմացիայի համար:

Anime.js- ը լավ տարբերակ է գոյություն ունեցող գծագրերը կենդանացնելու համար և, հավանաբար, այն զուգորդվում է մեկ այլ գրադարանի հետ: Այն պետք է համարվի GreenSock- ի նման մի այլընտրանք և ոչ թե այլ նկարչական գրադարանների փոխարինում: Anime.js- ն, ամենայն հավանականությամբ, կօգտագործվի ավելի բարդ անիմացիաների համար, որոնք պետք է տեղի ունենան որպես ինտերակտիվ վեբ փորձի մի մաս:

09. PixiJS

PixiJS- ը մեկ այլ 2D նկարչական գրադարան է: Դրա հիմնական նպատակն է հեշտացնել 2D գրաֆիկայի ցուցադրումը, կենդանացումը և կառավարումը, այնպես որ կարողանաք կենտրոնանալ ձեր փորձը կամ խաղի վրա կառուցելու վրա ՝ առանց անհանգստանալու, որ հետևեք բոլոր ձևերին և պատկերներին, որոնք դուք պետք է նկարեք և կենդանացնեք: Եթե դուք խաղ եք կառուցում, ակտիվները (կամ սփրիտները) կարող են արագորեն տեղափոխվել մի շարք, որը դժվար է կառավարել: (Բազմաթիվ միջոցներ խնայելո՞ւ եք: Ապահով պահեք դրանք ամպերի առավել հուսալի պահեստում):

PixiJS- ի գրավիչ կողմն այն է, որ այն գալիս է API- ից, որը կառուցվել և լայնորեն օգտագործվում է Adobe Flash- ում: Սա հսկայական օգուտ է Flash ֆոնից եկող ծրագրավորողների համար, քանի որ փորձը կզգա ծանոթ:Այն նույնպես նման է Apple- ի SpriteKit- ին:

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

PixiJS- ը մատուցում է WebGL- ին: WebGL- ը զննարկիչում GPU- արագացված գրաֆիկա կատարելու շարժիչ է: Սա նշանակում է, որ այն օգտակար է անիմացիաների և գրաֆիկայի համար, որոնք շատ համակարգային ռեսուրսներ են օգտագործում և լավագույնս հանդես կգան գրաֆիկայի մշակման առանձին միավորի (GPU) կողմից մատուցվելիս: Այն հիմնված է OpenGL- ի վրա, որը աշխատասեղանին համարժեք է խաղեր և 3D գրաֆիկական ծրագրեր վարելու համար: Կափարիչի տակ, WebGL- ն օգտագործում է HTML կտավի տարր:

Լուրջ գրաֆիկական մշակողները կգնահատեն WebGL- ի հզորությունը: Այնուամենայնիվ, այդ փորձը կարող է դեգրադացվել ավելի ցածր էներգիայի մեքենաների վրա: Նույնիսկ, երբ ես շարադրում էի այս հոդվածը, PixiJS- ի դեմոներից շատերը նկատելիորեն դանդաղեցրին իմ համակարգը, որը չունի ավելի բարձրակարգ հնարավորություններ, որոնք անհրաժեշտ են բարդ գրաֆիկայի և անիմացիաների համար:

10. dդոգ

Նկարչական շարժիչների մեծ մասը, որոնք մինչ այժմ քննարկել ենք, երկչափ են: Դա պայմանավորված է նրանով, որ մեր էկրանին ունեցած փոխազդեցությունների մեծ մասը լինում են երկու հարթություններում ՝ X և Y առանցքի երկայնքով: Եռաչափ գծանկարներն ու անիմացիաները սովորաբար շատ ավելի բարդ են:

Zdog- ը կեղծ-3D փորձառություններ կառուցելու համար գրադարան է, որոնք հիմնականում բնույթով հարթ են: Այն կոչվում է կեղծ-3D, քանի որ չնայած այն նկարագրում է իր գծագրերը 3D տարածքում, դրանք դրանք տալիս է որպես հարթ ձևեր: Այն օգտագործում է տեսողական հնարքներ ՝ 2D օբյեկտները 3D տեսք հաղորդելու համար: Արդյունքն իսկապես հետաքրքիր է: Անիմացիան դիտելիս այն ամբողջովին եռաչափ է թվում, բայց երբ սքրինշոթ է արվում, դա հստակ հարթ պատկեր է: Ահա մեկ օրինակ. Պտտվող Mario ցուցադրությունը:

Քանի որ մատուցումները 2D են, Zdog- ը կարող է մատուցել Canvas- ին կամ SVG- ին: Zdog- ը ֆանտաստիկ տարբերակ է պարզ օբյեկտների 3D անիմացիաների համար, հատկապես, եթե այդ ակտիվները ներառում են հարթ դիզայնի ասպեկտներ: Մշակողները, ովքեր ցանկանում են 3D անիմացիա, բայց չեն ցանկանում ներքաշվել 3D գրաֆիկական շարժիչների բարդ աշխարհում, կարող են Zdog- ը համարժեք լուծում գտնել: Բացի այդ, կենտրոնանալով հարթ պատկերների վրա, Zdog- ը կարող է իրեն թույլ տալ շատ ավելի պարզ ինտերֆեյս և շատ ավելի բարձր կատարողականություն, քան պահանջվում էր բարդ գրաֆիկական պատկերների 3D մատուցման համար:

Այն չունի խաղային շարժիչի այնպիսի տարրեր, ինչպիսիք են ակտիվների կառավարումը և բախումների հայտնաբերումը, ուստի անհրաժեշտ կլինի փաթաթել խաղի շարժիչի մեջ կամ ձեռքով խնամված այդ նկատառումները: Սա նշանակում է, որ Zdog- ը հավանաբար լավագույնն է վայրէջքի էջերում մեկուսացված 3D անիմացիաների համար:

11. Snap.svg

Snap.svg- ն ասում է, որ դա հեշտացնում է «ձեր SVG ակտիվների հետ աշխատանքը նույնքան հեշտ, որքան jQuery- ը DOM- ի հետ աշխատանքը»: Հնարավոր է, որ jQuery տեղեկանքից կարողանաք ասել, որ Snap.svg- ը մի փոքր ավելի հին է, բայց դրա API- ն իրեն այնքան հեշտ է զգում, որքան jQuery- ը, և դա բավականին հզոր բան է:

Snap.svg- ն ունի մաքուր և պարզ API ձեր հիմնական SVG տարրն ընտրելու և դրանում տարրեր նկարելու համար: Այն առավելագույնս համապատասխանում է այն ծրագրավորողներին, ովքեր փնտրում են արագ լուծում SVG- ների անիմացիայի համար: Դա հատկապես լավ տարբերակ է, եթե ձեր անիմացիաները պարզ են, և դուք շատ գիտելիքներ չունեք անիմացիոն շարժիչների մասին: Չնայած այն որոշակիորեն թվագրված է, բայց, անշուշտ, չպետք է անտեսվի, քանի որ դա կարող է լինել ձեր SVG- ների հետ աշխատելու ամենադյուրին ճանապարհը:

Snap.svg- ն թարմացնում է իր պարզությունը: Այն նպատակ ունի ընտրելու և աշխատելու SVG- ների հետ աշխատելու գործում և չի փորձում ավելին լինել: Snap- ը այստեղ կարելի է համատեղել գրաֆիկական այլ գրադարանների հետ `SVG- ներ նկարելու և մատուցելու համար: Լավ է նաև, եթե առկա SVG- ներ ունեք, և ցանկանում եք նրանց հետ աշխատելու հեշտ միջոց:

Այս հոդվածն ի սկզբանե տպագրվել է net ամսագրում:

Նախորդ Հոդվածը