CSS անիմացիայի ժամանակային ֆունկցիաների հիմունքները
CSS անցումներում (transitions) և անիմացիաներում (animations) շարժման դինամիկան կառավարվում է ժամանակային ֆունկցիաների միջոցով: Այս ֆունկցիաները որոշում են, թե ինչպես է փոփոխվում անիմացիայի արագությունը ժամանակի ընթացքում: Փոխանակ շարժումը կատարվի միօրինակ, գծային արագությամբ, ժամանակային ֆունկցիաները թույլ են տալիս ստեղծել արագացումներ և դանդաղեցումներ, որոնք էլեմենտների տեղաշարժին հաղորդում են բնական տեսք:
CSS-ում այս էֆեկտները սահմանելու համար օգտագործվում են transition-timing-function և animation-timing-function հատկությունները: Թեև CSS-ն առաջարկում է մի քանի պատրաստի հիմնաբառեր, ինչպիսիք են ease, ease-in, ease-out և ease-in-out տարբերակները, դրանք իրականում հանդիսանում են նախապես սահմանված կորերի կարճ գրելաձևեր: Ավելի յուրահատուկ և բարդ շարժումներ ստանալու համար կիրառվում է cubic-bezier(x1, y1, x2, y2) ֆունկցիան, որը թույլ է տալիս ճշգրիտ կառավարել անիմացիայի ընթացքը:
Ինչպես է աշխատում Cubic Bezier կորը
Մաթեմատիկական տեսանկյունից երրորդ կարգի Բեզիեի կորը սահմանվում է չորս կետերով: Առաջին կետը միշտ գտնվում է կոորդինատային համակարգի սկզբնակետում (0, 0), որը համապատասխանում է անիմացիայի սկզբին, իսկ չորրորդ կետը՝ (1, 1) կոորդինատում, որը համապատասխանում է անիմացիայի ավարտին: Կորի վերջնական տեսքը և շարժման դինամիկան որոշվում են երկու միջանկյալ կառավարման կետերի միջոցով:
Կորի վրա ժամանակը առաջ է շարժվում ձախից աջ (X առանցք), իսկ անիմացիայի առաջընթացը՝ ներքևից վերև (Y առանցք): Կառավարման կետերի դերը հետևյալն է.
- Առաջին կառավարման կետ (x1, y1): Ազդում է անիմացիայի սկզբնական փուլի արագացման վրա:
- Երկրորդ կառավարման կետ (x2, y2): Ազդում է անիմացիայի վերջնական փուլի դանդաղեցման վրա:
Այս կետերի կոորդինատները սահմանափակված են որոշակի կանոններով: X արժեքները (x1 և x2) պարտադիր պետք է գտնվեն 0-ից 1-ի միջակայքում, քանի որ ժամանակը չի կարող հետ գնալ կամ անցնել ավարտի սահմանը: Սակայն Y արժեքները (y1 և y2) կարող են դուրս գալ 0-ից 1 տիրույթից՝ ընդունելով -0.70-ից մինչև 1.70 արժեքներ: Սա թույլ է տալիս ստեղծել հետաքրքիր էֆեկտներ, երբ անիմացիան սկսվելուց առաջ հետ է քաշվում, կամ ավարտին մոտենալիս անցնում է վերջնական կետի սահմանը (overshoot) և նոր միայն կանգ առնում:
Գեներատորի կառավարումը և մուտքային տվյալները
CSS Cubic Bezier-ի գեներատորը հնարավորություն է տալիս տեսողական եղանակով ստեղծել և կարգավորել անիմացիայի կորերը: Գործիքի ինտերֆեյսում հասանելի են հետևյալ կառավարման տարրերը.
- Երկու բռնակների տեղաշարժում: Օգտատերը կարող է մկնիկով կամ հպումով քաշել երկու կառավարման կետերի բռնակները՝ կորի ձևը փոփոխելու համար:
- Թվային ներմուծման դաշտեր: Յուրաքանչյուր կառավարման կետի համար հասանելի են ճշգրիտ թվային արժեքներ: Առաջին կառավարման կետի X և Y արժեքները, ինչպես նաև երկրորդ կառավարման կետի X և Y արժեքները կարող են ներմուծվել ձեռքով:
- Նախակարգավորումների ընտրություն: Կարող եք ընտրել ստանդարտ տարբերակներից, ինչպիսիք են "ease", "ease-in", "ease-out", "ease-in-out", ինչպես նաև հատուկ դինամիկայով օժտված "Back In", "Back Out" կամ "Back In-Out" տարբերակները:
Գործիքն ունի ներմուծվող տվյալների ստուգման հստակ կանոններ: Եթե X արժեքի դաշտում ներմուծեք սահմանից դուրս արժեք, օրինակ՝ 9, և դուրս գաք դաշտից (կորցնեք ֆոկուսը), արժեքը ավտոմատ կերպով կդառնա առավելագույն թույլատրելի սահմանը՝ 1: Եթե ամբողջությամբ ջնջեք թվային արժեքը և հեռացնեք ֆոկուսը դաշտից, համակարգը կվերականգնի նախորդ վավեր արժեքը: Դատարկ կամ ոչ թվային նշաններ ներմուծելու դեպքում գործիքը կսպասի մինչև ամբողջական վավեր թվի մուտքագրումը: Բացի այդ, կառավարման կետի բռնակի վրա ֆոկուսը պահելիս ստեղնաշարի ձախ սլաքը սեղմելը կփոխի արժեքը դեպի նվազում, օրինակ՝ դարձնելով այն 0.99:
Ելքային տվյալներ և նախադիտում
Կորի ձևավորմանը զուգընթաց գործիքը տրամադրում է իրական ժամանակի տեսողական արդյունքներ.
- Ձեր կորը: Ցուցադրվում է ստեղծված Բեզիեի կորի գրաֆիկական պատկերը:
- Շարժման նախադիտում: Գրաֆիկի կողքին գտնվող կետը շարժվում է ստեղծված կորի արագությամբ, ինչը թույլ է տալիս համեմատել այն հաստատուն արագությամբ (գծային) շարժվող կետի հետ:
- cubic-bezier(x1, y1, x2, y2): Գեներացվում է պատրաստի CSS կոդը, որը համապատասխանում է ստացված կորին: Օրինակ, եթե ընտրեք "Back Out" նախակարգավորումը, համակարգը կցուցադրի
cubic-bezier(0.34, 1.56, 0.64, 1)արժեքը: - Պատճենման կարգավիճակ: Արժեքը պատճենելուց հետո ինտերֆեյսում հայտնվում է հաստատող հաղորդագրություն, որը հայտնում է հաջող պատճենման մասին:
Կիրառման սահմանափակումները
Չնայած cubic-bezier() ֆունկցիայի ճկունությանը, այն ունի ֆիզիկական սահմանափակումներ: Մեկ կորի միջոցով հնարավոր է ստեղծել նախնական հետքաշման (pull-back) կամ վերջնական թռիչքային անցման (overshoot) էֆեկտներ, սակայն անհնար է ստեղծել այնպիսի շարժումներ, որոնք մի քանի անգամ փոխում են իրենց ուղղությունը: Օրինակ՝ գետնին հարվածող գնդակի բազմակի ցատկերը (bounce) կամ զսպանակի բազմակի տատանումները (elastic) չեն կարող նկարագրվել մեկ cubic-bezier() ֆունկցիայով, քանի որ կորը կարող է միայն մեկ անգամ շեղվել հիմնական ուղղությունից և այնուհետև հասնել վերջնակետին:
Գաղտնիություն և տվյալների մշակում
Այս գործիքն ամբողջությամբ աշխատում է օգտատիրոջ կողմից: Կորի հաշվարկները և գծագրումը կատարվում են անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo սերվերներ:
Հաճախ տրվող հարցեր (FAQ)
Ի՞նչ են նշանակում երկու բռնակները և չորս թվերը:
Կորն անցնում է ներքևի ձախից (սկիզբ) դեպի վերևի աջ (ավարտ), որտեղ ժամանակը գնում է ձախից աջ, իսկ առաջընթացը՝ ներքևից վերև: Երկու բռնակները կառավարման կետերն են, որոնք ծռում են այն. յուրաքանչյուրն ունի X և Y կոորդինատներ, ուստի միասին դրանք կազմում են cubic-bezier(x1, y1, x2, y2): X-ը միշտ մնում է 0-ից 1-ի միջակայքում, մինչդեռ Y-ը կարող է անցնել վերևի կամ ներքևի սահմաններից՝ շարժմանը թռիչքային անցում կամ հետքաշում հաղորդելու համար:
Ինչպե՞ս օգտագործել այս արժեքը իմ CSS-ում:
Պատճենե՛ք cubic-bezier()-ը և տեղադրե՛ք այնտեղ, որտեղ օգտագործվում է անիմացիայի ժամանակային ֆունկցիա՝ transition-timing-function, animation-timing-function կամ կրճատ գրելաձևում, օրինակ՝ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1): ease, ease-in, ease-out և ease-in-out հիմնաբառերը պարզապես ֆիքսված cubic-bezier կորեր են, ուստի այդ նախակարգավորումներից որևէ մեկն ընտրելիս կտեսնեք դրա հետևում թաքնված հստակ արժեքը:
Կարո՞ղ է այն ստեղծել ցատկի (bounce) կամ առաձգական էֆեկտ:
Ոչ ինքնուրույն: Մեկ cubic-bezier-ը կարող է ունենալ նախնական հետքաշում և թռիչքային անցում (overshoot)՝ «back» նախակարգավորումները քաշում են բռնակներից մեկը տուփի սահմաններից դուրս հենց դրա համար, բայց այն կարող է շարժվել միայն մեկ ուղղությամբ և հետո կանգ առնել: Ցատկի (bounce) կամ առաձգական (elastic) էֆեկտները մի քանի անգամ փոխում են ուղղությունը, ինչը մեկ cubic-bezier-ով հնարավոր չէ արտահայտել. դրանց համար անհրաժեշտ են CSS keyframes կամ linear() ֆունկցիան բազմաթիվ կետերով: