CSS keyframe անիմացիայի ստեղծում՝ անունը, տևողությունը և ընթացքը կարգավորելով

Գործիքի նպատակը և շարժման հիմքը

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

Գեներացվող շարժումն ունի նախապես սահմանված տեսք։ Սկզբնական փուլում տարրի անթափանցիկությունը զրո է, և այն ուղղահայաց ուղղությամբ տեղափոխված է 20px-ով։ Վերջնական փուլում անթափանցիկությունը դառնում է 1, իսկ ուղղահայաց տեղափոխությունը՝ 0։ Այդ կառուցվածքը համապատասխանում է այն իրավիճակին, երբ վերնագիրը, ծանուցումը կամ էջի մեկ այլ տարր պետք է աստիճանաբար հայտնվի ներքևից վեր։

Անվանումը, տևողությունը, easing-ը, ուղղությունը և լրացման ռեժիմը առանձին մուտքեր են։ Դրանց միջոցով կարող եք հարմարեցնել հայտարարության հիմնական պարամետրերը՝ առանց առանցքային կադրերի ներսում սահմանված շարժման բովանդակությունը փոխելու։

Մուտքերի լրացում և CSS տեքստի ստացում

1. Անվանման դաշտում գրեք այն անունը, որով ցանկանում եք դիմել անիմացիային։ Օրինակ՝ մուտքագրեք slideIn, եթե արդյունքը նախատեսված է էջի վերնագրի հայտնվելու համար։ Անվանումը պետք է հաշվի առնեք նաև այն CSS հայտարարության մեջ, որտեղ հետագայում կկիրառեք անիմացիան։

2. Տևողության դաշտում նշեք անհրաժեշտ թիվը։ Գործիքը այդ մուտքը հայտարարության մեջ տեղադրում է վայրկյանների միավորով, ուստի 2 արժեքը արդյունքի տեքստում երևում է որպես 2s։ Տրված արժեքի վավերացման, կլորացման կամ սահմանափակման մասին այս գործիքը հաստատված կանոն չի տրամադրում, հետևաբար ընտրեք ձեր ոճաթերթի համար նախատեսված մուտք։

3. Անհրաժեշտության դեպքում լրացրեք easing-ի, ուղղության և լրացման ռեժիմի մուտքերը։ Երբ դրանք չեք նշում, կիրառվում են համապատասխանաբար ease, normal և none արժեքները։ Անվանման բաց թողնված դաշտի համար կանխադրված անունը fadeIn է։

4. Հաշվարկը գործարկելուց հետո ուսումնասիրեք ստացված CSS տեքստը։ Այն պետք է պարունակի առանցքային կադրերի հատված և տարրի անիմացիայի հայտարարություն։ Ստուգեք, որ հայտարարության մեջ տեսանելի են ընտրված անունը, տևողությունը և մյուս մուտքագրած պարամետրերը, ապա անհրաժեշտության դեպքում փոփոխեք դաշտերը և կրկին գեներացրեք արդյունքը։

5. Ստացված տեքստը տեղադրելիս պահպանեք առանցքային կադրերի անվանումը և տարրի հայտարարության մեջ դրա համապատասխան հղումը։ Եթե ցանկանում եք կիրառել այլ տարրի վրա, նախ ստուգեք, որ այդ տարրի ընտրիչը ձեր ոճաթերթում ճիշտ է գրված։ Այս քայլը վերաբերում է ձեր CSS-ի կազմակերպմանը, ոչ թե գեներացված շարժման փուլերի փոփոխմանը։

Ստացված CSS-ի ընթերցում

Արդյունքը CSS տեքստ է, ոչ թե տեսանյութ կամ շարժման նախադիտման պատկեր։ Տեքստի առանցքային կադրերի հատվածում փնտրեք 0% և 100% երկու փուլերը։ Առաջինում opacity արժեքը 0 է, իսկ ուղղահայաց տեղափոխությունը՝ 20px, մինչդեռ վերջինում opacity արժեքը 1 է, և տեղափոխությունը վերադառնում է 0-ի։

Տարրի անիմացիայի հայտարարությունը ցույց է տալիս, թե որ անունն ու տևողությունն են օգտագործվել։ Տևողության կողքին վայրկյանների միավորը ավելանում է հենց հայտարարության մեջ, այնպես որ մուտքագրված թիվը պետք չէ արդյունքը կարդալիս շփոթել արդեն ձևավորված արժեքի հետ։ Easing-ը, ուղղությունը և լրացման ռեժիմը նույնպես կարող եք համեմատել ձեր մուտքերի հետ, եթե դրանք լրացրել եք։

Եթե անվանման դաշտը չեք լրացնում, կիրառվում է fadeIn կանխադրված անունը։ Ստուգեք այդ արժեքը արդյունքի հայտարարության մեջ, որպեսզի այն համապատասխանի ձեր ոճաթերթի սպասումներին։

Առանցքային կադրերի փուլերն ու դրանց հատկությունները փոփոխվող մուտքեր չեն։ Հետևաբար այս գործիքը հարմար է թափանցիկությունից և 20px ուղղահայաց տեղափոխությունից դեպի սկզբնական դիրք անցնող էֆեկտի համար, իսկ այլ փուլեր կամ այլ շարժման հատկություններ պահանջող դեպքում ստացված CSS-ը պետք է ձեռքով վերամշակեք։

Գործնական օրինակ

Էջի վերնագրի համար ստացված կառուցվածքը նկարագրում է 20px ուղղահայաց տեղափոխությունից դեպի սկզբնական դիրք անցում և անթափանցիկության փոփոխություն 0-ից 1։

Էջի վերնագրի մեղմ հայտնվելու համար անվանման դաշտում մուտքագրեք slideIn, տևողության դաշտում՝ 2, ընտրեք ease-out, ուղղության համար նշեք normal, իսկ լրացման ռեժիմի համար՝ forwards, հետո գործարկեք գեներացումը։

Ստացված CSS տեքստը պարունակում է slideIn անվամբ առանցքային կադրերի անիմացիա և տարրի անիմացիայի հայտարարություն, որտեղ 2 տևողությունը ներկայացված է որպես 2s։

Սահմանափակումներ

• Առանցքային կադրերի բովանդակությունը սահմանված է անթափանցիկության և ուղղահայաց տեղափոխության երկու փուլով, ուստի այլ փուլեր կամ այլ շարժման հատկություններ չեն տրամադրվում որպես կարգավորվող մուտքեր։

Հաճախակի սխալներ

• Եթե արդյունքի մեջ հայտնվում է fadeIn կանխադրված անունը, իսկ դուք այլ անուն էիք ցանկանում, մուտքագրեք ձեր նախընտրած անվանումը և կրկին գեներացրեք կոդը։

Հաճախ տրվող հարցեր

Կարո՞ղ եմ փոխել անիմացիայի անունը և տևողությունը։

Այո, այդ երկու պարամետրերը կարող եք տրամադրել որպես մուտքեր։ Տևողության թիվը ստացված հայտարարության մեջ ներկայացվում է վայրկյանների միավորով։

Ի՞նչ է տեղի ունենում դատարկ անվան դեպքում։

Եթե անվանումը չեք նշում, գործիքը որպես կանխադրված արժեք օգտագործում է fadeIn անունը։

Ի՞նչ շարժում է ներառված ստացված CSS-ում։

Գեներացված տեքստը սահմանում է երկու փուլ՝ 0% և 100%։ Դրանց միջև անթափանցիկությունը փոխվում է 0-ից 1, իսկ ուղղահայաց տեղափոխությունը՝ 20px-ից 0։