წარმოიდგინეთ ეს: თქვენ უერთდებით ახალ პროექტს, ჩახვალთ კოდების ბაზაში და პირველ რამდენიმე საათში აღმოაჩენთ იმედგაცრუებულ რაღაცას. მიმოფანტული სტილის ფურცლებზე, თქვენ იპოვით რამდენიმე @keyframes განმარტებას ერთი და იგივე ძირითადი ანიმაციისთვის. სამი განსხვავებული გაქრობის ეფექტი, ორი ან სამი სლაიდის ვარიაცია, რამდენიმე მასშტაბური ანიმაცია და მინიმუმ ორი განსხვავებული დატრიალებული ანიმაცია, რადგან რატომაც არა? @keyframes პულსი { საწყისი { მასშტაბი: 1; } მდე { მასშტაბი: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { მასშტაბი: 1; } 10%, 40% { მასშტაბი: 1.2; } }
თუ ეს სცენარი ნაცნობად ჟღერს, თქვენ მარტო არ ხართ. სხვადასხვა პროექტებში ჩემი გამოცდილებიდან გამომდინარე, ერთ-ერთი ყველაზე თანმიმდევრული სწრაფი მოგება, რაც შემიძლია მივაწოდო, არის ძირითადი ჩარჩოების კონსოლიდაცია და სტანდარტიზაცია. ის ისეთი საიმედო ნიმუში გახდა, რომ ახლა მოუთმენლად ველი ამ გაწმენდას, როგორც ჩემს პირველ ამოცანას ნებისმიერ ახალ კოდის ბაზაზე. ლოგიკა ქაოსის მიღმა ეს ზედმეტობა სრულიად ლოგიკურია, როცა მასზე ფიქრობ. ჩვენ ყველანი ვიყენებთ ერთსა და იმავე ფუნდამენტურ ანიმაციას ყოველდღიურ მუშაობაში: ქრება, სლაიდები, მასშტაბირება, ტრიალები და სხვა საერთო ეფექტები. ეს ანიმაციები საკმაოდ მარტივია და ადვილია შეადგინოთ სწრაფი @keyframes განმარტება სამუშაოს შესასრულებლად. ცენტრალიზებული ანიმაციური სისტემის გარეშე, დეველოპერები ბუნებრივად წერენ ამ საკვანძო კადრებს ნულიდან, არ იციან, რომ მსგავსი ანიმაციები უკვე არსებობს სხვაგან კოდების ბაზაში. ეს განსაკუთრებით ხშირია კომპონენტებზე დაფუძნებულ არქიტექტურებში მუშაობისას (რასაც ჩვენი უმეტესობა აკეთებს ამ დღეებში), რადგან გუნდები ხშირად მუშაობენ პარალელურად აპლიკაციის სხვადასხვა ნაწილში. შედეგი? ანიმაციური ქაოსი. მცირე პრობლემა საკვანძო ფრეიმების დუბლირებასთან დაკავშირებული ყველაზე აშკარა პრობლემაა განვითარების დროის დახარჯვა და არასაჭირო კოდის გაფუჭება. მრავალი საკვანძო კადრის განმარტება ნიშნავს მრავალ ადგილს განახლებისთვის, როდესაც მოთხოვნები იცვლება. გჭირდებათ თქვენი გაცვეთილი ანიმაციის დროის კორექტირება? თქვენ უნდა მოძებნოთ ყველა ეგზემპლარი თქვენს კოდების ბაზაში. გსურთ შემსუბუქების ფუნქციების სტანდარტიზაცია? წარმატებებს გისურვებთ ყველა ვარიაციის პოვნაში. ტექნიკური ქულების ეს გამრავლება ანიმაციის მარტივ განახლებებსაც კი შრომატევადი ამოცანად აქცევს. უფრო დიდი პრობლემა საკვანძო ჩარჩოების ეს დუბლირება ქმნის ბევრად უფრო მზაკვრულ პრობლემას, რომელიც იმალება ზედაპირის ქვეშ: გლობალური მასშტაბის ხაფანგი. კომპონენტებზე დაფუძნებულ არქიტექტურებთან მუშაობის დროსაც კი, CSS საკვანძო ჩარჩოები ყოველთვის განსაზღვრულია გლობალურ მასშტაბში. ეს ნიშნავს, რომ ყველა ძირითადი ჩარჩო ვრცელდება ყველა კომპონენტზე. ყოველთვის. დიახ, თქვენი ანიმაცია სულაც არ იყენებს თქვენს კომპონენტში განსაზღვრულ საკვანძო კადრებს. ის იყენებს ბოლო საკვანძო კადრებს, რომლებიც ემთხვევა ზუსტად იმავე სახელს, რომელიც ჩატვირთული იყო გლობალურ ასპექტში. სანამ თქვენი ყველა ძირითადი ჩარჩო იდენტურია, ეს შეიძლება უმნიშვნელო პრობლემად მოგეჩვენოთ. მაგრამ იმ მომენტში, როდესაც გსურთ ანიმაციის მორგება კონკრეტული გამოყენების შემთხვევისთვის, თქვენ გაწუხებთ, ან უარესი, თქვენ იქნებით მათი გამომწვევი. ან თქვენი ანიმაცია არ იმუშავებს, რადგან თქვენის შემდეგ ჩატვირთული სხვა კომპონენტი, რომელიც გადაწერს თქვენს საკვანძო კადრებს, ან თქვენი კომპონენტი იტვირთება ბოლო და შემთხვევით ცვლის ანიმაციის ქცევას ყველა სხვა კომპონენტისთვის ამ საკვანძო კადრის სახელის გამოყენებით და შეიძლება ვერც კი მიხვდეთ. აქ არის მარტივი მაგალითი, რომელიც ასახავს პრობლემას: .კომპონენტი-ერთი { /* კომპონენტის სტილები */ ანიმაცია: pulse 1s ease-in-out უსასრულო ალტერნატივა; }
/* ეს @keyframes განმარტება არ იმუშავებს */ @keyframes პულსი { საწყისი { მასშტაბი: 1; } მდე { მასშტაბი: 1.1; } }
/* მოგვიანებით კოდში... */
.კომპონენტი-ორი { /* კომპონენტის სტილები */ ანიმაცია: pulse 1s ease-in-out infinite; }
/* ეს საკვანძო ჩარჩოები ვრცელდება ორივე კომპონენტზე */ @keyframes პულსი { 0%, 20%, 100% { მასშტაბი: 1; } 10%, 40% { მასშტაბი: 1.2; } }
ორივე კომპონენტი იყენებს ანიმაციის ერთსა და იმავე სახელს, მაგრამ მეორე @keyframes განმარტება გადაწერს პირველს. ახლა ორივე კომპონენტი-ერთი და კომპონენტი-ორი გამოიყენებენ მეორე საკვანძო კადრებს, იმისდა მიუხედავად, რომელმა კომპონენტმა განსაზღვრა რომელი საკვანძო ჩარჩოები. იხილეთ Pen Keyframes Tokens - დემო 1 [ჩანგალი] ამიტ შინის მიერ. ყველაზე ცუდი ნაწილი? ეს ხშირად მშვენივრად მუშაობს ლოკალურ განვითარებაში, მაგრამ იდუმალებით იშლება წარმოებაში, როდესაც მშენებლობის პროცესები ცვლის თქვენი სტილის ფურცლების ჩატვირთვის ბრძანებას. თქვენ მიიღებთ ანიმაციებს, რომლებიც განსხვავებულად იქცევიან იმისდა მიხედვით, თუ რომელი კომპონენტებია ჩატვირთული და რა თანმიმდევრობით. გამოსავალი: ერთიანი საკვანძო ჩარჩოები ამ ქაოსზე პასუხი საოცრად მარტივია: წინასწარ განსაზღვრული დინამიური საკვანძო ჩარჩოები, რომლებიც ინახება საერთო სტილის ფურცელში. იმის ნაცვლად, რომ თითოეულ კომპონენტს მივცეთ უფლება განსაზღვროს საკუთარი ანიმაციები, ჩვენ ვქმნით ცენტრალიზებულ საკვანძო კადრებს, რომლებიც კარგად არის დოკუმენტირებული და ადვილად გამოსაყენებელი.გამოყენება, შენარჩუნება და მორგებული თქვენი პროექტის კონკრეტულ საჭიროებებზე. იფიქრეთ მასზე, როგორც საკვანძო კადრების ნიშნად. ისევე, როგორც ჩვენ ვიყენებთ ჟეტონებს ფერებისა და ინტერვალისთვის, და ბევრი ჩვენგანი უკვე ვიყენებთ ჟეტონებს ანიმაციური თვისებებისთვის, როგორიცაა ხანგრძლივობისა და შემსუბუქების ფუნქციები, რატომ არ გამოვიყენოთ ტოკენები საკვანძო კადრებისთვისაც? ამ მიდგომას შეუძლია ბუნებრივად გაერთიანდეს ნებისმიერი მიმდინარე დიზაინის ტოკენის სამუშაო პროცესთან, რომელსაც იყენებთ, ხოლო მცირე პრობლემის (კოდის დუბლირება) და უფრო დიდი პრობლემის (გლობალური მასშტაბის კონფლიქტების) გადაჭრის ერთბაშად. იდეა მარტივია: შექმენით სიმართლის ერთი წყარო ყველა ჩვენი საერთო ანიმაციისთვის. ეს გაზიარებული სტილის ფურცელი შეიცავს საგულდაგულოდ შემუშავებულ საკვანძო კადრებს, რომლებიც მოიცავს ანიმაციის შაბლონებს, რომლებსაც ჩვენი პროექტი რეალურად იყენებს. აღარ გამოიცნოთ, არსებობს თუ არა სადღაც ჩვენს კოდების ბაზაში fade ანიმაცია. აღარ არის შემთხვევით გადაწერა ანიმაციები სხვა კომპონენტებიდან. მაგრამ აქ არის გასაღები: ეს არ არის მხოლოდ სტატიკური კოპირ-პასტის ანიმაციები. ისინი შექმნილია იმისათვის, რომ იყოს დინამიური და კონფიგურირებადი CSS-ის მორგებული თვისებების მეშვეობით, რაც საშუალებას გვაძლევს შევინარჩუნოთ თანმიმდევრულობა, ხოლო ჯერ კიდევ გვაქვს მოქნილი ანიმაციების ადაპტაცია კონკრეტული გამოყენების შემთხვევებზე, მაგალითად, თუ გჭირდებათ ოდნავ უფრო დიდი „პულსის“ ანიმაცია ერთ ადგილას. პირველი Keyframes ნიშნის აგება ერთ-ერთი პირველი დაბალ დაკიდებული ხილი, რომელსაც უნდა გავუმკლავდეთ, არის ანიმაცია "გაქრება". ჩემს ერთ-ერთ ბოლო პროექტში აღმოვაჩინე ათზე მეტი ცალკეული გაქრობის განმარტება და დიახ, ყველა მათგანმა უბრალოდ გააცოცხლა გამჭვირვალობა 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 - დემო 2 [გატეხილი] ამიტ შინის მიერ. შენიშვნა: ჩვენ ვიყენებთ kf- პრეფიქსს ყველა ჩვენს @keyframes სახელებში. ეს პრეფიქსი ემსახურება სახელთა სივრცეს, რომელიც ხელს უშლის პროექტში არსებულ ანიმაციებთან დასახელების კონფლიქტს და დაუყოვნებლივ ცხადყოფს, რომ ეს საკვანძო კადრები მოდის ჩვენი საკვანძო კადრების ტოკენების ფაილიდან. დინამიური სლაიდის დამზადება kf-fade-in საკვანძო ჩარჩოები მშვენივრად მუშაობს, რადგან მარტივია და რაღაცების გასაფუჭებლად ცოტა ადგილია. თუმცა, სხვა ანიმაციებში ჩვენ უნდა ვიყოთ ბევრად უფრო დინამიური და აქ შეგვიძლია გამოვიყენოთ CSS მორგებული თვისებების უზარმაზარი ძალა. სწორედ აქ ანათებს საკვანძო კადრების ნიშნები გაფანტულ სტატიკურ ანიმაციებთან შედარებით. ავიღოთ საერთო სცენარი: „სლაიდ-ინ“ ანიმაციები. მაგრამ საიდან შევიდეთ? 100 პიქსელი მარჯვნიდან? მარცხნიდან 50%? ეკრანის ზემოდან უნდა შევიდეს? ან იქნებ ქვემოდან ცურვა? ამდენი შესაძლებლობაა, მაგრამ იმის ნაცვლად, რომ შევქმნათ ცალკეული საკვანძო ჩარჩოები თითოეული მიმართულებისთვის და თითოეული ვარიაციისთვის, ჩვენ შეგვიძლია შევქმნათ ერთი მოქნილი ნიშანი, რომელიც მოერგება ყველა სცენარს: /* * Slide In - მიმართულების სლაიდების ანიმაცია * მიმართულების გასაკონტროლებლად გამოიყენეთ --kf-slide-from * ნაგულისხმევი: სრიალებს მარცხნიდან (-100%) * გამოყენება: * ანიმაცია: kf-slide-in 0.3s ease-out; * --kf-slide-დან: -100px 0; // სრიალი მარცხნიდან * --kf-slide-from: 100px 0; // სრიალი მარჯვნიდან * --kf-slide-დან: 0 -50px; // სრიალი ზემოდან */
@keyframes kf-slide-in { საწყისი { translate: var(--kf-slide-from, -100% 0); } მდე { თარგმნა: 0 0; } }
ახლა ჩვენ შეგვიძლია გამოვიყენოთ ეს ერთი @keyframes ჟეტონი ნებისმიერი სლაიდის მიმართულებისთვის, უბრალოდ --kf-slide-დან მორგებული თვისების შეცვლით: .გვერდითი ზოლი { ანიმაცია: 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-from: 50px 50px; /* სლაიდი ქვედა მარჯვნივ */ }
ეს მიდგომა გვაძლევს წარმოუდგენელ მოქნილობას თანმიმდევრულობის შენარჩუნებისას. ერთი საკვანძო კადრის დეკლარაცია, უსასრულო შესაძლებლობები. იხილეთ Pen Keyframes Tokens - დემო 3 [ჩანგალი] ამიტ შინის მიერ. და თუ გვინდა, რომ ჩვენი ანიმაციები კიდევ უფრო მოქნილი გავხადოთ, რაც საშუალებას მოგვცემს „გადასასვლელი“ ეფექტებიც, შეგვიძლიაუბრალოდ დაამატეთ --kf-slide-ს მორგებული თვისება, მსგავსი რასაც შემდეგ სექციაში დავინახავთ. ორმხრივი მასშტაბირება საკვანძო ჩარჩოები კიდევ ერთი გავრცელებული ანიმაცია, რომელიც დუბლირებულია პროექტებში, არის "გადიდების" ეფექტები. იქნება ეს სადღეგრძელო შეტყობინებების დახვეწილი მასშტაბის გაზრდა, მოდალების დრამატული მასშტაბირება ან სათაურების ზომიერი შემცირების ეფექტი, მასშტაბირების ანიმაციები ყველგან არის. იმის ნაცვლად, რომ შევქმნათ ცალკე საკვანძო ჩარჩოები თითოეული მასშტაბის მნიშვნელობისთვის, მოდით ავაშენოთ kf-zoom საკვანძო კადრების ერთი მოქნილი ნაკრები:
/* * 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-zoom-დან: 1; --kf-zoom-მდე: 0; // მასშტაბირება 100%-დან 0%-მდე * --kf-zoom-დან: 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 ease-out; --kf-slide-დან: 0 100%; /* სრიალი ზემოდან */ /* იყენებს ნაგულისხმევ ზუმს: მასშტაბებს 80%-დან 100%-მდე */ }
.მოდალური { ანიმაცია: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-დან: 0; /* დრამატული მასშტაბირება 0%-დან 100%-მდე */ }
.სათაური { ანიმაცია: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-zoom-დან: 1.2; --kf-გადიდება: 0.8; /* ნაზი მასშტაბის შემცირება */ }
ნაგულისხმევი 0.8 (80%) მშვენივრად მუშაობს UI ელემენტების უმეტესობისთვის, როგორიცაა სადღეგრძელო შეტყობინებები და ბარათები, მაგრამ მაინც ადვილია მისი მორგება სპეციალური შემთხვევებისთვის. იხილეთ Pen Keyframes Tokens - დემო 4 [ჩანგალი] ამიტ შინის მიერ. თქვენ შეიძლება შეამჩნიეთ რაღაც საინტერესო ბოლო მაგალითებში: ჩვენ ვაერთიანებთ ანიმაციებს. @keyframes ტოკენებთან მუშაობის ერთ-ერთი მთავარი უპირატესობა არის ის, რომ ისინი შექმნილია ერთმანეთთან შეუფერხებლად ინტეგრირებისთვის. ეს გლუვი კომპოზიცია არის მიზანმიმართული და არა შემთხვევითი. ჩვენ მოგვიანებით უფრო დეტალურად განვიხილავთ ანიმაციის კომპოზიციას, მათ შორის, სადაც ისინი შეიძლება გახდეს პრობლემური, მაგრამ კომბინაციების უმეტესობა მარტივი და მარტივი განსახორციელებელია. შენიშვნა: ამ სტატიის წერისას და შესაძლოა მისი დაწერის გამო, მე აღმოვჩნდი, რომ გადავიფიქრე შესასვლელი ანიმაციების მთელი იდეა. CSS-ში ბოლოდროინდელი მიღწევების გამო, ჩვენ მაინც გვჭირდება ისინი? საბედნიეროდ, ადამ არგილმა შეისწავლა იგივე კითხვები და ბრწყინვალედ გამოხატა ისინი თავის ბლოგში. ეს არ ეწინააღმდეგება აქ დაწერილს, მაგრამ ის წარმოადგენს მიდგომას, რომლის განხილვაც ღირს, განსაკუთრებით თუ თქვენი პროექტები დიდწილად ეყრდნობა შესასვლელ ანიმაციებს. უწყვეტი ანიმაციები მიუხედავად იმისა, რომ შესასვლელი ანიმაციები, როგორიცაა „გაქრობა“, „სლაიდი“ და „გადიდება“ ხდება ერთხელ და შემდეგ ჩერდება, უწყვეტი ანიმაციები განუსაზღვრელი ვადით ტრიალებს ყურადღების მიქცევის ან მიმდინარე აქტივობის აღსანიშნავად. ორი ყველაზე გავრცელებული უწყვეტი ანიმაცია, რომელსაც მე ვხვდები, არის „სპინი“ (ინდიკატორების ჩატვირთვისთვის) და „პულსი“ (მნიშვნელოვანი ელემენტების ხაზგასასმელად). ეს ანიმაციები წარმოადგენენ უნიკალურ გამოწვევებს, როდესაც საქმე ეხება საკვანძო ჩარჩოების ტოკენების შექმნას. შესასვლელი ანიმაციებისგან განსხვავებით, რომლებიც, როგორც წესი, გადადიან ერთი მდგომარეობიდან მეორეში, უწყვეტი ანიმაციები უნდა იყოს ძალიან მორგებული მათი ქცევის შაბლონებში. სპინ დოქტორი როგორც ჩანს, ყველა პროექტი იყენებს მრავალჯერადი დატრიალებულ ანიმაციას. ზოგი საათის ისრის მიმართულებით ტრიალებს, ზოგი საათის ისრის საწინააღმდეგოდ. ზოგი აკეთებს ერთ 360 გრადუსიან ბრუნვას, სხვები აკეთებენ მრავალჯერად შემობრუნებას უფრო სწრაფი ეფექტისთვის. იმის ნაცვლად, რომ შევქმნათ ცალკე საკვანძო ჩარჩოები თითოეული ვარიაციისთვის, მოდით ავაშენოთ ერთი მოქნილი დატრიალება, რომელიც გაუმკლავდება ყველა სცენარს:
/* * Spin - ბრუნვის ანიმაცია * გამოიყენეთ --kf-spin-from და --kf-spin-to ბრუნვის დიაპაზონის გასაკონტროლებლად * გამოიყენეთ --kf-spin-turns ბრუნვის რაოდენობის გასაკონტროლებლად * ნაგულისხმევი: ბრუნავს 0 გრადუსიდან 360 გრადუსამდე (1 სრული ბრუნვა) * გამოყენება: * ანიმაცია: kf-spin 1s linear infinite; * --kf-spin-turns: 2; // 2 სრული ბრუნვა * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // ნახევრად როტაცია * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // საათის ისრის საწინააღმდეგოდ */
@keyframes kf-spin { საწყისი { rotate: var(--kf-spin-from, 0deg); } მდე { rotate: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ახლა ჩვენ შეგვიძლია შევქმნათ ნებისმიერი დატრიალების ვარიაცია, რომელიც მოგვწონს:
.loading-spinner { ანიმაცია: kf-spin 1s linear infinite; /* იყენებს ნაგულისხმევს: ბრუნავს 0 გრადუსიდან 360 გრადუსამდე */ }
.fast-loader { ანიმაცია: kf-spin 1.2s ease-in-out infinite alternative; --kf-spin-turns: 3; /* 3 სრული ბრუნვა თითოეული მიმართულებით ციკლზე*/ }
.steped-reverse { ანიმაცია: kf-spin 1.5s step(8) infinite; --kf-spin-to: -360deg; /* საათის ისრის საწინააღმდეგოდ */ }
.დახვეწილი-wiggle { ანიმაცია: kf-spin 2s ease-in-out უსასრულო ალტერნატიული; --kf-სპინი-დან: -16 გრადუსი; --kf-spin-to: 32deg; /* ტრიალი 36 გრადუსი: -18-დან +18 გრადუსამდე */ }
იხილეთ Pen Keyframes Tokens - დემო 5 [ჩანგალი] ამიტ შინის მიერ. ამ მიდგომის სილამაზე ის არის, რომ ერთი და იგივე საკვანძო ჩარჩოები მუშაობს სპინერების ჩატვირთვის, მბრუნავი ხატების, მოძრაობების ეფექტებისა და რთული მრავალმხრივი ანიმაციებისთვისაც კი. პულსის პარადოქსი პულსის ანიმაციები უფრო რთულია, რადგან მათ შეუძლიათ სხვადასხვა თვისებების „პულსი“. ზოგიერთი პულსირებს მასშტაბს, სხვები პულსირებს გამჭვირვალობას და ზოგიერთი პულსის ფერის თვისებებს, როგორიცაა სიკაშკაშე ან გაჯერება. იმის ნაცვლად, რომ შევქმნათ ცალკე საკვანძო ჩარჩოები თითოეული თვისებისთვის, ჩვენ შეგვიძლია შევქმნათ საკვანძო ჩარჩოები, რომლებიც მუშაობენ ნებისმიერ CSS თვისებასთან. აქ მოცემულია პულსის საკვანძო კადრის მაგალითი მასშტაბისა და გამჭვირვალობის ვარიანტებით:
/* * პულსი - პულსირებული ანიმაცია * გამოიყენეთ --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-პულსი-გაუმჭვირვალობა-დან, 1); } მდე { მასშტაბი: var(--kf-pulse-scale-to, 1); გამჭვირვალობა: var(--kf-პულსი-გაუმჭვირვალობა-მდე, 1); } }
ეს ქმნის მოქნილ პულსს, რომელსაც შეუძლია მრავალი თვისების ანიმაცია: .მოწოდება მოქმედებაზე { ანიმაცია: kf-pulse 0.6s უსასრულო ალტერნატიული; --kf-პულსი-გაუმჭვირვალობა-დან: 0,5; /* გამჭვირვალობის პულსი */ }
.notification-dot { ანიმაცია: kf-pulse 0.6s ease-in-out უსასრულო ალტერნატივა; --kf-პულსური მასშტაბი-დან: 0,9; --kf-პულსის მასშტაბი-მდე: 1.1; /* მასშტაბის პულსი */ }
.text-highlight { ანიმაცია: kf-pulse 1.5s ease-out infinite; --kf-პულსური მასშტაბი-დან: 0.8; --kf-პულსი-გაუმჭვირვალობა-დან: 0.2; /* მასშტაბი და გამჭვირვალობის პულსი */ }
იხილეთ Pen Keyframes Tokens - დემო 6 [ჩანგალი] ამიტ შინის მიერ. ეს ერთჯერადი kf-pulse keyframe შეუძლია გაუმკლავდეს ყველაფერს, დახვეწილი ყურადღების მიპყრობიდან დაწყებული დრამატული ხაზგასმით დამთავრებული, ეს ყველაფერი მარტივია პერსონალურად. გაფართოებული შემსუბუქება საკვანძო კადრების ჟეტონების გამოყენებისას ერთ-ერთი შესანიშნავი რამ არის ის, თუ რამდენად ადვილია ჩვენი ანიმაციური ბიბლიოთეკის გაფართოება და ისეთი ეფექტების მიწოდება, რომელთა დაწერასაც დეველოპერების უმეტესობა არ იწუხებს ნულიდან, მაგალითად, ელასტიური ან აყვავებული. აქ არის მარტივი "bounce" keyframes ტოკენის მაგალითი, რომელიც იყენებს --kf-bounce-from მორგებული თვისებას ნახტომის სიმაღლის გასაკონტროლებლად. /* * Bounce - მბრუნავი შესასვლელი ანიმაცია * გამოიყენეთ --kf-bounce-from ნახტომის სიმაღლის გასაკონტროლებლად * ნაგულისხმევი: ნახტომი 100 ვსთ-დან (ეკრანის გამორთვა) * გამოყენება: * ანიმაცია: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // ნახტომი 200 პიქსელი სიმაღლიდან */
@keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { translate: 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, -100vh) * გამოყენება: * ანიმაცია: kf-elastic-in 2s ease-in-out ორივე; * --kf-ელასტიური-X-დან: -50px; * --kf-ელასტიური-Y-დან: -200px; // შეიტანეთ (-50px, -200px)-დან */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-ელასტიური--დან-X, -50vw) * 1) calc(var(--kf-ელასტიური--დან-Y, 0px) * 1); }
16% { translate: calc(var(--kf-ელასტიური--დან-X, -50vw) * -0.3227) calc(var(--kf-ელასტიური-from-Y, 0px) * -0.3227); }
28% { translate: calc(var(--kf-ელასტიური--დან-X, -50vw) * 0.1312)calc(var (--kf-ელასტიური--დან-Y, 0px) * 0.1312); }
44% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-ელასტიური-from-Y, 0px) * -0.0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { translate: calc(var(--kf-ელასტიური--დან-X, -50vw) * -0.0058) calc(var(--kf-ელასტიური-from-Y, 0px) * -0.0058); }
88% { translate: calc(var(--kf-ელასტიური--დან-X, -50vw) * 0.0020) calc(var(--kf-ელასტიური-from-Y, 0px) * 0.0020); }
100% { თარგმნა: 0 0; } }
ეს მიდგომა აადვილებს მოწინავე საკვანძო ჩარჩოების ხელახლა გამოყენებას და მორგებას ჩვენს პროექტში, მხოლოდ ერთი მორგებული თვისების შეცვლით.
.bounce-and-zoom { ანიმაცია: kf-bounce 3s ease-in, kf-zoom 3s ხაზოვანი; --kf-zoom-დან: 0; }
.bounce-and-slide { ანიმაცია-კომპოზიცია: დამატება; /* ორივე ანიმაცია იყენებს თარგმანს */ ანიმაცია: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-from: -200px; }
.ელასტიური { ანიმაცია: kf-elastic-in 2s ease-in-out ორივე; }
იხილეთ Pen Keyframes Tokens - დემო 7 [ჩანგალი] ამიტ შინის მიერ. ამ მომენტამდე, ჩვენ ვნახეთ, თუ როგორ შეგვიძლია გავაერთიანოთ ძირითადი ჩარჩოები ჭკვიანურად და ეფექტურად. რა თქმა უნდა, შეიძლება დაგჭირდეთ რამის შესწორება, რათა უკეთ მოერგოს თქვენი პროექტის საჭიროებებს, მაგრამ ჩვენ განვიხილეთ რამდენიმე ჩვეულებრივი ანიმაციისა და ყოველდღიური გამოყენების შემთხვევების მაგალითები. და ამ საკვანძო კადრების ნიშნებით, ჩვენ ახლა გვაქვს მძლავრი სამშენებლო ბლოკები მთელი პროექტის განმავლობაში თანმიმდევრული, შენარჩუნებული ანიმაციების შესაქმნელად. აღარ არის დუბლირებული საკვანძო ჩარჩოები, აღარ არის გლობალური მასშტაბის კონფლიქტები. უბრალოდ სუფთა, მოსახერხებელი გზა ჩვენი ანიმაციის ყველა საჭიროების დასაკმაყოფილებლად. მაგრამ ნამდვილი კითხვაა: როგორ შევადგინოთ ეს სამშენებლო ბლოკები ერთად? ყველაფერს ერთად აყენებს ჩვენ დავინახეთ, რომ ძირითადი საკვანძო ჩარჩოების ნიშნების გაერთიანება მარტივია. ჩვენ არ გვჭირდება არაფერი განსაკუთრებული, გარდა იმისა, რომ განვსაზღვროთ პირველი ანიმაცია, განვსაზღვროთ მეორე, დავაყენოთ ცვლადები საჭიროებისამებრ და ეს არის ის. /* 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-from: 0 40px; }
/* მასშტაბირება + გაქრობა */ .მოდალური { ანიმაცია: kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-დან: 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 ანიმაცია გამოიყენება. .ცუდი-კომბო { ანიმაცია: kf-zoom 0.5s წინ, 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 - დემო 8 [ჩანგალი] ამიტ შინის მიერ. ეს მიდგომა კარგად მუშაობს უმეტეს შემთხვევაში, როდესაც ჩვენ გვინდა გავაერთიანოთ ეფექტები იმავე თვისებაზე. ის ასევე სასარგებლოა, როდესაც ჩვენ გვჭირდება ანიმაციების გაერთიანება სტატიკური თვისებების მნიშვნელობებთან. მაგალითად, თუ ჩვენ გვაქვს ელემენტი, რომელიც იყენებს translate თვისებას მისი განლაგებისთვის ზუსტად იქ, სადაც ჩვენ გვინდა, და შემდეგ გვსურს მისი ანიმაცია kf-slide-in საკვანძო კადრებით, მივიღებთ საზიზღარ ხილულ ნახტომს ანიმაცია-კომპოზიციის გარეშე. იხილეთ Pen Keyframes Tokens - დემო 9 [ჩანგალი] ამიტ შინის მიერ. ანიმაცია-კომპოზიციის დასამატებლად, ანიმაცია შეუფერხებლად არის შერწყმული არსებულთანგარდაქმნას, ასე რომ ელემენტი რჩება ადგილზე და აცოცხლებს, როგორც მოსალოდნელია. ანიმაცია Stagger მრავალი ანიმაციის დამუშავების კიდევ ერთი გზაა მათი „დაძაბვა“ - ანუ, მეორე ანიმაციის დაწყება ოდნავ პირველის დასრულების შემდეგ. ეს არ არის გამოსავალი, რომელიც მუშაობს ყველა შემთხვევაში, მაგრამ სასარგებლოა, როდესაც გვაქვს შესასვლელი ანიმაცია, რასაც მოჰყვება უწყვეტი ანიმაცია. /* გაქრება + გამჭვირვალობის პულსი */ .შეტყობინება { ანიმაცია: kf-fade-in 2s ease-out, kf-pulse 0.5s 2s ease-in-out უსასრულო ალტერნატივა; --kf-პულსი-გაუმჭვირვალობა-მდე: 0.5; }
იხილეთ Pen Keyframes Tokens - დემო 10 [ჩანგალი] ამიტ შინის მიერ. შეკვეთა მნიშვნელოვანია ანიმაციების დიდი ნაწილი, რომლებთანაც ჩვენ ვმუშაობთ, იყენებს ტრანსფორმაციის თვისებას. უმეტეს შემთხვევაში, ეს უბრალოდ უფრო მოსახერხებელია. მას ასევე აქვს შესრულების უპირატესობა, რადგან ტრანსფორმაციის ანიმაციები შეიძლება იყოს GPU-ით დაჩქარებული. მაგრამ თუ ჩვენ ვიყენებთ გარდაქმნებს, უნდა მივიღოთ, რომ მნიშვნელობა აქვს იმ თანმიმდევრობას, რომლითაც ვასრულებთ ჩვენს ტრანსფორმაციას. ბევრი. ჩვენს საკვანძო ჩარჩოებში აქამდე ჩვენ ვიყენებდით ინდივიდუალურ ტრანსფორმაციას. სპეციფიკაციების მიხედვით, ისინი ყოველთვის გამოიყენება ფიქსირებული თანმიმდევრობით: ჯერ ელემენტი იღებს ტრანსლაციას, შემდეგ როტაციას, შემდეგ მასშტაბებს. ეს ლოგიკურია და არის ის, რასაც ჩვენგანი უმეტესობა ელოდება. თუმცა, თუ გამოვიყენებთ ტრანსფორმაციის თვისებას, ფუნქციების ჩაწერის თანმიმდევრობა არის მათი გამოყენების თანმიმდევრობა. ამ შემთხვევაში, თუ X ღერძზე რაღაც 100 პიქსელით გადავიტანეთ და შემდეგ 45 გრადუსით მოვატრიალოთ, ეს არ არის იგივე, რაც ჯერ 45 გრადუსით და შემდეგ 100 პიქსელით გადაადგილება. /* ვარდისფერი კვადრატი: ჯერ გადათარგმნე, შემდეგ გადაატრიალე */ .მაგალითი-ერთი { transform: translateX(100px) rotate(45deg); }
/* მწვანე კვადრატი: ჯერ გადაატრიალეთ, შემდეგ გადათარგმნეთ */ .მაგალითი-ორი { transform: rotate(45deg) translateX(100px); }
იხილეთ Pen Keyframes Tokens - დემო 11 [ჩანგალი] ამიტ შინის მიერ. მაგრამ ტრანსფორმაციის თანმიმდევრობის მიხედვით, ყველა ინდივიდუალური ტრანსფორმაცია - ყველაფერი, რაც ჩვენ გამოვიყენეთ საკვანძო კადრების ნიშნისთვის - ხდება ტრანსფორმაციის ფუნქციებამდე. ეს ნიშნავს, რომ ყველაფერი, რაც თქვენ დააყენეთ ტრანსფორმაციის თვისებაში, მოხდება ანიმაციის შემდეგ. მაგრამ თუ თქვენ დააყენეთ, მაგალითად, თარგმნა kf-spin საკვანძო კადრებთან ერთად, თარგმნა მოხდება ანიმაციამდე. კიდევ დაბნეული?! ეს იწვევს სიტუაციებს, როდესაც სტატიკური მნიშვნელობები შეიძლება გამოიწვიოს სხვადასხვა შედეგი ერთი და იგივე ანიმაციისთვის, მაგალითად შემდეგ შემთხვევაში:
/* საერთო ანიმაცია ორივე სპინერისთვის */ .სპინერი { ანიმაცია: kf-spin 1s linear infinite; }
/* ვარდისფერი სპინერი: თარგმნა როტაციამდე (ინდივიდუალური ტრანსფორმაცია) */ .სპინერ-ვარდისფერი { თარგმნა: 100% 50%; }
/* მწვანე სპინერი: როტაცია, შემდეგ თარგმნა (ფუნქციის თანმიმდევრობა) */ .სპინერ-მწვანე { transform: translate(100%, 50%); }
იხილეთ Pen Keyframes Tokens - დემო 12 [ჩანგალი] ამიტ შინის მიერ. თქვენ ხედავთ, რომ პირველი სპინერი (ვარდისფერი) იღებს თარგმანს, რომელიც ხდება kf-სპინის ბრუნვამდე, ასე რომ, ის ჯერ თავის ადგილზე გადადის და შემდეგ ტრიალებს. მეორე სპინერი (მწვანე) იღებს translate() ფუნქციას, რომელიც ხდება ინდივიდუალური ტრანსფორმაციის შემდეგ, ამიტომ ელემენტი ჯერ ტრიალებს, შემდეგ მოძრაობს მისი მიმდინარე კუთხით და მივიღებთ ამ ფართო ორბიტის ეფექტს. არა, ეს არ არის შეცდომა. ეს მხოლოდ ერთ-ერთია იმ საკითხთაგან, რაც უნდა ვიცოდეთ CSS-ის შესახებ და გვახსოვდეს მრავალ ანიმაციასთან ან მრავალ ტრანსფორმაციასთან მუშაობისას. საჭიროების შემთხვევაში, თქვენ ასევე შეგიძლიათ შექმნათ kf-spin-alt საკვანძო ჩარჩოების დამატებითი ნაკრები, რომლებიც ატრიალებენ ელემენტებს rotate() ფუნქციის გამოყენებით. შემცირებული მოძრაობა და სანამ ჩვენ ვსაუბრობთ ალტერნატიულ საკვანძო ჩარჩოებზე, ჩვენ არ შეგვიძლია უგულებელვყოთ "ანიმაციის გარეშე" ვარიანტი. Keyframe-ის ჟეტონების გამოყენების ერთ-ერთი ყველაზე დიდი უპირატესობა ის არის, რომ ხელმისაწვდომობა შეიძლება გამომცხვარი იყოს და ამის გაკეთება რეალურად საკმაოდ მარტივია. ხელმისაწვდომობის გათვალისწინებით ჩვენი საკვანძო კადრების შემუშავებით, ჩვენ შეგვიძლია დავრწმუნდეთ, რომ მომხმარებლები, რომლებიც უპირატესობას ანიჭებენ შემცირებულ მოძრაობას, მიიღებენ უფრო გლუვ, ნაკლებად ყურადღების მიქცევას, დამატებითი სამუშაოს ან კოდის დუბლირების გარეშე. „შემცირებული მოძრაობის“ ზუსტი მნიშვნელობა შეიძლება ოდნავ შეიცვალოს ერთი ანიმაციიდან მეორეზე და პროექტიდან პროექტზე, მაგრამ აქ არის რამდენიმე მნიშვნელოვანი პუნქტი, რომელიც უნდა გახსოვდეთ: საკვანძო ჩარჩოების დადუმება მიუხედავად იმისა, რომ ზოგიერთი ანიმაცია შეიძლება შერბილდეს ან შენელდეს, არის სხვები, რომლებიც მთლიანად უნდა გაქრეს მოძრაობის შემცირების მოთხოვნისას. პულსის ანიმაციები კარგი მაგალითია. იმისათვის, რომ დავრწმუნდეთ, რომ ეს ანიმაციები არ მუშაობს შემცირებული მოძრაობის რეჟიმში, ჩვენ შეგვიძლია უბრალოდ ჩავაკრათ ისინი შესაბამის მედია მოთხოვნაში.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { საწყისი { მასშტაბი: var(--kf-pulse-scale-from, 1); გამჭვირვალობა: var(--kf-პულსი-გაუმჭვირვალობა-დან, 1); } მდე { მასშტაბი: var(--kf-pulse-scale-to, 1); გამჭვირვალობა:var (--kf-პულსი-გაუმჭვირვალობა-მდე, 1); } } }
ეს უზრუნველყოფს, რომ მომხმარებლები, რომლებმაც დააყენეს prefers-reduced-motion შემცირება, ვერ ნახავენ ანიმაციას და მიიღებენ გამოცდილებას, რომელიც შეესაბამება მათ უპირატესობას. მყისიერი შესვლა არის რამდენიმე საკვანძო ჩარჩო, რომელსაც უბრალოდ ვერ ამოიღებთ, როგორიცაა შესასვლელი ანიმაციები. მნიშვნელობა უნდა შეიცვალოს, უნდა აცოცხლოს; წინააღმდეგ შემთხვევაში, ელემენტს არ ექნება სწორი მნიშვნელობები. მაგრამ შემცირებული მოძრაობისას, ეს გადასვლა საწყისი მნიშვნელობიდან მყისიერი უნდა იყოს. ამის მისაღწევად, ჩვენ განვსაზღვრავთ საკვანძო კადრების დამატებით კომპლექტს, სადაც მნიშვნელობა დაუყოვნებლივ გადადის საბოლოო მდგომარეობაში. ეს ხდება ჩვენი ნაგულისხმევი საკვანძო ჩარჩოები. შემდეგ, ჩვენ დავამატებთ რეგულარულ საკვანძო კადრებს მედია მოთხოვნის შიგნით 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); } } }
ამ გზით, მომხმარებლები, რომლებიც უპირატესობას ანიჭებენ შემცირებულ მოძრაობას, დაინახავენ, რომ ელემენტი მყისიერად გამოჩნდება მის საბოლოო მდგომარეობაში, ხოლო ყველა დანარჩენი მიიღებს ანიმაციურ გადასვლას. რბილი მიდგომა არის შემთხვევები, როდესაც ჩვენ გვსურს შევინარჩუნოთ მოძრაობა, მაგრამ ბევრად უფრო რბილი და მშვიდი, ვიდრე ორიგინალური ანიმაცია. მაგალითად, ჩვენ შეგვიძლია შევცვალოთ bounce შესასვლელი ნაზი fade-in-ით.
@keyframes kf-bounce { /* რბილი გაქრობა შემცირებული მოძრაობისთვის */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* ორიგინალური bounce keyframes */ } }
ახლა, შემცირებული მოძრაობის ჩართვის მქონე მომხმარებლები კვლავ იღებენ გარეგნობის შეგრძნებას, მაგრამ ინტენსიური გადაადგილების ან ელასტიური ანიმაციის გარეშე. სამშენებლო ბლოკების ადგილზე, შემდეგი კითხვაა, თუ როგორ უნდა გახადოთ ისინი რეალურ სამუშაო ნაწილად. მოქნილი საკვანძო კადრების დაწერა ერთი რამ არის, მაგრამ მათი საიმედოობის შექმნა დიდ პროექტში მოითხოვს რამდენიმე სტრატეგიას, რომლის სწავლა რთულად მომიწია. განხორციელების სტრატეგიები და საუკეთესო პრაქტიკა მას შემდეგ, რაც ჩვენ გვექნება საკვანძო ჩარჩოების ნიშნების მყარი ბიბლიოთეკა, რეალური გამოწვევაა, როგორ მოვიყვანოთ ისინი ყოველდღიურ მუშაობაში.
ცდუნება არის ერთდროულად ჩააგდო ყველა საკვანძო ფრეიმი და გამოაცხადო პრობლემა მოგვარებულად, მაგრამ პრაქტიკაში მივხვდი, რომ საუკეთესო შედეგი თანდათანობით მიღებით მოდის. დაიწყეთ ყველაზე გავრცელებული ანიმაციებით, როგორიცაა fade ან slide. ეს არის მარტივი მოგება, რომელიც აჩვენებს დაუყოვნებლივ მნიშვნელობას დიდი გადაწერის გარეშე. დასახელება კიდევ ერთი პუნქტია, რომელიც ყურადღებას იმსახურებს. თანმიმდევრული პრეფიქსი ან სახელთა სივრცე ცხადყოფს, თუ რომელი ანიმაცია არის ნიშანი და რომელი ადგილობრივი ერთჯერადი. ის ასევე ხელს უშლის შემთხვევით შეჯახებებს და ეხმარება გუნდის ახალ წევრებს ერთი შეხედვით ამოიცნონ საერთო სისტემა. დოკუმენტაცია ისეთივე მნიშვნელოვანია, როგორც თავად კოდი. თითოეული საკვანძო კადრის ჟეტონის ზემოთ მოკლე კომენტარიც კი დაზოგავს საათობით გამოცნობას. დეველოპერს უნდა შეეძლოს გახსნას ტოკენების ფაილი, სკანირება მოახდინოს მათთვის საჭირო ეფექტისთვის და დააკოპიროს გამოყენების ნიმუში პირდაპირ მათ კომპონენტში. მოქნილობა არის ის, რაც ამ მიდგომას ძალისხმევის ღირსად აქცევს. გონივრული მორგებული თვისებების გამოვლენით, ჩვენ გუნდებს ვაძლევთ ადგილს ანიმაციის ადაპტირებისთვის სისტემის დარღვევის გარეშე. ამავე დროს, შეეცადეთ არ გაართულოთ. მიაწოდეთ მნიშვნელოვანი სახელურები და შეინახეთ დანარჩენი აზრი. და ბოლოს, გახსოვდეთ ხელმისაწვდომობა. ყველა ანიმაციას არ სჭირდება შემცირებული მოძრაობის ალტერნატივა, მაგრამ ბევრს სჭირდება. ამ კორექტირების ადრეული გამოცხობა ნიშნავს, რომ ჩვენ არასდროს მოგვიწევს მათი გადაკეთება მოგვიანებით და ეს აჩვენებს მზრუნველობის დონეს, რომელსაც ჩვენი მომხმარებლები შეამჩნევენ მაშინაც კი, თუ ისინი არასოდეს ახსენებენ მას.
ჩემი გამოცდილებიდან გამომდინარე, საკვანძო ფრეიმების ტოკენების, როგორც ჩვენი დიზაინის ტოკენების სამუშაო პროცესის ნაწილად განხილვა, არის ის, რაც მათ აკავშირებს. მას შემდეგ, რაც ისინი ადგილზე იქნებიან, ისინი წყვეტენ განცდას, როგორც სპეციალური ეფექტები და ხდებიან დიზაინის ენის ნაწილი, ბუნებრივი გაფართოება, თუ როგორ მოძრაობს პროდუქტი და რეაგირებს. შეფუთვა ანიმაციები შეიძლება იყოს შენობის ინტერფეისების ერთ-ერთი ყველაზე მხიარული ნაწილი, მაგრამ სტრუქტურის გარეშე, ისინი ასევე შეიძლება გახდეს იმედგაცრუების ერთ-ერთი ყველაზე დიდი წყარო. საკვანძო ფრეიმების ნიშნად მიქცევით, თქვენ იღებთ რაღაცას, რაც ჩვეულებრივ ბინძურ და რთულად სამართავია და აქცევთ მას ნათელ, პროგნოზირებად სისტემად. რეალური მნიშვნელობა არ არის მხოლოდ კოდის რამდენიმე ხაზის შენახვა. დარწმუნებულია, რომ როდესაც იყენებთ fade-ს, სლაიდს, მასშტაბირებას ან ტრიალს, თქვენ ზუსტად იცით, როგორ მოიქცევა იგი პროექტში. ეს არის მოქნილობა, რომელიც მოდის საბაჟო თვისებებიდან გაუთავებელი ვარიაციების ქაოსის გარეშე. და ეს არის საძირკველში ჩაშენებული ხელმისაწვდომობა, ვიდრე დამატებულიშემდგომი აზრი. მე მინახავს, რომ ეს იდეები მუშაობენ სხვადასხვა გუნდში და სხვადასხვა კოდის ბაზაში, და ნიმუში ყოველთვის ერთი და იგივეა. მას შემდეგ, რაც ჟეტონები ადგილზე იქნება, საკვანძო ჩარჩოები წყვეტს ხრიკების მიმოფანტული კოლექციას და გახდება დიზაინის ენის ნაწილი. ისინი ქმნიან პროდუქტს უფრო მიზანმიმართულს, უფრო თანმიმდევრულს და უფრო ცოცხალს. თუ ამ სტატიიდან ერთ რამეს აიღებთ, ასეც იყოს: ანიმაციები იმსახურებენ იმავე ზრუნვას და სტრუქტურას, რასაც უკვე ვაძლევთ ფერებს, ტიპოგრაფიას და ინტერვალს. მცირე ინვესტიცია keyframe-ის ტოკენებში ანაზღაურდება ყოველ ჯერზე, როცა თქვენი ინტერფეისი მოძრაობს.
