Ինչպես կենդանացնել խորանարդը js-ում ստեղնաշարի սլաքներով: Առասպելների ոչնչացում. CSS անիմացիաներ ընդդեմ. JavaScript. Մեջք՝ նետաձգություն
«Անիմացիա» տերմինով մենք ամենից հաճախ նկատի ունենք անիմացիոն ֆիլմերը՝ մանկուց մեր սիրելի «մուլտֆիլմերը»։ Բայց եթե նայեք Բառարան, ապա իմանում ենք, որ ֆրանսերենից թարգմանաբար նշանակում է «վերածնունդ», «անիմացիան»։ Եվ ահա պարզվում է, որ այդ արժեքը զարմանալիորեն ճշգրիտ է ոչ միայն կինոարդյունաբերության, այլեւ վեբ տեխնոլոգիաների համար։
Տարբեր անիմացիոն էֆեկտների օգտագործումը (անցումներ, շարժումներ, փոխակերպումներ և այլն) զգալիորեն «աշխուժացնում» է կայքը, թույլ է տալիս վերահսկել օգտատիրոջ ուշադրությունը՝ նրան անցնելով անհրաժեշտ տարրին և տալով որոշակի տեսողական հուշումներ։
Անիմացիայի մասին խոսելիս չի կարելի չնշել Դիսնեյի անիմատորների կողմից ձևակերպված հայտնի 12 սկզբունքները, որոնց կիրառումը չափազանց կարևոր է անիմացիոն էֆեկտների ողջամիտ և որակյալ օգտագործման համար։
Խոսելով տեխնոլոգիաների մասին, որոնք ապահովում են անիմացիայի օգտագործումը վեբ էջերում, կան մի քանիսը, բայց թերևս դրանցից ոչ մեկն այնքան հզոր չէ, որքան . Մինչև մի քանի տարի առաջ Flash անիմացիոն տեխնոլոգիան ահռելի մրցակից էր և շատ տարածված: Բայց հիմա կարծես այդպես է լավագույն տարիներըհետևում և այն աստիճանաբար փոխարինվում է կայքերի էջերից ավելի հզոր և ճկուն Java սկրիպտներով։ Եվ եթե որոշել եք լրջորեն օգտագործել անիմացիան ձեր կայքում, ապա պետք է գրազ գալ JavaScript-ի վրա: Իսկ գրադարանի ողջամիտ ընտրություն կատարելու համար կատարեցի այսօրվա ստուգատեսը։
Dynamics.js Ես հավանաբար կսկսեմ Dynamics.js-ից: Սա լուրջ և հզոր գրադարան է, որը թույլ է տալիս ստեղծել ֆիզիկապես հավատալի անիմացիա (օրինակ՝ մի կետի ներդաշնակ թուլացած տատանումները գլխավոր էջկայք): Գրադարանը կարող է կառավարել ցանկացած DOM տարրի հատկությունները: Dynamics.js-ն օգտագործվում է մենյու, կոճակներ, առաջընթացի գծեր, մարկերներ ստեղծելու համար: Այս դեպքում հասանելի են պարամետրերի լայն տեսականի, ինչպիսիք են հաճախականությունը, խոնավացման գործակիցը, գործընթացի առաձգականությունը կամ տեւողությունը բնութագրող պարամետրերը և այլն:
Չե՞ք կարող այս տարի մասնակցել #ChromeDevSummit-ին: Տեսեք ողջ բովանդակությունը (և ավելին) ուղիղ հեռարձակմամբ կամ միացեք ձեր հասակակիցներին CDS Extended միջոցառմանը մոտակայքում տեղակայված վայրում: Ավելին իմանալու համար այցելեք Chrome Dev Summit 2019 կայքը:
CSS ընդդեմ JavaScript անիմացիաներիՓոլը դիզայնի և կատարողականության պաշտպան է
Ավետարանում է Chrome-ը և բջջային ցանցը Google-ի Մշակողների հետ կապերի թիմում:
Համացանցում անիմացիաներ ստեղծելու երկու հիմնական եղանակ կա՝ CSS-ով և JavaScript-ով: Որ մեկը դուք կընտրեք, իսկապես կախված է ձեր նախագծի մյուս կախվածություններից և ինչ տեսակի էֆեկտներից եք փորձում հասնել:
TL; DR- Օգտագործեք CSS անիմացիաներ ավելի պարզ «մեկ կրակոցով» անցումների համար, օրինակ՝ UI տարրի վիճակները փոխելու համար:
- Օգտագործեք JavaScript անիմացիաներ, երբ ցանկանում եք ունենալ առաջադեմ էֆեկտներ, ինչպիսիք են թռիչքը, կանգառը, դադարը, հետ շրջելը կամ դանդաղեցնելը:
- Եթե դուք ընտրում եք անիմացիա JavaScript-ով, օգտագործեք Web Animations API-ն կամ ժամանակակից շրջանակը, որը ձեզ հարմար է:
Հիմնական անիմացիաների մեծ մասը կարող է ստեղծվել կամ CSS-ով կամ JavaScript-ով, սակայն ջանքերի քանակն ու ժամանակը տարբերվում են (տես նաև CSS vs JavaScript Performance): Յուրաքանչյուրն ունի իր դրական և բացասական կողմերը, բայց սրանք լավ ուղեցույցներ են.
- Օգտագործեք CSS, երբ դուք ունեք ավելի փոքր, ինքնամփոփ վիճակներ UI տարրերի համար: CSS անցումները և անիմացիաները իդեալական են նավիգացիոն մենյու կողքից ներս բերելու կամ գործիքի հուշում ցուցադրելու համար: Դուք կարող եք վերջում օգտագործել JavaScript-ը վիճակները կառավարելու համար, բայց հենց անիմացիաները կլինեն ձեր CSS-ում:
- Օգտագործեք JavaScript, երբ քեզ պետք էզգալի վերահսկողություն ձեր անիմացիաների վրա: Web Animations API-ն ստանդարտների վրա հիմնված մոտեցում է, որն այսօր հասանելի է ժամանակակից բրաուզերների մեծ մասում: Սա ապահովում է իրական օբյեկտներ, որոնք իդեալական են բարդ օբյեկտի վրա հիմնված ծրագրերի համար: JavaScript-ը նաև օգտակար է, երբ ձեզ անհրաժեշտ է դադարեցնել, դադարեցնել, դանդաղեցնել կամ հակադարձել ձեր անիմացիաները:
- Օգտագործեք requestAnimationFrame-ն անմիջապես, երբ ցանկանում եք ձեռքով կազմակերպել մի ամբողջ տեսարան: Սա JavaScript-ի առաջադեմ մոտեցում է, բայց կարող է օգտակար լինել, եթե դուք խաղ եք կառուցում կամ նկարում եք HTML կտավի վրա:
Այլապես, եթե դուք արդեն օգտագործում եք JavaScript-ի շրջանակ, որը ներառում է անիմացիոն ֆունկցիոնալությունը, օրինակ՝ jQuery-ի .animate() մեթոդի կամ GreenSock-ի TweenMax-ի միջոցով, ապա կարող եք ընդհանուր առմամբ ավելի հարմար գտնել այն ձեր անիմացիաների համար:
Անիմացիա CSS-ովCSS-ով անիմացիան էկրանին ինչ-որ բան շարժելու ամենապարզ միջոցն է: Այս մոտեցումը նկարագրվում է այսպես դեկլարատիվ, քանի որ դուք նշում եք, թե ինչ կցանկանայիք տեղի ունենալ:
Ստորև բերված է մի քանի CSS, որը տեղափոխում է տարրը 100px երկու X և Y առանցքներում: Դա արվում է օգտագործելով CSS անցում, որը նախատեսված է 500ms . Երբ տեղափոխման դասը ավելացվում է, փոխակերպման արժեքը փոխվում է, և անցումը սկսվում է:
Box ( փոխակերպում: translate(0, 0); անցում. փոխակերպում 500ms; ) .box.move (translate: translate(100px, 100px);)
Բացի անցման տևողությունից, կան տարբերակներ մեղմացում, որն ըստ էության այնպիսին է, ինչպիսին է անիմացիան: Թուլացման մասին լրացուցիչ տեղեկությունների համար տե՛ս «Թեթեւացման հիմունքները» ուղեցույցը:
Եթե, ինչպես վերը նշված հատվածում, դուք ստեղծում եք առանձին CSS դասեր՝ ձեր անիմացիաները կառավարելու համար, ապա կարող եք օգտագործել JavaScript՝ յուրաքանչյուր անիմացիան միացնելու և անջատելու համար.
Box.classList.add («տեղափոխել»);
Դա անելը լավ հավասարակշռություն է ապահովում ձեր հավելվածների համար: Դուք կարող եք կենտրոնանալ JavaScript-ի միջոցով վիճակի կառավարման վրա և պարզապես համապատասխան դասեր սահմանել թիրախային տարրերի վրա՝ թողնելով զննարկիչին կառավարել անիմացիաները: Եթե դուք գնում եք այս ճանապարհով, կարող եք լսել տարրի անցումային իրադարձությունները, բայց միայն այն դեպքում, եթե կարողանաք հրաժարվել ավելի հին տարբերակների աջակցությունից: Internet Explorer; 10-րդ տարբերակն առաջին տարբերակն էր, որն աջակցում էր այս իրադարձություններին: Բոլոր մյուս բրաուզերները որոշ ժամանակ աջակցել են միջոցառմանը:
Անցման ավարտին լսելու համար պահանջվող JavaScript-ն ունի հետևյալ տեսքը.
varbox = document.querySelector(".box"); box.addEventListener ("transitionend", onTransitionEnd, false); ֆունկցիա onTransitionEnd() ( // Կառավարել անցման ավարտը: )
Բացի CSS անցումներից օգտվելուց, դուք կարող եք նաև օգտագործել CSS անիմացիաներ, որոնք թույլ են տալիս շատ ավելի մեծ վերահսկողություն ունենալ անիմացիայի առանձին առանցքային կադրերի, տևողության և կրկնությունների վրա:
Նշում. Եթե դուք նոր եք անիմացիաներում, ապա առանցքային կադրերը ձեռքով նկարված անիմացիաների հին տերմին են: Անիմատորները հատուկ կադրեր կստեղծեին գործողության մի հատվածի համար, որը կոչվում է առանցքային շրջանակներ, որոնք ֆիքսում էին այնպիսի բաներ, ինչպիսին է ինչ-որ շարժման ամենածայրահեղ հատվածը, իսկ հետո նրանք սկսում էին նկարել բոլոր առանձին կադրերը առանցքային կադրերի միջև: Մենք այսօր ունենք նմանատիպ գործընթաց CSS անիմացիաների հետ, որտեղ մենք բրաուզերին հրահանգում ենք, թե ինչ արժեքներ պետք է ունենան CSS հատկությունները տվյալ կետերում, և այն լրացնում է բացերը:Դուք կարող եք, օրինակ, տուփը նույն ձևով կենդանացնել անցումներով, բայց այնպես անել, որ այն շարժվի առանց որևէ օգտվողի փոխազդեցության, ինչպիսին է սեղմելը, և անսահման կրկնություններով: Կարող եք նաև միաժամանակ փոխել բազմաթիվ հատկություններ.
Box ( /* Ընտրեք անիմացիան */ animation-name: moveBox; /* Անիմացիայի տևողությունը */ animation-duration: 1300ms; /* Քանի անգամ ենք ուզում, որ անիմացիան գործարկվի */ animation-iteration-count: անսահման; /* Ստիպում է անիմացիան հակադարձել յուրաքանչյուր կենտ կրկնության դեպքում */ animation-direction: alternate; % (փոխակերպում՝ թարգմանել (100px, 100px); անթափանցիկություն՝ 0.2; ) 100% (փոխակերպում՝ թարգմանել (30px, 30px); անթափանցիկություն՝ 0.8;)
CSS անիմացիաներով դուք ինքնին սահմանում եք անիմացիան՝ անկախ թիրախային տարրից և օգտագործում եք animation-name հատկությունը՝ ընտրելու համար անհրաժեշտ անիմացիան:
Եթե ցանկանում եք, որ ձեր CSS անիմացիաներն աշխատեն ավելի հին բրաուզերների վրա, ապա ձեզ հարկավոր է ավելացնել վաճառողի նախածանցները: Շատ գործիքներ կարող են օգնել ձեզ ստեղծել ձեզ անհրաժեշտ CSS-ի նախածանցային տարբերակները, ինչը թույլ է տալիս գրել առանց նախածանցի տարբերակը ձեր սկզբնական ֆայլերում:
Անիմացե՛ք JavaScript-ով և Web Animations API-ովJavaScript-ով անիմացիաներ ստեղծելը համեմատաբար ավելի բարդ է, քան CSS անցումներ կամ անիմացիաներ գրելը, բայց սովորաբար այն ծրագրավորողներին զգալիորեն ավելի մեծ ուժ է տալիս: Դուք կարող եք օգտագործել Web Animations API-ն՝ կա՛մ CSS-ի հատուկ հատկությունները շարժելու համար, կա՛մ կոմպոզիցիոն էֆեկտներ ստեղծելու համար:
Անոտացիա. Պարզ օրինակ՝ դեղին գույնի գունաթափման մեթոդ: Անիմացիա JavaScript գրադարաններով: Ավելին բարդ օրինակՏեղափոխել և չափափոխել: CSS անցումներ.
Գունաթափման հիմքում ընկած սկզբունքն այն է, որ մարող տարրի ֆոնի գույնը սահմանվում է դեղին, այնուհետև քայլերի որոշակի հաջորդականությամբ նրա գույնը վերադառնում է իր սկզբնական գույնին: Այսպիսով, եթե սկզբնական ֆոնի գույնը կարմիր էր, ապա գույնն այնուհետև դրվում է դեղին, այնուհետև նարնջագույն-դեղին, ապա նարնջագույն, ապա կարմիր-նարնջագույն և այնուհետև կարմիր: Օգտագործված քայլերի քանակը որոշում է, թե որքան սահուն է տեղի ունենում գունային փոփոխությունը, և քայլերի միջև ընկած ժամանակը որոշում է, թե որքան երկար է տևում գույնի փոփոխությունը: Գույնը փոխելիս կարող եք օգտագործել մի օգտակար փաստ CSS-ից. գույնը կարող է սահմանվել որպես սովորական թվերի եռակի կամ տասնվեցական տող: Այսպիսով, #FF0000 (կարմիր գույնը) կարող է սահմանվել նաև որպես rgb(255,0,0): Հինգ քայլով դեղինից կարմիրի անցնելը նշանակում է, հետևաբար, rgb(255,255,0) (դեղին) rgb(255,0,0) անցնել հետևյալ հինգ քայլերով.
rgb (255,255.0) rgb (255,192.0) rgb (255,128.0) rgb (255.64.0) rgb (255.0.0)
Ավելի բարդ օրինակ՝ տեղափոխում և չափափոխումՉնայած դեղին ֆեյդ մեթոդը անիմացիոն է, այն որոշ չափով ձանձրալի է: Երբ մարդկանց մեծ մասը մտածում է անիմացիայի մասին, նրանք սովորաբար նկատի ունեն շարժումը: Հետաքրքիր տեխնիկան օգտատիրոջն ազդարարելու համար, որ ինչ-որ բան տեղի է ունեցել՝ առանց նրանց աշխատանքի ընթացքը ընդհատելու, անմոդայիկ հաղորդագրության մեջ է: Alert() երկխոսության ցուցադրման փոխարեն, որը պահանջում է օգտվողից սեղմել OK, նախքան նրանք կարողանան շարունակել, տեղադրեք հաղորդագրությունը պարզապես լողացող div-ի մեջ էջի վրա, որն աննկատ մնում է այնտեղ, մինչև այն ստանա հաստատումը: Երկրորդը բավական է հետաքրքիր բանապա հնարավոր է, որ օգտագործողը վերադառնա այն հաղորդագրությանը, որի համար նա հաստատել է այն նորից կարդալու ցանկությունը: Այսպիսով, եկեք իրականացնենք լողացող հաղորդագրություն, որը սեղմելիս «փլուզվում է» էկրանի անկյունում, այնուհետև կտտացնելիս կարող է վերականգնվել: Դուք կարող եք դիտել նման «փլուզվող հաղորդագրության» մի փոքրիկ ցուցադրություն (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html)՝ գաղափար ստանալու համար։
Եթե դուք լուրջ անիմացիոն աշխատանք եք կատարում կամ ինչ-որ լուրջ JavaScript աշխատանք, գրեթե միշտ արժե օգտագործել JavaScript գրադարանը: Սա թույլ կտա Ձեզ ստեղծել ցանկալի տեսք օգտատերերի համար՝ առանց անհանգստանալու անիմացիան կատարելու համար անհրաժեշտ մաթեմատիկական բարդությունների մասին: (Վերևում տեսնելով առաջին օրինակը, դուք այժմ գիտեք, թե ինչպես կատարել հաշվարկները և ինչպես օգտագործել setInterval-ը, բայց դուք կխնայեք ժամանակ և ջանք՝ օգտագործելով պատրաստի լուծումները:)
Վերևի ցուցադրական օրինակը օգտագործում է jQuery գրադարան(http: Ըստ էության, դուք պետք է անեք հետևյալը.
jQuery-ի միջոցով անիմացիան շատ հեշտ է. պարզապես օգտագործեք . animate() և տրամադրեք անիմացիայի ցանկալի վերջնական արդյունքը (և որքան ժամանակ այն պետք է աշխատի).
$(ourObject).animate(( լայնություն՝ «20px», բարձրություն՝ «20px», վերև՝ «20px», աջ՝ «20px», լուսանցքԱջ՝ «0px», անթափանցիկություն՝ «0.2»), 300);
Ֆունկցիան վերցնում է ourObject-ը և 300 միլիվայրկյանում նրա լայնությունն ու բարձրությունը փոխում է 20px, վերևի և աջ դիրքերը՝ 20px, լուսանցքի աջ ոճի հատկությունը՝ 0px, իսկ խտությունը (պատկերի խտությունը աջակցող բրաուզերներում) մինչև 20%։ Հետո դա ուղղակի ոճով ծրագրավորման խնդիր է
Բարեւ Ձեզ! Այս ձեռնարկում մենք կանդրադառնանք JavaScript-ի անիմացիաներին: JavaScript անիմացիան օգտագործվում է այնտեղ, որտեղ այն չի տեղավորվում:
Օրինակ՝ անիմացիան բարդ ուղու երկայնքով, ժամանակի հատուկ ֆունկցիայով, որը դուրս է գալիս բեզիերի կորերից, կտավի վրա: Այն նաև օգտագործվում է ավելի հին IE-ում անիմացիայի համար: Չնայած ասեմ, որ ռեսուրսները խնայելու համար, հատկապես շարժական սարքերը, նախընտրելի է օգտագործել CSS անիմացիաներ։
Նախ, եկեք սահմանենք անիմացիան: Այսպիսով, HTML/CSS-ի առումով անիմացիան DOM տարրի ոճի աստիճանական փոփոխություն է: Օրինակ՝ style.left կոորդինատը 0px-ից 100px մեծացնելը տարրը տեղափոխում է ձախ:
Եթե մեթոդի կիրառմամբ ձախ հատկությունը մեծացնեք 0-ից մինչև 100՝ վայրկյանում կատարելով 50 փոփոխություն, ապա այն հարթ շարժման տեսք կունենա։ Նույն սկզբունքը, ինչ կինոարդյունաբերության մեջ. 24 կամ ավելի setInterval զանգեր վայրկյանում բավարար են անիմացիայի համար:
Անիմացիայի կոդը այսպիսի տեսք ունի.
Var fps = 50; // 50 կադր վայրկյանում var ժմչփ = setInterval(function() ( if (time out) clearInterval (ժմչփ); այլապես մի փոքր ավելացրեք ձախ) , 1000 / fps)
Ահա ավելի ամբողջական անիմացիոն կոդի օրինակ.
varstart = date.now(); // պահպանել մեկնարկի ժամանակը var timer = setInterval(function() ( // հաշվարկել, թե որքան ժամանակ է անցել անիմացիայի մեկնարկից var timePass = Date.now() - start; if (timePassed >= 2000) ( clearInterval(timer) ; // ավարտ 2 վայրկյան վերադառնալուց հետո; ) // նկարում է անիմացիայի վիճակը, որը համապատասխանում է timePass draw(timePassed); ), 20); // մինչդեռ timePassed-ն անցնում է 0-ից մինչև 2000 // ձախը անցնում է 0-ից մինչև 400px ֆունկցիայի նկարում (timePass) (train.style.left = timePass / 5 + «px»; )
requestAnimationFrameԵթե դուք ունեք մեկից ավելի նման setInterval, բայց մի քանիսը կոդի տարբեր վայրերում, ապա զննարկիչը պետք է աշխատի էջի հետ մեկից ավելի անգամ՝ նույն 20 ms-ի ընթացքում: Բայց բացի setInterval-ից, կան նաև այլ գործողություններ, օրինակ՝ էջը պտտելը, որը նույնպես պետք է նկարել։
Եթե բոլոր վերագծագրման գործողությունները կատարվեն ինքնուրույն, ապա մեծ կրկնակի աշխատանք կկատարվի։
Կատարման առումով շատ ավելի լավն է բոլոր վերագծագրերը խմբավորել մեկում և դրանք կենտրոնացնել, բոլորը միասին:
Դա անելու համար JavaScript շրջանակները, որոնք աջակցում են անիմացիան, ունեն մեկ ժամանակաչափ.
SetInterval(function() ( /* նկարել բոլոր անիմացիաները */ ), 20);
Բոլոր անիմացիաները, որոնք գործարկում է նման շրջանակը, ավելացվում են գլոբալին ընդհանուր ցուցակ, և 20 ms-ն մեկ անգամ մեկ ժմչփ ստուգում է այն, սկսում է ընթացիկները, ջնջում է ավարտված
Ժամանակակից զննարկիչները, բացի IE9-ից, աջակցում են Animation-ի ժամանակային ստանդարտին, որը հետագա քայլ է այս ուղղությամբ: Այն թույլ է տալիս համաժամեցնել բոլոր անիմացիաները ներկառուցված էջի թարմացման մեխանիզմների հետ: Այսինքն՝ ոչ միայն մերը, այլ նաև CSS անիմացիաները և բրաուզերի այլ վերագծումները կխմբավորվեն։
Այս դեպքում գրաֆիկական արագացուցիչը կօգտագործվի հնարավորինս արդյունավետ, և բացառվում է էջի նույն հատվածների կրկնակի մշակումը։ Սա նշանակում է, որ պրոցեսորի ծանրաբեռնվածությունը ավելի քիչ կլինի, իսկ անիմացիան ինքնին կդառնա ավելի հարթ:
Դրա համար օգտագործվում է requestAnimationFrame ֆունկցիան:
Ֆունկցիայի շարահյուսություն.
VarrequestId = requestAnimationFrame (հետադարձ զանգ)
Նման զանգը նախատեսում է հետադարձ զանգի գործառույթը, որպեսզի այն աշխատի հենց որ զննարկիչը հարմար գտնի անիմացիան կատարելու համար:
Եթե դուք պլանավորեք ինչ-որ գծագրություն հետադարձ զանգի մեջ, ապա այն կխմբավորվի այլ requestAnimationFrame-ի և ներքին դիտարկիչի վերագծումների հետ:
Գործարկումը չեղարկելու համար պահանջվում է requestId-ում վերադարձված արժեքը.
// չեղարկել վերը նշված կատարման հետ կանչը cancelAnimationFrame(requestId);
Հետ կանչելու ֆունկցիան վերցնում է մեկ արգումենտ՝ էջի բեռնումը սկսելուց հետո անցած ժամանակը, performance.now() կանչելու արդյունքը։
Որպես կանոն, հետ կանչի մեկնարկը տեղի է ունենում շատ շուտով: Եթե պրոցեսորը մեծ ծանրաբեռնվածություն ունի կամ նոութբուքի մարտկոցը գրեթե դատարկ է, ապա ավելի քիչ:
Եթե գործարկեք այս կոդը, կտեսնեք բացեր AnimationFrame-ի առաջին 20 հարցումների միջև: Որպես կանոն, դա 10-20 ms է, բայց երբեմն ավելի ու ավելի քիչ: Սա օպտիմալ հաճախականությունանիմացիաներ բրաուզերի տեսանկյունից:
varprev = performance.now(); var անգամ = 0; requestAnimationFrame(գործառույթի չափում(ժամանակ) (document.body.insertAdjacentHTML("foreEnd", Math.floor(ժամանակ - նախորդ) + ""); նախորդ = ժամանակ; եթե (անգամ++< 10) requestAnimationFrame(measure); })
Անիմացիոն ֆունկցիա՝ հիմնված requestAnimationFrame-ի վրա.
// Ոչ ոքի նկարելու ֆունկցիա// Անիմացիայի տևողության տևողության ֆունկցիան animate(ձայնագրություն, տեւողություն) ( var start = performance.now(); requestAnimationFrame(function animate(time) ( // որոշեք, թե որքան ժամանակ է անցել անիմացիայի մեկնարկից var timePassed = time - start; / / հնարավոր է աննշան ժամկետ, այս դեպքում, ֆիքսեք վերջը, եթե (timePassed > duration) timePassed = տևողություն; // նկարեք անիմացիայի վիճակը տվյալ պահին timePassed draw (timePassed); // եթե անիմացիայի ժամանակը չի ավարտվել, պլանավորեք մեկ այլ շրջանակ, եթե (timePassed< duration) { requestAnimationFrame(animate); } }); }
Անիմացիոն կառուցվածքՀիմնվելով requestAnimationFrame-ի վրա՝ դուք կարող եք կառուցել շատ ավելի հզոր, բայց միևնույն ժամանակ պարզ գործառույթանիմացիաներ.
Անիմացիան ունի երեք հիմնական պարամետր.
Տևողություն Անիմացիայի ընդհանուր տևողությունը՝ ms-ով: Օրինակ՝ 1000. timing(timeFraction) Ժամկետային ֆունկցիա, որը անալոգիայով կհաշվարկի անիմացիայի վիճակը ընթացիկ ժամանակից։
Որպես մուտքագրում այն ստանում է անընդհատ աճող ժամանակի ֆրակցիա՝ 0-ից 1, որտեղ 0-ը նշանակում է անիմացիայի հենց սկիզբը, իսկ 1-ը՝ դրա ավարտը:
Դրա արդյունքը պետք է լինի անիմացիայի ամբողջականության արժեքը, որը Bezier կորերի վրա CSS անցումներում համապատասխանում է y կոորդինատին:
Նաև անցումային-ժամկետային ֆունկցիայի անալոգիայով պետք է բավարարվեն հետևյալ պայմանները.
- ժամանակը (0) = 0
- timing(1) = 1…Այսինքն, անիմացիան սկսվում է կետից (0,0) – զրոյական ժամանակ և զրոյական առաջընթաց և ավարտվում է (1, 1) – լրիվ դրույքն անցել է, և գործընթացը ավարտվել է: Օրինակ՝ ուղիղ ֆունկցիան նշանակում է զարգացման միասնական գործընթաց՝ ֆունկցիա գծային (timeFraction) (վերադարձի ժամանակի ֆրակցիա; )
- Նրա ժամանակացույցը.
- Ինչպես տեսնում եք, նրա գրաֆիկը ճիշտ նույնն է, ինչ անցումային-ժամկետային ֆունկցիան՝ գծային, և էֆեկտը լրիվ նույնն է: Կան այլ, ավելի հետաքրքիր տարբերակներ, որոնց մենք կանդրադառնանք հետագա:
Հենց այս ֆունկցիան է իրականում կատարում անիմացիան։
Օրինակ, կարող եք տարր տեղափոխել.
Ֆունկցիա նկարել(առաջընթաց) (train.style.left = առաջընթաց + «px»; ) Սկզբունքորեն, ցանկացած տարբերակ հնարավոր է, դուք կարող եք կենդանացնել ցանկացած բան և ցանկացած ձևով, որը ցանկանում եք:
Ժամանակի գործառույթներՎերևում մենք տեսանք ամենապարզ, գծային ժամանակի ֆունկցիան:
Դիտարկենք շարժման անիմացիայի օրինակներ՝ օգտագործելով տարբեր ժամանակաչափեր:
իշխանության nԱհա ևս մեկ պարզ դեպք՝ առաջընթաց դեպի n-ի հզորություն։ Հատուկ դեպքեր՝ քառակուսի, խորանարդ ֆունկցիաներ և այլն։
Քառակուսի ֆունկցիայի համար.
Function quad (առաջընթաց) (վերադարձ Math.pow (առաջընթաց, 2))
Քառակուսային ֆունկցիայի գրաֆիկ.
Աստիճանի բարձրացումը ազդում է արագացման վրա։ Օրինակ, 5-րդ աստիճանի գրաֆիկը. 
Գործառույթ:
Գործառույթ circ(timeFraction) ( վերադարձ 1 - Math.sin(Math.acos(timeFraction)) )
Ժամանակացույց: 
Այս ֆունկցիան աշխատում է աղեղի սկզբունքով՝ սկզբում «քաշում ենք թելը», հետո «կրակում»։
Ի տարբերություն նախորդ գործառույթների, այս մեկը կախված է լրացուցիչ պարամետր x, որը «առաձգականության գործակիցն է»: Այն որոշում է այն հեռավորությունը, որին «քաշվում» է աղեղնաշարը։
Հետադարձ ֆունկցիա (x, timeFraction) ( վերադարձ Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )
Գրաֆիկ x = 1,5: 
Պատկերացրեք, որ դուք բաց եք թողնում գնդակը, այն ընկնում է հատակին, մի քանի անգամ ցատկում և կանգնում:
Բեռնման ֆունկցիան նույնն է անում, բայց հակառակը. ցատկումն անմիջապես սկսվում է:
Այս գործառույթը մի փոքր ավելի բարդ է, քան նախորդները և օգտագործում է գործակիցներ.
Ֆունկցիայի ցատկում (ժամանակի կոտորակ) ( (var a = 0, b = 1, արդյունք; 1; a += b, b /= 2) (եթե (ժամանակի կոտորակ >= (7 - 4 * ա) / 11) (վերադարձ - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) )
Էլաստիկ անիմացիաԱյս ֆունկցիան կախված է լրացուցիչ x պարամետրից, որը սահմանում է սկզբնական տիրույթը:
Elastic ֆունկցիան (x, timeFraction) ( return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos (20 * Math.PI * x / 3 * timeFraction) )
Գրաֆիկ x=1.5-ի համար: 
Այսպիսով, մենք ունենք ժամանակավոր գործառույթների հավաքածու:
Դրանց օգտագործումը կոչվում է «easeIn»:
Երբեմն անհրաժեշտ է ցույց տալ անիմացիան հակառակ ռեժիմով: Այս ազդեցությունն ունեցող ֆունկցիայի փոխակերպումը կոչվում է «easeOut»:
easeOut«easeOut» ռեժիմում ժամանակի արժեքը հաշվարկվում է բանաձևով.
Օրինակ, «easeOut» ռեժիմում ցատկում գործառույթը.
// նորմալ ֆունկցիայի ցատկում (ժամանակի կոտորակ) ( (var a = 0, b = 1, արդյունք; 1; a += b, b /= 2) (եթե (ժամանակի կոտորակ >= (7 - 4 * ա) / 11) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) // փոխարկիչ easeOut ֆունկցիայի makeEaseOut(ժամանակ) ( վերադարձի ֆունկցիա ( timeFraction) ( return 1 - timing (1 - timeFraction); ) ) var bounceEaseOut = makeEaseOut (bounce);
Ամբողջական օրինակ.
Այս գրաֆիկում դուք կարող եք տեսնել easeOut-ի փոխակերպումը, որը փոխում է ֆունկցիայի վարքագիծը. 
Եթե կա անիմացիոն էֆեկտ, ինչպիսին է ցատկումը, այն կցուցադրվի վերջում, ոչ թե սկզբում (կամ հակառակը՝ սկզբում, ոչ վերջում):
Կարմիրը ցույց է տալիս նորմալ տարբերակը, իսկ կապույտը՝ easeOut:
- Սովորաբար անիմացվող օբյեկտը սկզբում դանդաղորեն ցատկում է ներքևում, իսկ հետո, վերջում, կտրուկ հասնում է վերևին ...
- Իսկ easeOut-ից հետո նա սկզբում վեր է ցատկում, իսկ հետո կամաց ցած է ցատկում:
Եվ կարող եք նաև այնպես անել, որ կարող եք էֆեկտը ցույց տալ մուլտիպլիկացիայի և՛ սկզբում, և՛ վերջում։ Համապատասխան փոխակերպումը կոչվում է «easeInOut»:
Դրա կոդը այսպիսի տեսք ունի.
Եթե (ժամանակկոտորակ 1) ժամանակի կոտորակ = 1; // ընթացիկ անիմացիայի վիճակը var progress = options.timing(timeFraction) options.draw(progress); եթե (ժամանակի ֆրակցիա< 1) { requestAnimationFrame(animate); } }); }
Հիմնական պարամետրեր.
- տեւողությունը - անիմացիայի տեւողությունը ms-ով:
- Ժամկետը ֆունկցիա է, որը որոշում է անիմացիայի յուրաքանչյուր կադրի վիճակը: Ստանում է ժամանակի մասը 0-ից 1, վերադարձնում է անիմացիայի ավարտը 0-ից 1:
- draw-ը ֆունկցիա է, որը գծում է անիմացիայի վիճակը 0-ից 1:
Այս հատկությունը կարող է բարելավվել, օրինակ՝ ավելացնելով անիմացիայի վերջում կանչվող ամբողջական հետադարձ զանգ:
Մենք դիտարկել ենք ժամանակի և easeOut, easeInOut փոխակերպումների մի շարք օրինակներ, որոնք թույլ են տալիս դիվերսիֆիկացնել դրանք: Ի տարբերություն մենք չենք սահմանափակվում Bezier կորերով, ամեն ինչ կարելի է իրականացնել:
Նույնը վերաբերում է նկարչական ֆունկցիային:
Այս անիմացիայի իրականացումն ունի կիրառման երեք հիմնական ուղղություն.
- Ոչ ստանդարտ առաջադրանքներ և պահանջներ, որոնք չեն տեղավորվում CSS-ի շրջանակներում:
- Աջակցություն IE9-ին:
- Գրաֆիկա, նկարչություն կտավի վրա։
Դուք կարող եք օգտագործել JavaScript-ը բարդ անիմացիաներ ստեղծելու համար, բայց չսահմանափակվել հետևյալ տարրերով.
- Հրավառություն
- Մթնեցնող էֆեկտ
- Փլուզվել կամ ընդլայնվել:
- Անցնել էջ կամ էջից դուրս գալ
- Օբյեկտների շարժումներ
Ձեզ կարող է հետաքրքրել JavaScript-ի վրա հիմնված գործող անիմացիոն գրադարանը՝ Script.Aculo.us:
Այս հոդվածը տալիս է հիմնական հասկացողություն, թե ինչպես օգտագործել JavaScript-ը անիմացիա ստեղծելու համար:
JavaScript-ը կարող է օգտագործվել բազմաթիվ DOM տարրեր տեղափոխելու համար ( , կամ որևէ այլ HTML տարր) էջերում՝ ըստ տրամաբանական հավասարման կամ ֆունկցիայի որոշված օրինաչափության։
JavaScript-ն ապահովում է հետևյալ երկու գործառույթները, որոնք հաճախ օգտագործվում են անիմացիոն ծրագրերում.
- setTimeout (գործառույթ, տեւողություն) - Այս ֆունկցիան կանչում է ֆունկցիան միլիվայրկյանների տեւողությունից հետո այն կանչելու պահից:
- setInterval(function, duration) - Այս ֆունկցիան կանչում է ֆունկցիա յուրաքանչյուր տևողության միլիվայրկյանից հետո:
- clearTimeout(setTimeout_variable) - Այս ֆունկցիան ստիպում է ջնջել setTimeout() ֆունկցիաների կողմից սահմանված ցանկացած ժամանակաչափ:
JavaScript-ը կարող է նաև սահմանել օբյեկտի մի քանի ատրիբուտներ, ներառյալ նրա դիրքը էկրանին: Դուք կարող եք սահմանել հատկանիշը գագաթև օբյեկտի ձախ կողմում՝ այն էկրանի ցանկացած վայրում տեղադրելու համար: Ահա նրա շարահյուսությունը.
// Սահմանեք հեռավորությունը էկրանի ձախ եզրից: object.style.left = հեռավորությունը պիքսելներով կամ կետերով; կամ // Նշված հեռավորությունը էկրանի վերևից: object.style.top = հեռավորությունը պիքսելներով կամ կետերով;
Ձեռքի անիմացիաԱյսպիսով, եկեք իրականացնենք մեկը պարզ անիմացիաօգտագործելով DOM օբյեկտի հատկությունները և JavaScript գործառույթները հետևյալ կերպ. Հետևյալ ցանկը պարունակում է տարբեր DOM մեթոդներ:
- Մենք օգտագործում ենք JavaScript ֆունկցիան getElementById() DOM օբյեկտը ստանալու և այնուհետև այն վերագրելու գլոբալ փոփոխականին imgObj:
- Մենք նախաստորագրել ենք init() ֆունկցիան, որպեսզի սկզբնավորվի imgObj-ը, որտեղ մենք դրել ենք նրա դիրքը և ձախ ատրիբուտները:
- Պատուհանի բեռնման ժամանակ մենք կանչում ենք սկզբնավորման գործառույթը:
- Ի վերջո, մենք կանչում ենք moveRight() ֆունկցիան՝ ձախ լուսանցքը 10 պիքսելով մեծացնելու համար։ Դուք կարող եք նաև այն սահմանել բացասական արժեք՝ այն ձախ տեղափոխելու համար:
Փորձեք հետևյալ օրինակը.
Անիմացիա JavaScript-ում 
Սեղմեք ներքևի կոճակը՝ պատկերն աջ տեղափոխելու համար
Ավտոմատ անիմացիաՎերևի օրինակում մենք տեսանք, թե ինչպես է պատկերը շարժվում դեպի աջ յուրաքանչյուր սեղմումով: Մենք կարող ենք ավտոմատացնել այս գործընթացը՝ օգտագործելով setTimeout() ֆունկցիան JavaScript-ում հետևյալ կերպ.
- MoveRight() ֆունկցիան կանչում է setTimeout() ֆունկցիան՝ դիրքը սահմանելու համար imgObj.
- Մենք ավելացրեցինք նոր առանձնահատկություն stop() ժմչփը մաքրելու համար, գործառույթների հավաքածու setTimeout() և օբյեկտը դրեց իր սկզբնական դիրքի վրա:
Փորձեք հետևյալ կոդի օրինակը.
Անիմացիա JavaScript-ում
Սեղմեք ստորև բերված կոճակները՝ անիմացիան մշակելու համար
Շրջվել մկնիկի հետ իրադարձությունԱհա մի պարզ օրինակ, որը ցույց է տալիս պատկերի վերափոխումը մկնիկի իրադարձությունով:
Տեսնենք, թե ինչ ենք մենք օգտագործում հետևյալ օրինակում.
- Այս էջի բեռնման ժամանակ «եթե» հայտարարությունը ստուգում է պատկերի օբյեկտի առկայությունը: Եթե պատկերի օբյեկտը հասանելի չէ, այս բլոկը չի կատարվի:
- Image() կոնստրուկտորը ստեղծում և նախապես բեռնում է պատկերի նոր օբյեկտ՝ image1 անունով:
- src հատկությունը սահմանվում է ֆայլի անվան համար արտաքին պատկեր, որը կոչվում է /images/html.gif:
- Նմանապես, մենք ստեղծել ենք image2 օբյեկտ և այս օբյեկտին վերագրել ենք /images/http.gif:
- # (հեշ նշան) նիշը անջատում է հղումը, որպեսզի զննարկիչը չփորձի նավարկելու URL-ը սեղմելիս: Այս հղումը պատկեր է:
- OnMouseOver իրադարձությունների մշակիչը կանչվում է, երբ օգտատերը մկնիկը տեղափոխում է հղման վրայով, իսկ onMouseOut իրադարձությունների մշակիչը կանչվում է, երբ օգտագործողի մկնիկը հեռանում է գծից (պատկերից):
- Երբ մկնիկը շարժվում է պատկերի վրայով, պատկերը փոխվում է առաջին պատկերից երկրորդը: Երբ մկնիկը հեռանում է պատկերից, ցուցադրվում է բնօրինակ պատկերը:
- Երբ մկնիկը հեռացվի հղումից, էկրանին կհայտնվի բնօրինակ html.gif պատկերը:
Սավառնեք պատկերի վրա՝ արդյունքը տեսնելու համար
