Պատկերացրեք սա. դուք միանում եք նոր նախագծի, սուզվում եք կոդերի բազայի մեջ և առաջին մի քանի ժամվա ընթացքում դուք հայտնաբերում եք ինչ-որ անհավանական ծանոթ բան: Սփռված ոճերի թերթերում՝ դուք կգտնեք մի քանի @keyframes սահմանումներ նույն հիմնական անիմացիաների համար: Երեք տարբեր խամրող էֆեկտներ, երկու կամ երեք սլայդների տարբերակներ, մի քանի խոշորացման անիմացիաներ և առնվազն երկու տարբեր պտտվող անիմացիաներ, քանի որ, լավ, ինչու ոչ: @keyframes իմպուլս { սկսած { սանդղակ՝ 1; } դեպի { սանդղակ՝ 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { սանդղակ՝ 1; } 10%, 40% { սանդղակ՝ 1.2; } }
Եթե այս սցենարը ծանոթ է թվում, դուք մենակ չեք: Տարբեր նախագծերի իմ փորձի համաձայն, ամենահետևողական արագ հաղթանակներից մեկը, որ կարող եմ մատուցել, հիմնական շրջանակների համախմբումն ու ստանդարտացումն է: Այն դարձել է այնքան հուսալի օրինաչափություն, որ ես այժմ անհամբեր սպասում եմ այս մաքրմանը որպես իմ առաջին առաջադրանքներից մեկը ցանկացած նոր կոդի բազայի վրա: Քաոսի հետևում գտնվող տրամաբանությունը Այս ավելորդությունը կատարյալ իմաստ ունի, երբ մտածում ես դրա մասին: Մենք բոլորս օգտագործում ենք միևնույն հիմնարար անիմացիաները մեր ամենօրյա աշխատանքում՝ խամրում, սլայդներ, խոշորացումներ, պտույտներ և այլ սովորական էֆեկտներ: Այս անիմացիաները բավականին պարզ են, և հեշտ է ստեղծել @keyframes-ի արագ սահմանում, որպեսզի գործն ավարտվի: Առանց կենտրոնացված անիմացիոն համակարգի, մշակողները, բնականաբար, գրում են այս առանցքային կադրերը զրոյից՝ չգիտենալով, որ նմանատիպ անիմացիաներ արդեն գոյություն ունեն կոդերի բազայի այլ վայրերում: Սա հատկապես տարածված է բաղադրիչի վրա հիմնված ճարտարապետություններում աշխատելիս (ինչը մեզանից շատերն անում են այս օրերին), քանի որ թիմերը հաճախ զուգահեռ են աշխատում հավելվածի տարբեր մասերում: Արդյունքը. Անիմացիոն քաոս. Փոքր խնդիրը Հիմնական կադրերի կրկնօրինակման հետ կապված ամենաակնառու խնդիրները մշակման ժամանակի վատնումն են և կոդերի անհարկի փչելը: Բազմաթիվ առանցքային շրջանակների սահմանումները նշանակում են մի քանի վայրեր, որոնք պետք է թարմացվեն, երբ պահանջները փոխվեն: Կարո՞ղ եք կարգավորել ձեր խամրած անիմացիայի ժամանակը: Դուք պետք է որոնեք յուրաքանչյուր օրինակ ձեր կոդերի բազայում: Ցանկանու՞մ եք ստանդարտացնել մեղմացման գործառույթները: Հաջողություն գտնելու բոլոր տատանումները: Սպասարկման կետերի այս բազմապատկումը նույնիսկ պարզ անիմացիոն թարմացումները դարձնում է ժամանակատար խնդիր: Ավելի մեծ խնդիր Հիմնական կադրերի այս կրկնօրինակումը մակերեսի տակ թաքնված շատ ավելի նենգ խնդիր է ստեղծում՝ գլոբալ շրջանակի ծուղակը: Նույնիսկ բաղադրիչի վրա հիմնված ճարտարապետությունների հետ աշխատելիս, CSS հիմնական շրջանակները միշտ սահմանվում են գլոբալ շրջանակում: Սա նշանակում է, որ բոլոր հիմնական կադրերը վերաբերում են բոլոր բաղադրիչներին: Միշտ. Այո, ձեր անիմացիան պարտադիր չէ, որ օգտագործի ձեր բաղադրիչում սահմանված հիմնական կադրերը: Այն օգտագործում է վերջին հիմնական կադրերը, որոնք համապատասխանում են նույն անվանմանը, որոնք բեռնված են գլոբալ շրջանակում: Քանի դեռ ձեր բոլոր հիմնական կադրերը նույնական են, սա կարող է չնչին խնդիր թվալ: Բայց այն պահին, երբ դուք ցանկանում եք հարմարեցնել անիմացիան որոշակի օգտագործման դեպքի համար, դուք դժվարության մեջ եք, կամ ավելի վատ՝ դուք կլինեք դրանց պատճառողը: Կամ ձեր անիմացիան չի աշխատի, քանի որ ձերից հետո բեռնված մեկ այլ բաղադրիչ, որը վերագրանցում է ձեր հիմնական կադրերը, կամ ձեր բաղադրիչը բեռնվում է վերջին և պատահաբար փոխում է անիմացիայի վարքագիծը յուրաքանչյուր այլ բաղադրիչի համար՝ օգտագործելով այդ առանցքային կադրի անունը, և դուք կարող եք նույնիսկ չհասկանալ դա: Ահա մի պարզ օրինակ, որը ցույց է տալիս խնդիրը. .բաղադրիչ-մեկ { /* բաղադրիչի ոճերը */ անիմացիա. զարկերակային 1s ease-in-out անսահման այլընտրանք; }
/* այս @keyframes սահմանումը չի աշխատի */ @keyframes իմպուլս { սկսած { սանդղակ՝ 1; } դեպի { սանդղակ՝ 1.1; } }
/* կոդում ավելի ուշ... */
.բաղադրիչ-երկու { /* բաղադրիչի ոճերը */ անիմացիա՝ զարկերակային 1s ease-in-out infinite; }
/* այս առանցքային շրջանակները կկիրառվեն երկու բաղադրիչների վրա */ @keyframes իմպուլս { 0%, 20%, 100% { սանդղակ՝ 1; } 10%, 40% { սանդղակ՝ 1.2; } }
Երկու բաղադրիչներն էլ օգտագործում են նույն անիմացիայի անվանումը, բայց երկրորդ @keyframes սահմանումը վերագրում է առաջինը: Այժմ և՛ բաղադրիչ-մեկը, և՛ բաղադրիչը երկու կօգտագործեն երկրորդ հիմնական կադրերը՝ անկախ նրանից, թե որ բաղադրիչն է սահմանել հիմնական կադրերը: Տես Pen Keyframes Tokens - Demo 1 [forked] by Amit Sheen: Ամենավատ մասը. Սա հաճախ հիանալի է աշխատում տեղական զարգացման մեջ, բայց արտադրության մեջ առեղծվածային կերպով խախտում է, երբ կառուցման գործընթացները փոխում են ձեր ոճաթերթերի բեռնման կարգը: Դուք հայտնվում եք անիմացիաներով, որոնք տարբեր կերպ են վարվում՝ կախված նրանից, թե որ բաղադրիչներն են բեռնված և ինչ հաջորդականությամբ: Լուծում. Միասնական առանցքային շրջանակներ Այս քաոսի պատասխանը զարմանալիորեն պարզ է՝ կանխորոշված դինամիկ առանցքային կադրեր, որոնք պահվում են ընդհանուր ոճի թերթիկում: Փոխարենը թույլ տալու, որ յուրաքանչյուր բաղադրիչ սահմանի իր սեփական անիմացիաները, մենք ստեղծում ենք կենտրոնացված առանցքային կադրեր, որոնք լավ փաստաթղթավորված են և հեշտ էօգտագործման, պահպանման և ձեր նախագծի հատուկ կարիքներին հարմարեցված: Մտածեք դրա մասին որպես առանցքային կադրերի նշաններ: Ինչպես մենք օգտագործում ենք նշաններ գույների և տարածության համար, և մեզանից շատերն արդեն օգտագործում են նշաններ անիմացիոն հատկությունների համար, ինչպիսիք են տևողության և հեշտացման գործառույթները, ինչու՞ չօգտագործել նշաններ նաև առանցքային կադրերի համար: Այս մոտեցումը բնականաբար կարող է ինտեգրվել ցանկացած ընթացիկ նախագծային նշանների աշխատանքային հոսքի հետ, որն օգտագործում եք՝ միաժամանակ լուծելով և՛ փոքր խնդիրը (կոդերի կրկնօրինակում), և՛ ավելի մեծ խնդիրը (համաշխարհային շրջանակի հակասություններ): Գաղափարը պարզ է. ստեղծել ճշմարտության մեկ աղբյուր մեր բոլոր ընդհանուր անիմացիաների համար: Այս ընդհանուր ոճի թերթիկը պարունակում է խնամքով մշակված առանցքային կադրեր, որոնք ծածկում են մեր նախագծի իրականում օգտագործվող անիմացիոն օրինաչափությունները: Այլևս չի կարելի գուշակել, թե արդյոք մեր կոդերի բազայում ինչ-որ տեղ արդեն գոյություն ունի fade անիմացիան: Այլևս այլ բաղադրիչներից անիմացիաների պատահական վերագրում չկա: Բայց ահա բանալին. սրանք պարզապես ստատիկ պատճենահանման անիմացիաներ չեն: Դրանք նախագծված են դինամիկ և հարմարեցնելու համար CSS-ի հատուկ հատկությունների միջոցով, ինչը թույլ է տալիս մեզ պահպանել հետևողականությունը՝ միաժամանակ ունենալով ճկունություն՝ հարմարեցնելու անիմացիաները հատուկ օգտագործման դեպքերին, օրինակ, եթե ձեզ անհրաժեշտ է մի փոքր ավելի մեծ «զարկերակային» անիմացիա մեկ տեղում: Առաջին Keyframes նշանի կառուցում Առաջին ցածր կախված պտուղներից մեկը, որին մենք պետք է անդրադառնանք, «fade-in» անիմացիան է: Իմ վերջին նախագծերից մեկում ես գտա ավելի քան մեկ տասնյակ առանձին «fade-in» սահմանումներ, և այո, նրանք բոլորն էլ պարզապես անթափանցիկություն էին հաղորդում 0-ից 1: Այսպիսով, եկեք ստեղծենք նոր ոճաթերթ, այն անվանենք kf-tokens.css, ներմուծենք այն մեր նախագծի մեջ և տեղադրենք մեր հիմնական կադրերը՝ համապատասխան մեկնաբանություններով դրա ներսում: /* keyframes-tokens.css */
/* * Fade In - մարել մուտքի անիմացիա * Օգտագործում՝ անիմացիա՝ kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { սկսած { անթափանցիկություն՝ 0; } դեպի { անթափանցիկություն՝ 1; } }
Այս մեկ @keyframes հայտարարությունը փոխարինում է բոլոր այն ցրված fade-in անիմացիաները մեր կոդի բազայում: Մաքուր, պարզ և գլոբալ կիրառելի: Եվ հիմա, երբ մենք ունենք այս նշանը սահմանված, մենք կարող ենք այն օգտագործել ցանկացած բաղադրիչից մեր նախագծի ողջ ընթացքում. .մոդալ { անիմացիա՝ kf-fade-in 0.3s ease-out; }
.tooltip { անիմացիա՝ kf-fade-in 0.2s ease-in-out; }
.ծանուցում { անիմացիա՝ kf-fade-in 0.5s ease-out; }
Տես Pen Keyframes Tokens - Demo 2 [forked] by Amit Sheen: Նշում. մենք օգտագործում ենք kf- նախածանց մեր բոլոր @keyframes անուններում: Այս նախածանցը ծառայում է որպես անվանատարածք, որը կանխում է անվանման հակասությունները նախագծում առկա անիմացիաների հետ և անմիջապես պարզեցնում է, որ այս առանցքային կադրերը գալիս են մեր հիմնական կադրերի նշանների ֆայլից: Դինամիկ սլայդի պատրաստում Kf-fade-in առանցքային կադրերը հիանալի են աշխատում, քանի որ դրանք պարզ են և քիչ տեղ կա ամեն ինչ խառնելու համար: Այլ անիմացիաներում, սակայն, մենք պետք է շատ ավելի դինամիկ լինենք, և այստեղ մենք կարող ենք օգտագործել CSS մաքսային հատկությունների հսկայական ուժը: Այստեղ է, որ առանցքային կադրերի նշաններն իսկապես փայլում են՝ համեմատած ցրված ստատիկ անիմացիաների հետ: Եկեք վերցնենք ընդհանուր սցենար՝ «սլայդ-ներ» անիմացիաներ: Բայց որտեղի՞ց ներս սահեք: 100px աջից? 50% ձախից? Արդյո՞ք այն պետք է մտնի էկրանի վերևից: Կամ գուցե ներքևից լողալ: Այնքան շատ հնարավորություններ, բայց յուրաքանչյուր ուղղության և յուրաքանչյուր փոփոխության համար առանձին առանցքային շրջանակներ ստեղծելու փոխարեն, մենք կարող ենք կառուցել մեկ ճկուն նշան, որը հարմարվում է բոլոր սցենարներին. /* * Slide In - ուղղորդված սլայդի անիմացիա * Օգտագործեք --kf-slide-from ուղղությունը վերահսկելու համար * Կանխադրված՝ սահում է ձախից (-100%) * Օգտագործումը: * անիմացիա՝ kf-slide-in 0.3s ease-out; * --kf-slide-ից՝ -100px 0; // սահեցրեք ձախից * --kf-slide-ից՝ 100px 0; // սահեցրեք աջից * --kf-slide-ից՝ 0 -50px; // սահեցրեք վերևից */
@keyframes kf-slide-in { սկսած { թարգմանել՝ var(--kf-slide-from, -100% 0); } դեպի { թարգմանել՝ 0 0; } }
Այժմ մենք կարող ենք օգտագործել այս մեկ @keyframes նշանը սլայդի ցանկացած ուղղության համար՝ պարզապես փոխելով --kf-slide-from custom հատկությունը. .կողային տող { անիմացիա՝ kf-slide-in 0.3s ease-out; /* Օգտագործում է լռելյայն արժեքը՝ սլայդներ ձախից */ }
.ծանուցում { անիմացիա՝ kf-slide-in 0.4s ease-out; --kf-slide-ից՝ 0 -50px; /* սահեցրեք վերևից */ }
.մոդալ { անիմացիա: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-ից՝ 50px 50px; /* սահեցրեք ներքևից աջ */ }
Այս մոտեցումը մեզ տալիս է անհավատալի ճկունություն՝ պահպանելով հետևողականությունը: Մեկ առանցքային շրջանակի հռչակագիր, անսահման հնարավորություններ: Տես Pen Keyframes Tokens - Demo 3 [forked] by Amit Sheen: Եվ եթե մենք ցանկանում ենք մեր անիմացիաներն էլ ավելի ճկուն դարձնել՝ թույլ տալով նաև «սահող» էֆեկտներ, մենք կարող ենք.պարզապես ավելացրեք --kf-slide-ի հատուկ հատկությունը, որը նման է նրան, ինչ կտեսնենք հաջորդ բաժնում: Երկկողմանի խոշորացում առանցքային կադրեր Մեկ այլ տարածված անիմացիա, որը կրկնօրինակվում է նախագծերում, «խոշորացման» էֆեկտներն են: Անկախ նրանից՝ դա կենաց հաղորդագրությունների նուրբ մեծացում է, մոդալների համար դրամատիկ խոշորացում, թե վերնագրերի մասշտաբի նվազեցման մեղմ էֆեկտ, խոշորացման անիմացիաներն ամենուր են: Յուրաքանչյուր մասշտաբի արժեքի համար առանձին առանցքային կադրեր ստեղծելու փոխարեն, եկեք ստեղծենք kf-zoom առանցքային կադրերի մեկ ճկուն հավաքածու.
/* * Մեծացնել - մասշտաբային անիմացիա * Օգտագործեք --kf-zoom-from և --kf-zoom-to սանդղակի արժեքները կառավարելու համար * Կանխադրված՝ խոշորացում 80%-ից մինչև 100% (0,8-ից 1) * Օգտագործումը: * անիմացիա՝ kf-zoom 0.2s ease-out; * --kf-zoom-ից՝ 0,5; --kf-մեծացում-մինչև՝ 1; // խոշորացում 50%-ից մինչև 100% * --kf-մեծացում-սկսած՝ 1; --kf-մեծացում՝ 0; // խոշորացում 100%-ից մինչև 0% * --kf-մեծացում-սկսած՝ 1; --kf-zoom-to՝ 1.1; // խոշորացում 100%-ից մինչև 110% */
@keyframes kf-zoom { սկսած { սանդղակ՝ var(--kf-zoom-from, 0.8); } դեպի { սանդղակ՝ var (--kf-zoom-to, 1); } }
Մեկ սահմանմամբ մենք կարող ենք հասնել մեզ անհրաժեշտ խոշորացման ցանկացած փոփոխության. .կենաց { անիմացիա: kf-slide-in 0.2s, kf-zoom 0.4s հեշտացում; --kf-slide-ից՝ 0 100%; /* սահեցրեք վերևից */ /* Օգտագործում է լռելյայն խոշորացում. մասշտաբներ 80%-ից մինչև 100% */ }
.մոդալ { անիմացիա՝ kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-մեծացում-սկսած՝ 0; /* դրամատիկ խոշորացում 0%-ից մինչև 100% */ }
.վերնագիր { անիմացիա: kf-fade-in 2s, kf-zoom 2s հեշտացում; --kf-zoom-ից՝ 1.2; --kf-մեծացում՝ 0,8; /* մեղմ մասշտաբի իջեցում */ }
0.8-ի (80%) կանխադրվածը հիանալի աշխատում է UI տարրերի մեծ մասի համար, ինչպիսիք են կենաց հաղորդագրությունները և քարտերը, մինչդեռ այն դեռևս հեշտ է հարմարեցնել հատուկ դեպքերի համար: Տես Pen Keyframes Tokens - Demo 4 [forked] Amit Sheen-ի կողմից: Դուք կարող եք նկատել մի հետաքրքիր բան վերջին օրինակներում. մենք համատեղում ենք անիմացիաները: @keyframes նշանների հետ աշխատելու հիմնական առավելություններից մեկն այն է, որ դրանք նախագծված են միմյանց հետ անխափան ինտեգրվելու համար: Այս հարթ կոմպոզիցիան միտումնավոր է, ոչ պատահական: Մենք ավելի մանրամասն կքննարկենք անիմացիայի կոմպոզիցիան ավելի ուշ, ներառյալ այն վայրերը, որտեղ դրանք կարող են խնդրահարույց դառնալ, բայց կոմբինացիաների մեծ մասը պարզ է և հեշտ իրագործելի: Նշում. Այս հոդվածը գրելիս, և գուցե այն գրելու պատճառով, ես ինքս վերանայեցի մուտքի անիմացիայի ամբողջ գաղափարը: CSS-ի բոլոր վերջին առաջխաղացումներով հանդերձ, մեզ դեռևս դրանք ընդհանրապես պետք են: Բարեբախտաբար, Ադամ Արգայլը ուսումնասիրեց նույն հարցերը և դրանք փայլուն կերպով արտահայտեց իր բլոգում: Սա չի հակասում այստեղ գրվածին, բայց այն ներկայացնում է մի մոտեցում, որը արժե հաշվի առնել, հատկապես, եթե ձեր նախագծերը մեծապես հիմնված են մուտքի անիմացիաների վրա: Շարունակական անիմացիաներ Մինչ մուտքի անիմացիաները, ինչպիսիք են «խամրելը», «սլայդը» և «մեծացումը» տեղի են ունենում մեկ անգամ և հետո դադարում, շարունակական անիմացիաները անորոշ ժամանակով պտտվում են՝ ուշադրություն հրավիրելու կամ շարունակական գործունեությունը ցույց տալու համար: Երկու ամենասովորական շարունակական անիմացիաները, որոնց ես հանդիպում եմ, «սպին» (ցուցանիշների բեռնման համար) և «զարկերակ» (կարևոր տարրեր ընդգծելու համար): Այս անիմացիաները ներկայացնում են եզակի մարտահրավերներ, երբ խոսքը վերաբերում է առանցքային կադրերի նշաններ ստեղծելուն: Ի տարբերություն մուտքի անիմացիաների, որոնք սովորաբար անցնում են մի վիճակից մյուսը, շարունակական անիմացիաները պետք է շատ հարմարեցված լինեն իրենց վարքագծի ձևերով: The Spin Doctor Յուրաքանչյուր նախագիծ, կարծես, օգտագործում է բազմաթիվ պտտվող անիմացիաներ: Ոմանք պտտվում են ժամացույցի սլաքի ուղղությամբ, մյուսները՝ հակառակ: Ոմանք կատարում են մեկ 360 աստիճանի պտույտ, մյուսները մի քանի պտույտներ են անում ավելի արագ էֆեկտի համար: Յուրաքանչյուր փոփոխության համար առանձին առանցքային կադրեր ստեղծելու փոխարեն, եկեք կառուցենք մեկ ճկուն պտույտ, որը կարգավորում է բոլոր սցենարները.
/* * Spin - պտտվող անիմացիա * Օգտագործեք --kf-spin-from և --kf-spin-to ռոտացիայի միջակայքը վերահսկելու համար * Օգտագործեք --kf-spin-turns-ը՝ ռոտացիայի քանակությունը վերահսկելու համար * Կանխադրված՝ պտտվում է 0 աստիճանից մինչև 360 աստիճան (1 ամբողջական պտույտ) * Օգտագործումը: * անիմացիա՝ kf-spin 1s գծային անսահման; * --kf-spin-շրջադարձներ՝ 2; // 2 ամբողջական պտույտ * --kf-spin-ից՝ 0deg; --kf-spin-to: 180deg; // կես ռոտացիա * --kf-spin-ից՝ 0deg; --kf-spin-to: -360deg; // ժամացույցի սլաքի հակառակ ուղղությամբ */
@keyframes kf-spin { սկսած { պտտել՝ var(--kf-spin-from, 0deg); } դեպի { պտտել՝ calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Այժմ մենք կարող ենք ստեղծել ցանկացած պտտվող տարբերակ, որը մեզ դուր է գալիս.
.loading-spinner { անիմացիա՝ kf-spin 1s գծային անսահման; /* Օգտագործում է լռելյայն. պտտվում է 0 աստիճանից մինչև 360 աստիճան */ }
.fast-loader { անիմացիա՝ kf-spin 1.2s ease-in-out infinite alternate; --kf-spin-շրջադարձներ՝ 3; /* 3 ամբողջական պտույտ յուրաքանչյուր ուղղությամբ յուրաքանչյուր ցիկլի համար*/ }
.steped-reverse { անիմացիա՝ kf-spin 1.5s քայլեր (8) անսահման; --kf-spin-to: -360deg; /* ժամսլաքի հակառակ ուղղությամբ */ }
.subtle-wiggle { անիմացիա՝ kf-spin 2s ease-in-out infinite alternate; --kf-spin-ից՝ -16deg; --kf-spin-to: 32deg; /* շարժվել 36 աստիճան՝ -18 աստիճանից + 18 աստիճանի միջև */ }
Տես Pen Keyframes Tokens - Demo 5 [forked] by Amit Sheen: Այս մոտեցման գեղեցկությունն այն է, որ նույն առանցքային կադրերն աշխատում են պտտվող պտույտների, պտտվող պատկերակների, շարժման էֆեկտների և նույնիսկ բարդ բազմաշրջադարձ անիմացիաների համար: Զարկերակային պարադոքս Զարկերակային անիմացիաներն ավելի բարդ են, քանի որ դրանք կարող են «զարկերակել» տարբեր հատկություններ: Ոմանք իմպուլսացնում են սանդղակը, մյուսները զարկերակում են անթափանցիկությունը, իսկ որոշ զարկերակային գույնի հատկություններ, ինչպիսիք են պայծառությունը կամ հագեցվածությունը: Յուրաքանչյուր սեփականության համար առանձին առանցքային շրջանակներ ստեղծելու փոխարեն մենք կարող ենք ստեղծել առանցքային շրջանակներ, որոնք աշխատում են ցանկացած CSS հատկության հետ: Ահա իմպուլսային առանցքային շրջանակի օրինակ՝ մասշտաբի և անթափանցիկության ընտրանքներով.
/* * Pulse - զարկերակային անիմացիա * Օգտագործեք --kf-pulse-scale-from և --kf-pulse-scale-to սանդղակի տիրույթը կառավարելու համար * Օգտագործեք --kf-pulse-opacity-from և --kf-pulse-opacity-to՝ անթափանցիկության միջակայքը վերահսկելու համար * Կանխադրված՝ զարկերակ չկա (բոլոր արժեքները 1) * Օգտագործումը: * անիմացիա՝ kf-pulse 2s ease-in-out անսահման այլընտրանք; * --kf-զարկերակային մասշտաբը` 0,95-ից; --kf-զարկերակային մասշտաբը` 1,05; // սանդղակի զարկերակ * --kf-իմպուլս-անթափանցիկություն-սկսած՝ 0,7; --kf-իմպուլս-անթափանցիկություն-մինչև՝ 1; // անթափանցիկության զարկերակ */
@keyframes kf-pulse { սկսած { սանդղակ՝ var(--kf-pulse-scale-from, 1); անթափանցիկություն՝ var(--kf-pulse-opacity-from, 1); } դեպի { սանդղակ՝ var (--kf-pulse-scale-to, 1); անթափանցիկություն՝ var(--kf-pulse-papaciity-to, 1); } }
Սա ստեղծում է ճկուն զարկերակ, որը կարող է աշխուժացնել բազմաթիվ հատկություններ. .գործողության կոչ { անիմացիա՝ kf-pulse 0.6s անսահման այլընտրանք; --kf-զարկերակային-անթափանցիկություն-ից` 0,5; /* անթափանցիկության զարկերակ */ }
.notification-dot { անիմացիա՝ kf-pulse 0.6s ease-in-out infinite alternate; --kf-զարկերակային մասշտաբ-սկսած՝ 0,9; --kf-զարկերակային մասշտաբը` 1.1; /* սանդղակի զարկերակ */ }
.text-highlight { անիմացիա՝ kf-pulse 1.5s ease-out infinite; --kf-զարկերակային մասշտաբը` 0,8-ից; --kf-զարկերակային-անթափանցիկություն-ից՝ 0,2; /* մասշտաբի և անթափանցիկության զարկերակ */ }
Տես Pen Keyframes Tokens - Demo 6 [forked] by Amit Sheen: Այս մեկ kf-իմպուլսային առանցքային կադրը կարող է կարգավորել ամեն ինչ՝ ուշադրություն գրավելուց մինչև դրամատիկ շեշտադրումներ՝ միաժամանակ հեշտ հարմարեցնելով: Ընդլայնված թեթևացում Հիմնական կադրերի նշաններ օգտագործելու հիանալի բաներից մեկն այն է, թե որքան հեշտ է ընդլայնել մեր անիմացիոն գրադարանը և տրամադրել էֆեկտներ, որոնք մշակողների մեծամասնությունը չի խանգարի գրել զրոյից, օրինակ՝ առաձգական կամ ցատկում: Ահա պարզ «ցատկում» առանցքային շրջանակների նշանի օրինակ, որն օգտագործում է --kf-bounce-from custom հատկությունը՝ ցատկի բարձրությունը կառավարելու համար: /* * Bounce - բարձրացող մուտքի անիմացիա * Օգտագործեք --kf-bounce-from ցատկի բարձրությունը վերահսկելու համար * Կանխադրված՝ ցատկում 100 վժ-ից (էկրանից անջատված) * Օգտագործումը: * անիմացիա՝ kf-bounce 3s ease-in; * --kf-ցատկում-ից՝ 200px; // ցատկել 200px բարձրությունից */
@keyframes kf-bounce { 0% { թարգմանել. 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { թարգմանել՝ 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { թարգմանել. 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { թարգմանել՝ 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { թարգմանել՝ 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { թարգմանել. 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { թարգմանել՝ 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { թարգմանել՝ 0 0; անիմացիա-թայմինգ-ֆունկցիա՝ հեշտացում; } }
«Էլաստիկ»-ի նման անիմացիաները մի փոքր ավելի բարդ են առանցքային կադրերի ներսում կատարված հաշվարկների պատճառով: Մենք պետք է առանձին սահմանենք --kf-elastic-from-X-ը և --kf-elastic-from-Y-ը (երկուսն էլ ընտրովի են), և նրանք միասին թույլ են տալիս մեզ ստեղծել առաձգական մուտք էկրանի ցանկացած կետից:
/* * Elastic In - առաձգական մուտքի անիմացիա * Օգտագործեք --kf-elastic-from-X և --kf-elastic-from-Y՝ մեկնարկային դիրքը կառավարելու համար * Կանխադրված. մուտքագրում է վերևի կենտրոնից (0, -100 վժ) * Օգտագործումը: * անիմացիա՝ kf-elastic-in 2s ease-in-out, երկուսն էլ; * --kf-առաձգական-ից-X: -50px; * --kf-առաձգական-ից-Y: -200px; // մուտքագրեք (-50px, -200px) */
@keyframes kf-elastic-in { 0% { թարգմանել՝ calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { թարգմանել. }
28% { թարգմանել՝ calc(var(--kf-առաձգական--ից-X, -50vw) * 0.1312)calc (var (--kf-elastic-from-Y, 0px) * 0.1312); }
44% { թարգմանել. }
59% { թարգմանել՝ calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { թարգմանել՝ calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { թարգմանել՝ calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { թարգմանել՝ 0 0; } }
Այս մոտեցումը հեշտացնում է մեր նախագծում առաջադեմ առանցքային կադրերի վերօգտագործումը և հարմարեցումը միայն մեկ հատուկ հատկություն փոխելով:
.bounce-and-zoom { անիմացիա: kf-bounce 3s ease-in, kf-zoom 3s գծային; --kf-մեծացում-սկսած՝ 0; }
.bounce-and-slide { անիմացիա-կոմպոզիցիա՝ ավելացնել; /* Երկու անիմացիաներն էլ օգտագործում են թարգմանել */ անիմացիա: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-ից՝ -200px; }
elastic-in { անիմացիա՝ kf-elastic-in 2s ease-in-out, երկուսն էլ; }
Տես Pen Keyframes Tokens - Demo 7 [forked] by Amit Sheen: Մինչև այս պահը մենք տեսել ենք, թե ինչպես կարող ենք համախմբել հիմնական կադրերը խելացի և արդյունավետ կերպով: Իհարկե, դուք կարող եք ցանկանալ շտկել բաները, որպեսզի ավելի լավ համապատասխանեն ձեր նախագծի կարիքներին, բայց մենք լուսաբանել ենք մի քանի սովորական անիմացիաների և ամենօրյա օգտագործման դեպքերի օրինակներ: Եվ առանցքային կադրերի այս նշանների առկայության դեպքում մենք այժմ ունենք հզոր շինանյութեր՝ ամբողջ նախագծում հետևողական, պահպանվող անիմացիաներ ստեղծելու համար: Այլևս չկա կրկնվող հիմնական կադրեր, այլևս չկան գլոբալ շրջանակի հակասություններ: Պարզապես մաքուր, հարմար միջոց մեր բոլոր անիմացիոն կարիքները հոգալու համար: Բայց իրական հարցն այն է. Ինչպե՞ս ենք մենք միասին կազմում այս շինանյութերը: Ամեն ինչ միասին դնելը Մենք տեսանք, որ հիմնական առանցքային շրջանակների նշանները համադրելը պարզ է: Մեզ ոչ մի հատուկ բան պետք չէ, քան սահմանել առաջին անիմացիան, սահմանել երկրորդը, ըստ անհրաժեշտության փոփոխականները սահմանել, և վերջ: /* Fade in + slide in */ .կենաց { անիմացիա: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-ից՝ 0 40px; }
/* Մեծացնել + մարել */ .մոդալ { անիմացիա: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-մեծացում-սկսած՝ 0,7; --kf-մեծացում-մինչև՝ 1; }
/* Սահեցրեք + զարկերակ */ .ծանուցում { անիմացիա: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out անսահման այլընտրանք; --kf-slide-ից՝ -100px 0; --kf-զարկերակային մասշտաբը` 0,95-ից; --kf-զարկերակային մասշտաբը` 1,05; }
Այս համակցությունները հիանալի են աշխատում, քանի որ յուրաքանչյուր անիմացիա ուղղված է տարբեր հատկության՝ անթափանցիկություն, փոխակերպում (թարգմանել/մասշտաբ) և այլն: Բայց երբեմն լինում են կոնֆլիկտներ, և մենք պետք է իմանանք, թե ինչու և ինչպես վարվել դրանց հետ: Երբ երկու անիմացիաներ փորձում են կենդանացնել միևնույն հատկությունը, օրինակ՝ երկուսն էլ անիմացիոն մասշտաբները, կամ երկուսն էլ անթափանցիկությունը, արդյունքը չի լինի այն, ինչ դուք սպասում եք: Լռելյայնորեն, անիմացիաներից միայն մեկն է իրականում կիրառվում այդ հատկության վրա, որը վերջինն է անիմացիոն ցանկում: Սա սահմանափակում է այն բանի, թե ինչպես է CSS-ը մշակում մի քանի անիմացիաներ նույն հատկության վրա: Օրինակ, սա չի աշխատի այնպես, ինչպես նախատեսված է, քանի որ կկիրառվի միայն kf-pulse անիմացիան: .bad-combo { անիմացիա: kf-zoom 0,5 վրկ առաջ, kf-pulse 1.2s անսահման այլընտրանք; --kf-zoom-ից՝ 0,5; --kf-zoom-to՝ 1.2; --kf-զարկերակային մասշտաբը` 0,8-ից; --kf-զարկերակային մասշտաբը` 1.1; }
Անիմացիոն հավելում Միևնույն հատկության վրա ազդող բազմաթիվ անիմացիաների հետ աշխատելու ամենապարզ և ամենաուղիղ ձևը անիմացիա-կոմպոզիցիայի հատկությունն օգտագործելն է: Վերևի վերջին օրինակում kf-pulse անիմացիան փոխարինում է kf-zoom անիմացիան, այնպես որ մենք չենք տեսնի նախնական խոշորացումը և չենք ստանա ակնկալվող մասշտաբը մինչև 1.2: Կարգավորելով անիմացիա-կոմպոզիցիան ավելացնելու համար, մենք բրաուզերին ասում ենք համատեղել երկու անիմացիաները: Սա մեզ տալիս է այն արդյունքը, որը ցանկանում ենք: .բաղադրիչ-երկու { անիմացիա-կոմպոզիցիա՝ ավելացնել; }
Տես Pen Keyframes Tokens - Demo 8 [forked] Amit Sheen-ի կողմից: Այս մոտեցումը լավ է աշխատում այն դեպքերի մեծ մասի համար, երբ մենք ցանկանում ենք համատեղել ազդեցությունները նույն հատկության վրա: Այն նաև օգտակար է, երբ մենք պետք է անիմացիաները համատեղենք ստատիկ գույքի արժեքների հետ: Օրինակ, եթե մենք ունենք տարր, որն օգտագործում է translate հատկությունը՝ այն ճիշտ տեղավորելու համար, որտեղ մենք ցանկանում ենք, և այնուհետև մենք ցանկանում ենք այն անիմացիոն դարձնել kf-slide-in առանցքային կադրերով, մենք ստանում ենք տհաճ տեսանելի թռիչք՝ առանց անիմացիոն կոմպոզիցիայի: Տես Pen Keyframes Tokens - Demo 9 [forked] by Amit Sheen: Անիմացիա-կոմպոզիցիան ավելացնելու դեպքում անիմացիան սահուն կերպով համակցվում է գոյություն ունեցողի հետփոխակերպում, այնպես որ տարրը մնում է տեղում և աշխուժանում, ինչպես և սպասվում էր: Անիմացիա Stagger Բազմաթիվ անիմացիաների հետ աշխատելու մեկ այլ եղանակ է դրանք «շեղել», այսինքն՝ սկսել երկրորդ անիմացիան առաջինի ավարտից հետո: Դա լուծում չէ, որն աշխատում է յուրաքանչյուր դեպքի համար, բայց օգտակար է, երբ մենք ունենք մուտքի անիմացիա, որին հաջորդում է շարունակական անիմացիա: /* մարել + անթափանցիկության զարկերակ */ .ծանուցում { անիմացիա: kf-fade-in 2s թեթևացում, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-իմպուլս-անթափանցիկություն-մինչև` 0,5; }
Տես Pen Keyframes Tokens - Demo 10 [forked] by Amit Sheen: Պատվերի հարցեր Անիմացիաների մեծ մասը, որոնց հետ մենք աշխատում ենք, օգտագործում են փոխակերպման հատկությունը։ Շատ դեպքերում սա պարզապես ավելի հարմար է: Այն նաև ունի կատարողականի առավելություն, քանի որ փոխակերպման անիմացիաները կարող են արագացվել GPU-ով: Բայց եթե մենք օգտագործում ենք փոխակերպումներ, մենք պետք է ընդունենք, որ մեր փոխակերպումները կատարելու հաջորդականությունը կարևոր է: Շատ. Մինչ այժմ մեր հիմնական կադրերում մենք օգտագործել ենք անհատական փոխակերպումներ: Ըստ բնութագրերի, դրանք միշտ կիրառվում են ֆիքսված հերթականությամբ. սկզբում տարրը ստանում է թարգմանություն, այնուհետև պտտվում է, հետո մասշտաբավորում: Սա իմաստ ունի և այն է, ինչ մեզանից շատերն են ակնկալում: Այնուամենայնիվ, եթե օգտագործենք փոխակերպման հատկությունը, ֆունկցիաների գրման հաջորդականությունը դա այն հաջորդականությունն է, որով դրանք կիրառվում են: Այս դեպքում, եթե X առանցքի վրա ինչ-որ բան տեղափոխենք 100 պիքսել, հետո պտտենք 45 աստիճանով, դա նույնը չէ, որ նախ պտտենք 45 աստիճանով, հետո տեղափոխենք 100 պիքսել։ /* Վարդագույն քառակուսի: Նախ թարգմանել, ապա պտտել */ .example-one { փոխակերպում՝ translateX(100px) rotate(45deg); }
/* Կանաչ քառակուսի: Նախ պտտել, ապա թարգմանել */ .օրինակ-երկու { փոխակերպում՝ պտտել (45 աստիճան) translateX (100px); }
Տես Pen Keyframes Tokens - Demo 11 [forked] by Amit Sheen: Բայց փոխակերպման կարգի համաձայն, բոլոր անհատական փոխակերպումները՝ այն ամենը, ինչ մենք օգտագործել ենք առանցքային կադրերի նշանների համար, տեղի են ունենում նախքան փոխակերպման գործառույթները: Դա նշանակում է, որ այն ամենը, ինչ դուք սահմանել եք փոխակերպման հատկության մեջ, տեղի կունենա անիմացիաներից հետո: Բայց եթե սահմանեք, օրինակ, թարգմանել kf-spin առանցքային կադրերի հետ միասին, թարգմանությունը տեղի կունենա անիմացիայից առաջ: Դեռ շփոթված ?! Սա հանգեցնում է իրավիճակների, երբ ստատիկ արժեքները կարող են տարբեր արդյունքներ առաջացնել նույն անիմացիայի համար, ինչպես հետևյալ դեպքում.
/* Ընդհանուր անիմացիա երկու սպինների համար */ .մանող { անիմացիա՝ kf-spin 1s գծային անսահման; }
/* Pink spinner. թարգմանել նախքան պտտելը (անհատական փոխակերպում) */ .մանող-վարդագույն { թարգմանել՝ 100% 50%; }
/* Կանաչ մանող. պտտել, ապա թարգմանել (գործառույթների կարգը) */ .մանող-կանաչ { փոխակերպում՝ թարգմանել (100%, 50%); }
Տես Pen Keyframes Tokens - Demo 12 [forked] by Amit Sheen: Դուք կարող եք տեսնել, որ առաջին պտույտը (վարդագույն) ստանում է թարգմանություն, որը տեղի է ունենում kf-spin-ի պտույտից առաջ, ուստի այն նախ շարժվում է դեպի իր տեղը և հետո պտտվում: Երկրորդ պտտվողը (կանաչ) ստանում է translate() ֆունկցիա, որը տեղի է ունենում անհատական փոխակերպումից հետո, ուստի տարրը սկզբում պտտվում է, այնուհետև շարժվում է իր ընթացիկ անկյան համեմատ, և մենք ստանում ենք այդ լայն ուղեծրի էֆեկտը: Ոչ, սա վրիպակ չէ: Դա ընդամենը մեկն է այն բաներից, որոնք մենք պետք է իմանանք CSS-ի մասին և հիշենք բազմաթիվ անիմացիաների կամ բազմաթիվ փոխակերպումների հետ աշխատելիս: Անհրաժեշտության դեպքում կարող եք նաև ստեղծել kf-spin-alt առանցքային կադրերի լրացուցիչ հավաքածու, որոնք պտտում են տարրերը՝ օգտագործելով rotate() ֆունկցիան: Կրճատված շարժում Եվ մինչ մենք խոսում ենք այլընտրանքային առանցքային կադրերի մասին, մենք չենք կարող անտեսել «առանց անիմացիայի» տարբերակը: Keyframes-ի նշանների օգտագործման ամենամեծ առավելություններից մեկն այն է, որ հասանելիությունը կարելի է թխել, և դա իրականում բավականին հեշտ է անել: Մատչելիությունը նկատի ունենալով մեր առանցքային կադրերը նախագծելով՝ մենք կարող ենք ապահովել, որ օգտատերերը, ովքեր նախընտրում են շարժումների կրճատում, ստանան ավելի հարթ, ավելի քիչ շեղող փորձ՝ առանց լրացուցիչ աշխատանքի կամ կոդի կրկնօրինակման: «Նվազեցված շարժման» ճշգրիտ իմաստը կարող է մի փոքր փոխվել մեկ անիմացիայից մյուսը և նախագծից նախագիծ, բայց այստեղ պետք է հիշել մի քանի կարևոր կետ. Հիմնական կադրերի խլացում Թեև որոշ անիմացիաներ կարող են մեղմացնել կամ դանդաղեցնել, կան ուրիշներ, որոնք պետք է ամբողջությամբ անհետանան, երբ պահանջվում է կրճատված շարժում: Զարկերակային անիմացիաները լավ օրինակ են: Որպեսզի համոզվենք, որ այս անիմացիաները չեն աշխատում կրճատված շարժման ռեժիմում, մենք կարող ենք դրանք պարզապես փաթեթավորել համապատասխան մեդիա հարցումով:
@media (prefers-reduced-motion. no-preference) { @keyfrmaes kf-pulse { սկսած { սանդղակ՝ var(--kf-pulse-scale-from, 1); անթափանցիկություն՝ var(--kf-pulse-opacity-from, 1); } դեպի { սանդղակ՝ var (--kf-pulse-scale-to, 1); անթափանցիկություն:var (--kf-pulse-opacity-to, 1); } } }
Սա երաշխավորում է, որ օգտատերերը, ովքեր նախընտրում են կրճատել շարժումը, չեն տեսնի անիմացիան և կստանան իրենց նախընտրությանը համապատասխանող փորձ: Ակնթարթային մուտք Կան որոշ առանցքային կադրեր, որոնք մենք չենք կարող պարզապես հեռացնել, օրինակ՝ մուտքի անիմացիաները: Արժեքը պետք է փոխվի, պետք է կենդանացնի; հակառակ դեպքում տարրը ճիշտ արժեքներ չի ունենա: Բայց կրճատված շարժման դեպքում սկզբնական արժեքից այս անցումը պետք է լինի ակնթարթային: Դրան հասնելու համար մենք կսահմանենք հիմնական կադրերի լրացուցիչ շարք, որտեղ արժեքը անմիջապես ցատկում է վերջնական վիճակին: Սրանք դառնում են մեր լռելյայն հիմնական կադրերը: Այնուհետև մենք կավելացնենք սովորական առանցքային կադրերը մեդիա հարցման մեջ՝ prefers-reduced-motion-ը սահմանված է առանց նախապատվության, ինչպես նախորդ օրինակում: /* ակնթարթորեն միացրեք շարժումը նվազեցնելու համար */ @keyframes kf-zoom { սկսած, մինչև { սանդղակ՝ var (--kf-zoom-to, 1); } }
@media (prefers-reduced-motion. no-preference) { /* Օրիգինալ խոշորացման առանցքային կադրեր */ @keyframes kf-zoom { սկսած { սանդղակ՝ var(--kf-zoom-from, 0.8); } դեպի { սանդղակ՝ var (--kf-zoom-to, 1); } } }
Այս կերպ օգտատերերը, ովքեր նախընտրում են կրճատված շարժումը, կտեսնեն, որ տարրը ակնթարթորեն հայտնվում է իր վերջնական վիճակում, մինչդեռ մնացած բոլորը ստանում են անիմացիոն անցումը: Փափուկ մոտեցում Կան դեպքեր, երբ մենք իսկապես ցանկանում ենք պահպանել որոշակի շարժում, բայց շատ ավելի մեղմ և հանգիստ, քան բնօրինակ անիմացիան: Օրինակ, մենք կարող ենք փոխարինել ցատկող մուտքը մեղմ երանգով:
@keyframes kf-bounce { /* Փափուկ խամրում նվազեցված շարժման համար */ }
@media (prefers-reduced-motion. no-preference) { @keyframes kf-bounce { /* Օրիգինալ վերադարձի առանցքային կադրեր */ } }
Այժմ կրճատված շարժում ունեցող օգտատերերը դեռևս արտաքին տեսքի զգացում են ունենում, բայց առանց ցատկումների կամ առաձգական անիմացիայի ինտենսիվ շարժման: Շինարարական բլոկների առկայության դեպքում հաջորդ հարցն այն է, թե ինչպես դրանք դարձնել իրական աշխատանքային հոսքի մաս: Ճկուն առանցքային կադրեր գրելը մի բան է, բայց դրանք հուսալի դարձնելը մեծ նախագծում պահանջում է մի քանի ռազմավարություն, որոնք ես ստիպված էի սովորել դժվարին ճանապարհով: Իրականացման ռազմավարություններ և լավագույն փորձ Երբ մենք ունենանք առանցքային շրջանակների նշանների ամուր գրադարան, իրական մարտահրավերն այն է, թե ինչպես դրանք ներդնել առօրյա աշխատանքի մեջ:
Գայթակղությունն այն է, որ միանգամից գցվեն բոլոր հիմնական կադրերը և խնդիրը հայտարարվի լուծված, բայց գործնականում ես հասկացել եմ, որ լավագույն արդյունքները գալիս են աստիճանական ընդունումից: Սկսեք ամենատարածված անիմացիաներից, ինչպիսիք են fade կամ slide: Սրանք հեշտ հաղթանակներ են, որոնք անմիջական արժեք են ցույց տալիս՝ առանց մեծ վերաշարադրումներ պահանջելու: Անվանումը մեկ այլ կետ է, որն արժանի է ուշադրության: Համապատասխան նախածանցը կամ անվանատարածքը ակնհայտ է դարձնում, թե որ անիմացիաներն են նշաններ և որոնք են տեղական միանվագ: Այն նաև կանխում է պատահական բախումները և օգնում է թիմի նոր անդամներին մեկ հայացքով ճանաչել ընդհանուր համակարգը: Փաստաթղթերը նույնքան կարևոր են, որքան ինքնին կոդը: Նույնիսկ առանցքային կադրերի յուրաքանչյուր նշանի վերևում գտնվող կարճ մեկնաբանություն կարող է խնայել ժամեր ուշ գուշակելու համար: Մշակողը պետք է կարողանա բացել նշանների ֆայլը, սկանավորել իրենց անհրաժեշտ էֆեկտը և պատճենել օգտագործման օրինակը ուղիղ իրենց բաղադրիչի մեջ: Ճկունությունն այն է, ինչն արժե այս մոտեցումը ջանքեր գործադրել: Բացահայտելով խելամիտ անհատական հատկությունները, մենք թիմերին հնարավորություն ենք տալիս հարմարեցնել անիմացիան՝ չխախտելով համակարգը: Միաժամանակ աշխատեք չբարդացնել։ Տրամադրեք կարևոր կոճակները և պահեք մնացածի կարծիքը: Ի վերջո, հիշեք մատչելիությունը: Յուրաքանչյուր անիմացիայի կարիք ունի կրճատված շարժման այլընտրանք, բայց շատերն ունեն: Այս ճշգրտումները վաղ թխելը նշանակում է, որ մենք երբեք ստիպված չենք լինի դրանք վերազինել ավելի ուշ, և դա ցույց է տալիս խնամքի մակարդակ, որը մեր օգտատերերը նկատում են, նույնիսկ եթե նրանք երբեք չեն նշում այդ մասին:
Իմ փորձից ելնելով, որ առանցքային կադրերի խորհրդանիշները որպես մեր նախագծային նշանների աշխատանքային հոսքի մաս դիտարկելը այն է, ինչը ստիպում է նրանց կպչել: Երբ դրանք տեղադրվեն, նրանք դադարում են հատուկ էֆեկտներ զգալ և դառնում են դիզայնի լեզվի մի մասը՝ արտադրանքի շարժման և արձագանքման բնական ընդլայնում: Փաթաթում Շարժապատկերները կարող են լինել ինտերֆեյսների կառուցման ամենաուրախ մասերից մեկը, բայց առանց կառուցվածքի դրանք կարող են դառնալ նաև հիասթափության ամենամեծ աղբյուրներից մեկը: Հիմնական կադրերը որպես նշաններ դիտարկելով՝ դուք վերցնում եք մի բան, որը սովորաբար խառնաշփոթ է և դժվար է կառավարել, և այն վերածում եք հստակ, կանխատեսելի համակարգի: Իրական արժեքը միայն մի քանի տող կոդի պահպանումը չէ: Այն վստահության մեջ է, որ երբ դուք օգտագործում եք fade, սլայդ, խոշորացում կամ պտտում, դուք հստակ գիտեք, թե ինչպես է այն վարվելու նախագծում: Այն ճկունության մեջ է, որը բխում է մաքսային հատկություններից՝ առանց անվերջ տատանումների քաոսի: Եվ դա հիմքում ներկառուցված հասանելիության մեջ է, այլ ոչ թե որպես ավելացվածհետին միտք. Ես տեսել եմ, որ այս գաղափարներն աշխատում են տարբեր թիմերում և կոդերի տարբեր հիմքերում, և օրինաչափությունը միշտ նույնն է: Հենց որ նշանները տեղադրվեն, առանցքային շրջանակները դադարում են լինել հնարքների ցրված հավաքածու և դառնում են դիզայնի լեզվի մի մասը: Նրանք ստիպում են արտադրանքը ավելի միտումնավոր, ավելի հետևողական և ավելի կենդանի զգալ: Եթե այս հոդվածից վերցնում եք մի բան, թող դա լինի հետևյալը. անիմացիաներն արժանի են նույն խնամքին և կառուցվածքին, որը մենք արդեն տալիս ենք գույներին, տպագրությանը և տարածությանը: Փոքր ներդրումը առանցքային ֆրեյմերի խորհրդանիշներում վճարվում է ամեն անգամ, երբ ձեր ինտերֆեյսը շարժվում է:
