បង្ហាញរូបភាពនេះ៖ អ្នកចូលរួមក្នុងគម្រោងថ្មី ចូលទៅក្នុងមូលដ្ឋានកូដ ហើយក្នុងរយៈពេលពីរបីម៉ោងដំបូង អ្នករកឃើញអ្វីមួយដែលគួរឱ្យភ្ញាក់ផ្អើលដែលធ្លាប់ស្គាល់។ រាយប៉ាយពាសពេញសន្លឹករចនាប័ទ្ម អ្នករកឃើញនិយមន័យ @keyframes ជាច្រើនសម្រាប់ចលនាមូលដ្ឋានដូចគ្នា។ បែបផែនរសាត់បីផ្សេងគ្នា បំរែបំរួលស្លាយពីរ ឬបី ចលនាពង្រីកមួយក្តាប់តូច និងចលនាបង្វិលយ៉ាងតិចពីរផ្សេងគ្នា ពីព្រោះហេតុអ្វីមិនធ្វើ? @keyframes ជីពចរ { ពី { មាត្រដ្ឋាន៖ ១; } ទៅ { មាត្រដ្ឋាន: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { មាត្រដ្ឋាន៖ ១; } 10%, 40% { មាត្រដ្ឋាន: 1.2; } }
ប្រសិនបើសេណារីយ៉ូនេះស្តាប់ទៅដូចជាស៊ាំ អ្នកមិននៅម្នាក់ឯងទេ។ នៅក្នុងបទពិសោធន៍របស់ខ្ញុំក្នុងគម្រោងផ្សេងៗ ការឈ្នះរហ័សដែលជាប់លាប់បំផុតមួយដែលខ្ញុំអាចផ្តល់ជូនគឺការបង្រួបបង្រួម និងធ្វើឱ្យស៊ុមគន្លឹះស្តង់ដារ។ វាក្លាយជាគំរូដែលអាចទុកចិត្តបាន ដែលឥឡូវនេះខ្ញុំទន្ទឹងរង់ចាំការសម្អាតនេះជាកិច្ចការដំបូងរបស់ខ្ញុំនៅលើមូលដ្ឋានកូដថ្មីណាមួយ។ តក្កវិជ្ជានៅពីក្រោយភាពវឹកវរ ភាពមិនដូចគ្នានេះធ្វើឱ្យយល់បានល្អឥតខ្ចោះនៅពេលអ្នកគិតអំពីវា។ យើងទាំងអស់គ្នាប្រើចលនាជាមូលដ្ឋានដូចគ្នានៅក្នុងការងារប្រចាំថ្ងៃរបស់យើង៖ បន្ថយ ស្លាយ ពង្រីក បង្វិល និងផលប៉ះពាល់ទូទៅផ្សេងទៀត។ គំនូរជីវចលទាំងនេះគឺពិតជាសាមញ្ញណាស់ ហើយវាងាយស្រួលក្នុងការសរសេរនិយមន័យ @keyframes រហ័ស ដើម្បីសម្រេចការងារ។ បើគ្មានប្រព័ន្ធចលនាកណ្តាលទេ អ្នកអភិវឌ្ឍន៍សរសេរស៊ុមគន្លឹះទាំងនេះដោយធម្មជាតិ ដោយមិនដឹងថាមានចលនាស្រដៀងគ្នានេះនៅកន្លែងផ្សេងទៀតនៅក្នុងមូលដ្ឋានកូដនោះទេ។ នេះជារឿងធម្មតាជាពិសេសនៅពេលធ្វើការនៅក្នុងស្ថាបត្យកម្មផ្អែកលើសមាសធាតុ (ដែលយើងភាគច្រើនធ្វើសព្វថ្ងៃនេះ) ដោយសារក្រុមតែងតែធ្វើការស្របគ្នានៅផ្នែកផ្សេងៗនៃកម្មវិធី។ លទ្ធផល? ភាពវឹកវរនៃចលនា។ បញ្ហាតូចតាច បញ្ហាជាក់ស្តែងបំផុតជាមួយការចម្លង keyframes គឺខ្ជះខ្ជាយពេលវេលាអភិវឌ្ឍន៍ និងកូដដែលមិនចាំបាច់។ និយមន័យ keyframe ច្រើនមានន័យថាកន្លែងជាច្រើនដើម្បីធ្វើបច្ចុប្បន្នភាពនៅពេលដែលតម្រូវការផ្លាស់ប្តូរ។ ត្រូវការកែតម្រូវពេលវេលានៃចលនារសាត់របស់អ្នកមែនទេ? អ្នកនឹងត្រូវតាមដានរាល់ករណីនៅទូទាំងមូលដ្ឋានកូដរបស់អ្នក។ ចង់ធ្វើស្តង់ដារមុខងារបន្ធូរបន្ថយ? សូមសំណាងល្អក្នុងការស្វែងរកការប្រែប្រួលទាំងអស់។ ការគុណនៃចំណុចថែទាំនេះធ្វើឱ្យសូម្បីតែចលនាសាមញ្ញធ្វើឱ្យទាន់សម័យនូវកិច្ចការដែលចំណាយពេលច្រើន។ បញ្ហាធំជាង ការចម្លងនៃស៊ុមគន្លឹះនេះបង្កើតបញ្ហាកាន់តែអាក្រក់ដែលលាក់ខ្លួននៅក្រោមផ្ទៃ៖ អន្ទាក់វិសាលភាពសកល។ សូម្បីតែនៅពេលធ្វើការជាមួយស្ថាបត្យកម្មផ្អែកលើសមាសធាតុក៏ដោយ CSS keyframes តែងតែត្រូវបានកំណត់នៅក្នុងវិសាលភាពសកល។ នេះមានន័យថា keyframes ទាំងអស់អនុវត្តចំពោះសមាសធាតុទាំងអស់។ ជានិច្ច។ បាទ ចលនារបស់អ្នកមិនចាំបាច់ប្រើ keyframes ដែលអ្នកបានកំណត់នៅក្នុងសមាសធាតុរបស់អ្នកទេ។ វាប្រើស៊ុមគន្លឹះចុងក្រោយដែលត្រូវគ្នានឹងឈ្មោះដូចគ្នាដែលត្រូវបានផ្ទុកទៅក្នុងវិសាលភាពសកល។ ដរាបណា keyframes ទាំងអស់របស់អ្នកដូចគ្នាបេះបិទ វាអាចហាក់ដូចជាបញ្ហាតូចតាច។ ប៉ុន្តែនៅពេលដែលអ្នកចង់ប្ដូរចលនាតាមបំណងសម្រាប់ករណីប្រើប្រាស់ជាក់លាក់មួយ អ្នកមានបញ្ហា ឬអាក្រក់ជាងនេះ អ្នកនឹងក្លាយជាអ្នកបង្កឱ្យពួកគេ។ ទាំងគំនូរជីវចលរបស់អ្នកនឹងមិនដំណើរការទេ ពីព្រោះសមាសធាតុផ្សេងទៀតដែលផ្ទុកបន្ទាប់ពីរបស់អ្នក សរសេរជាន់លើ keyframe របស់អ្នក ឬសមាសធាតុរបស់អ្នកផ្ទុកចុងក្រោយ និងដោយចៃដន្យផ្លាស់ប្តូរឥរិយាបថចលនាសម្រាប់រាល់សមាសធាតុផ្សេងទៀតដោយប្រើឈ្មោះរបស់ keyframe នោះ ហើយអ្នកប្រហែលជាមិនដឹងវាទេ។ នេះគឺជាឧទាហរណ៍ដ៏សាមញ្ញមួយដែលបង្ហាញពីបញ្ហា៖ .component-one { /* រចនាប័ទ្មសមាសធាតុ */ ចលនា៖ ជីពចរ 1s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់; }
/* និយមន័យ @keyframes នេះនឹងមិនដំណើរការទេ */ @keyframes ជីពចរ { ពី { មាត្រដ្ឋាន៖ ១; } ទៅ { មាត្រដ្ឋាន: 1.1; } }
/* ក្រោយមកនៅក្នុងកូដ... */
.component-ពីរ { /* រចនាប័ទ្មសមាសធាតុ */ ចលនា៖ ជីពចរ 1s ងាយស្រួលចូល-ចេញគ្មានកំណត់; }
/* keyframes នេះនឹងអនុវត្តចំពោះសមាសភាគទាំងពីរ */ @keyframes ជីពចរ { 0%, 20%, 100% { មាត្រដ្ឋាន៖ ១; } 10%, 40% { មាត្រដ្ឋាន: 1.2; } }
សមាសធាតុទាំងពីរប្រើឈ្មោះចលនាដូចគ្នា ប៉ុន្តែនិយមន័យ @keyframes ទីពីរសរសេរជាន់លើទីមួយ។ ឥឡូវនេះ ទាំង component-one និង component-2 នឹងប្រើ keyframes ទីពីរ ដោយមិនគិតពី component ដែលកំណត់ keyframes ណាមួយឡើយ។ សូមមើល Pen Keyframes Tokens - Demo 1 [forked] ដោយ Amit Sheen។ ផ្នែកដ៏អាក្រក់បំផុត? ជារឿយៗវាដំណើរការយ៉ាងល្អឥតខ្ចោះក្នុងការអភិវឌ្ឍន៍មូលដ្ឋាន ប៉ុន្តែបំបែកអាថ៌កំបាំងនៅក្នុងផលិតកម្ម នៅពេលដែលដំណើរការសាងសង់ផ្លាស់ប្តូរលំដាប់នៃការផ្ទុកសន្លឹករចនាប័ទ្មរបស់អ្នក។ អ្នកបញ្ចប់ដោយចលនាដែលមានសកម្មភាពខុសគ្នាអាស្រ័យលើសមាសធាតុមួយណាដែលត្រូវបានផ្ទុក និងក្នុងលំដាប់ណា។ ដំណោះស្រាយ៖ ស៊ុមគន្លឹះបង្រួបបង្រួម ចម្លើយចំពោះភាពច្របូកច្របល់នេះគឺសាមញ្ញគួរឱ្យភ្ញាក់ផ្អើល៖ ស៊ុមគន្លឹះថាមវន្តដែលបានកំណត់ជាមុនត្រូវបានរក្សាទុកក្នុងសន្លឹករចនាប័ទ្មដែលបានចែករំលែក។ ជំនួសឱ្យការអនុញ្ញាតឱ្យសមាសធាតុនីមួយៗកំណត់ចលនារបស់វាផ្ទាល់ យើងបង្កើតស៊ុមគន្លឹះកណ្តាលដែលចងក្រងឯកសារបានល្អ ងាយស្រួលក្នុងការប្រើប្រាស់ រក្សាបាន និងសម្របតាមតម្រូវការជាក់លាក់នៃគម្រោងរបស់អ្នក។ គិតថាវាជានិមិត្តសញ្ញា keyframes ។ ដូចដែលយើងប្រើថូខឹនសម្រាប់ពណ៌ និងគម្លាត ហើយយើងជាច្រើននាក់បានប្រើថូខឹនសម្រាប់លក្ខណៈសម្បត្តិចលនារួចហើយ ដូចជារយៈពេល និងមុខងារបន្ធូរបន្ថយ ហេតុអ្វីមិនប្រើថូខឹនសម្រាប់ស៊ុមគន្លឹះផងដែរ? វិធីសាស្រ្តនេះអាចរួមបញ្ចូលជាលក្ខណៈធម្មជាតិជាមួយនឹងដំណើរការការងារនិមិត្តសញ្ញាបច្ចុប្បន្នដែលអ្នកកំពុងប្រើ ខណៈពេលដែលការដោះស្រាយបញ្ហាតូចតាច (ការចម្លងកូដ) និងបញ្ហាធំជាង (ជម្លោះវិសាលភាពសកល) ក្នុងពេលតែមួយ។ គំនិតនេះគឺត្រង់៖ បង្កើតប្រភពនៃការពិតតែមួយសម្រាប់ចលនាទូទៅរបស់យើង។ សន្លឹករចនាប័ទ្មដែលបានចែករំលែកនេះមាន keyframes ដោយប្រុងប្រយ័ត្នដែលគ្របដណ្តប់លំនាំចលនាដែលគម្រោងរបស់យើងពិតជាប្រើ។ គ្មានការស្មានទៀតទេថា តើមានចលនាដែលស្រងូតស្រងាត់រួចហើយនៅកន្លែងណាមួយនៅក្នុងមូលដ្ឋានកូដរបស់យើង។ គ្មានការសរសេរជាន់លើចលនាដោយចៃដន្យពីសមាសធាតុផ្សេងទៀតទេ។ ប៉ុន្តែនេះគឺជាគន្លឹះ៖ ទាំងនេះមិនមែនគ្រាន់តែជាចលនាចម្លង-បិទភ្ជាប់ឋិតិវន្តប៉ុណ្ណោះទេ។ ពួកវាត្រូវបានរចនាឡើងដើម្បីឱ្យមានភាពស្វាហាប់ និងអាចប្ដូរតាមបំណងបានតាមរយៈលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនរបស់ 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 តែមួយនេះជំនួសចលនាដែលនៅរាយប៉ាយទាំងអស់ដែលនៅទូទាំងមូលដ្ឋានកូដរបស់យើង។ ស្អាត សាមញ្ញ និងអាចអនុវត្តបានជាសកល។ ហើយឥឡូវនេះ ដែលយើងកំណត់សញ្ញាសម្ងាត់នេះ យើងអាចប្រើវាពីសមាសធាតុណាមួយនៅទូទាំងគម្រោងរបស់យើង៖ .modal { ចលនា៖ kf-fade-in 0.3s ងាយស្រួលចេញ; }
.ព័ត៌មានជំនួយ { ចលនា៖ kf-fade-in 0.2s ងាយស្រួលចូល-ចេញ; }
.ការជូនដំណឹង { ចលនា៖ kf-fade-in 0.5s ងាយស្រួលចេញ; }
សូមមើល Pen Keyframes Tokens - Demo 2 [forked] ដោយ Amit Sheen។ ចំណាំ៖ យើងកំពុងប្រើបុព្វបទ kf នៅក្នុងឈ្មោះ @keyframes របស់យើង។ បុព្វបទនេះបម្រើជាចន្លោះឈ្មោះដែលការពារការប៉ះទង្គិចគ្នានៃឈ្មោះជាមួយចលនាដែលមានស្រាប់នៅក្នុងគម្រោង ហើយធ្វើឱ្យវាច្បាស់ភ្លាមៗថា keyframes ទាំងនេះបានមកពីឯកសារ keyframes tokens របស់យើង។ ការបង្កើតស្លាយថាមវន្ត ស៊ុមគន្លឹះ kf-fade-in ដំណើរការល្អ ព្រោះវាសាមញ្ញ ហើយមានកន្លែងតិចតួចក្នុងការរញ៉េរញ៉ៃ។ ទោះយ៉ាងណាក៏ដោយ នៅក្នុងគំនូរជីវចលផ្សេងទៀត យើងត្រូវមានភាពស្វាហាប់ជាងមុន ហើយនៅទីនេះយើងអាចប្រើប្រាស់ថាមពលដ៏ធំសម្បើមនៃលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនរបស់ CSS ។ នេះគឺជាកន្លែងដែលនិមិត្តសញ្ញា keyframes ពិតជាភ្លឺបើប្រៀបធៀបទៅនឹងចលនាឋិតិវន្តដែលខ្ចាត់ខ្ចាយ។ ចូរយកសេណារីយ៉ូទូទៅមួយ៖ ចលនា "ស្លាយចូល"។ ប៉ុន្តែរុញចូលពីណា? 100px ពីខាងស្ដាំ? 50% ពីខាងឆ្វេង? តើវាគួរចូលពីកំពូលនៃអេក្រង់ទេ? ឬប្រហែលជាអណ្តែតពីខាងក្រោម? លទ្ធភាពជាច្រើន ប៉ុន្តែជំនួសឱ្យការបង្កើត keyframes ដាច់ដោយឡែកសម្រាប់ទិសដៅនីមួយៗ និងបំរែបំរួលនីមួយៗ យើងអាចបង្កើតនិមិត្តសញ្ញាដែលអាចបត់បែនបានមួយដែលសម្របទៅនឹងគ្រប់សេណារីយ៉ូទាំងអស់៖ /* * ស្លាយចូល - ចលនាស្លាយទិសដៅ * ប្រើ --kf-slide-from ដើម្បីគ្រប់គ្រងទិសដៅ * លំនាំដើម៖ រុញចូលពីឆ្វេង (-100%) * ការប្រើប្រាស់៖ * ចលនា៖ kf-slide-in 0.3s ងាយស្រួលចេញ; * --kf-slide-from: -100px 0; // រុញពីឆ្វេង * --kf-slide-from: 100px 0; // រុញពីស្តាំ * --kf-slide-from: 0 -50px; // រុញពីលើ */
@keyframes kf-slide-in { ពី { បកប្រែ៖ var(--kf-slide-from, -100% 0); } ទៅ { បកប្រែ៖ ០ ០; } }
ឥឡូវនេះយើងអាចប្រើនិមិត្តសញ្ញា @keyframes តែមួយនេះសម្រាប់ទិសដៅស្លាយណាមួយដោយគ្រាន់តែផ្លាស់ប្តូរ --kf-slide-from ផ្ទាល់ខ្លួន៖ .របារចំហៀង { ចលនា៖ kf-slide-in 0.3s ងាយស្រួលចេញ; /* ប្រើតម្លៃលំនាំដើម៖ ស្លាយពីឆ្វេង */ }
.ការជូនដំណឹង { ចលនា៖ kf-slide-in 0.4s ងាយស្រួលចេញ; --kf-slide-from: 0 -50px; /* រុញពីលើ*/ }
.modal { ចលនា៖ 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 - Demo 3 [forked] ដោយ Amit Sheen។ ហើយប្រសិនបើយើងចង់ធ្វើឱ្យគំនូរជីវចលរបស់យើងកាន់តែមានភាពបត់បែន ដែលអនុញ្ញាតឱ្យមានផលប៉ះពាល់ "ការបញ្ចាំងស្លាយចេញ" ផងដែរនោះ យើងអាចគ្រាន់តែបន្ថែម --kf-slide-to- custom property ស្រដៀងនឹងអ្វីដែលយើងនឹងឃើញនៅក្នុងផ្នែកបន្ទាប់។ ស៊ុមគន្លឹះពង្រីកទ្វេទិស គំនូរជីវចលទូទៅមួយផ្សេងទៀតដែលស្ទួនគ្នានៅទូទាំងគម្រោងគឺផលប៉ះពាល់ "ពង្រីក" ។ ថាតើវាជាការបង្កើនទំហំតូចសម្រាប់សារ toast ការពង្រីកយ៉ាងខ្លាំងសម្រាប់ម៉ូឌុល ឬឥទ្ធិពលកម្រិតចុះក្រោមសម្រាប់ចំណងជើង ចលនាពង្រីកគឺនៅគ្រប់ទីកន្លែង។ ជំនួសឱ្យការបង្កើត keyframes ដាច់ដោយឡែកសម្រាប់តម្លៃខ្នាតនីមួយៗ ចូរយើងបង្កើតសំណុំ keyframes kf-zoom ដែលអាចបត់បែនបាន៖
/* * ពង្រីក - ចលនាខ្នាត * ប្រើ --kf-zoom-from និង --kf-zoom-to ដើម្បីគ្រប់គ្រងតម្លៃមាត្រដ្ឋាន * លំនាំដើម៖ ពង្រីកពី 80% ទៅ 100% (0.8 ទៅ 1) * ការប្រើប្រាស់៖ * ចលនា៖ kf-zoom 0.2s ងាយស្រួលចេញ; * --kf-zoom-ពី៖ 0.5; --kf-zoom-to: 1; // ពង្រីកពី 50% ទៅ 100% * --kf-zoom-ពី៖ ១; --kf-zoom-to: 0; // ពង្រីកពី 100% ទៅ 0% * --kf-zoom-ពី៖ ១; --kf-zoom-to: 1.1; // ពង្រីកពី 100% ទៅ 110% */
@keyframes kf-zoom { ពី { មាត្រដ្ឋាន៖ var(--kf-zoom-from, 0.8); } ទៅ { មាត្រដ្ឋាន៖ var(--kf-zoom-to, 1); } }
ជាមួយនឹងនិយមន័យមួយ យើងអាចសម្រេចបាននូវបំរែបំរួលការពង្រីកណាមួយដែលយើងត្រូវការ៖ .toast { ចលនា៖ kf-slide-in 0.2s, kf-zoom 0.4s ងាយស្រួលចេញ; --kf-slide-from: 0 100%; /* រុញពីលើ*/ /* ប្រើការពង្រីកលំនាំដើម៖ មាត្រដ្ឋានពី 80% ទៅ 100% */ }
.modal { ចលនា៖ 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 ងាយស្រួលចូល; --kf-zoom-ពី៖ ១.២; --kf-zoom-to: 0.8; // បន្ទាបបន្ថោកចុះក្រោម*/ }
លំនាំដើម 0.8 (80%) ដំណើរការយ៉ាងល្អឥតខ្ចោះសម្រាប់ធាតុ UI ភាគច្រើន ដូចជាសារ និងកាត ខណៈពេលដែលវានៅតែមានភាពងាយស្រួលក្នុងការប្ដូរតាមបំណងសម្រាប់ករណីពិសេស។ សូមមើល Pen Keyframes Tokens - Demo 4 [forked] ដោយ Amit Sheen។ អ្នកប្រហែលជាបានកត់សម្គាល់ឃើញអ្វីដែលគួរឱ្យចាប់អារម្មណ៍ក្នុងឧទាហរណ៍ថ្មីៗនេះ៖ យើងបានរួមបញ្ចូលចលនា។ អត្ថប្រយោជន៍សំខាន់មួយនៃការធ្វើការជាមួយ @keyframes tokens គឺថាពួកវាត្រូវបានរចនាឡើងដើម្បីរួមបញ្ចូលគ្នាទៅវិញទៅមកយ៉ាងរលូន។ សមាសភាពរលោងនេះគឺចេតនាមិនមែនដោយចៃដន្យទេ។ យើងនឹងពិភាក្សាអំពីសមាសភាពគំនូរជីវចលឱ្យកាន់តែលម្អិតនៅពេលក្រោយ រួមទាំងកន្លែងដែលពួកវាអាចក្លាយជាបញ្ហា ប៉ុន្តែបន្សំភាគច្រើនគឺត្រង់ និងងាយស្រួលក្នុងការអនុវត្ត។ ចំណាំ៖ ខណៈពេលដែលកំពុងសរសេរអត្ថបទនេះ ហើយប្រហែលជាដោយសារតែការសរសេរវា ខ្ញុំបានរកឃើញថាខ្លួនខ្ញុំកំពុងគិតឡើងវិញនូវគំនិតទាំងមូលនៃចលនាចូល។ ជាមួយនឹងភាពជឿនលឿនថ្មីៗទាំងអស់នៅក្នុង CSS តើយើងនៅតែត្រូវការវាដែរឬទេ? ជាសំណាងល្អ Adam Argyle បានស្វែងរកសំណួរដូចគ្នា ហើយបង្ហាញពួកគេយ៉ាងអស្ចារ្យនៅក្នុងប្លក់របស់គាត់។ នេះមិនផ្ទុយនឹងអ្វីដែលបានសរសេរនៅទីនេះទេ ប៉ុន្តែវាបង្ហាញពីវិធីសាស្រ្តដែលគួរពិចារណា ជាពិសេសប្រសិនបើគម្រោងរបស់អ្នកពឹងផ្អែកខ្លាំងលើចលនាចូល។ ចលនាបន្ត ខណៈពេលដែលចលនាចូលដូចជា "បន្ថយ" "ស្លាយ" និង "ពង្រីក" កើតឡើងម្តងហើយបន្ទាប់មកឈប់ ចលនាបន្តរង្វិលជុំដោយគ្មានកំណត់ដើម្បីទាក់ទាញចំណាប់អារម្មណ៍ ឬបង្ហាញពីសកម្មភាពដែលកំពុងបន្ត។ ចលនាបន្តទូទៅបំផុតពីរដែលខ្ញុំជួបប្រទះគឺ "បង្វិល" (សម្រាប់សូចនាករផ្ទុក) និង "ជីពចរ" (សម្រាប់ការបន្លិចធាតុសំខាន់ៗ) ។ គំនូរជីវចលទាំងនេះបង្ហាញពីបញ្ហាប្រឈមតែមួយគត់នៅពេលនិយាយអំពីការបង្កើតនិមិត្តសញ្ញាស៊ុមគន្លឹះ។ មិនដូចគំនូរជីវចលចូលដែលជាធម្មតាចេញពីរដ្ឋមួយទៅរដ្ឋមួយទៀត ចលនាបន្តត្រូវតែអាចប្ដូរតាមបំណងបានក្នុងទម្រង់អាកប្បកិរិយារបស់វា។ វេជ្ជបណ្ឌិតបង្វិល គម្រោងនីមួយៗហាក់ដូចជាប្រើចលនាបង្វិលច្រើន។ ខ្លះបង្វិលតាមទ្រនិចនាឡិកា ខ្លះទៀតច្រាសទ្រនិចនាឡិកា។ អ្នកខ្លះបង្វិល 360 ដឺក្រេតែមួយ អ្នកខ្លះទៀតបង្វិលច្រើនដងដើម្បីទទួលបានប្រសិទ្ធភាពលឿនជាងមុន។ ជំនួសឱ្យការបង្កើត keyframes ដាច់ដោយឡែកសម្រាប់បំរែបំរួលនីមួយៗ សូមបង្កើតការបង្វិលដែលអាចបត់បែនបានមួយដែលគ្រប់គ្រងគ្រប់សេណារីយ៉ូ៖
/* * បង្វិល - ចលនាបង្វិល * ប្រើ --kf-spin-from និង --kf-spin-to ដើម្បីគ្រប់គ្រងជួរបង្វិល * ប្រើ --kf-spin-turns ដើម្បីគ្រប់គ្រងចំនួនបង្វិល * លំនាំដើម៖ បង្វិលពី 0deg ទៅ 360deg (1 បង្វិលពេញ) * ការប្រើប្រាស់៖ * ចលនា៖ kf-spin 1s លីនេអ៊ែរគ្មានកំណត់; * --kf-spin-turns: 2; // 2 ការបង្វិលពេញលេញ * --kf-បង្វិល-ពី៖ 0deg; --kf-បង្វិលទៅ: 180deg; // ការបង្វិលពាក់កណ្តាល * --kf-បង្វិល-ពី៖ 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 លីនេអ៊ែរគ្មានកំណត់; /* ប្រើលំនាំដើម៖ បង្វិលពី 0deg ទៅ 360deg */ }
.fast-loader { ចលនា៖ kf-spin 1.2s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់; --kf-spin-turns: 3; /* 3 ការបង្វិលពេញលេញសម្រាប់ទិសដៅនីមួយៗក្នុងមួយវដ្ត*/ }
.steped-reverse { ចលនា៖ kf-spin 1.5s ជំហាន (8) គ្មានកំណត់; --kf-spin-to: -360deg; /* ច្រាសទ្រនិចនាឡិកា */ }
.subtle-wiggle { ចលនា៖ kf-spin 2s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់; --kf-បង្វិល-ពី: -16deg; --kf-spin-to: 32deg; /* បង្វិល 36 ដឺក្រេ: ចន្លោះពី -18deg និង +18deg */ }
សូមមើល Pen Keyframes Tokens - Demo 5 [forked] ដោយ Amit Sheen។ ភាពស្រស់ស្អាតនៃវិធីសាស្រ្តនេះគឺថា keyframes ដូចគ្នាដំណើរការសម្រាប់ការផ្ទុក spinners, rotating icons, wiggle effects និងសូម្បីតែចលនាពហុវេនស្មុគស្មាញ។ The Pulse Paradox ចលនាជីពចរគឺមានល្បិចជាងព្រោះវាអាច "ជីពចរ" លក្ខណៈផ្សេងគ្នា។ ខ្លះជីពចរតាមមាត្រដ្ឋាន ខ្លះទៀតជីពចរនៃភាពស្រអាប់ និងលក្ខណៈសម្បត្តិពណ៌ជីពចរមួយចំនួនដូចជាពន្លឺ ឬភាពឆ្អែត។ ជាជាងបង្កើត keyframes ដាច់ដោយឡែកសម្រាប់ property នីមួយៗ យើងអាចបង្កើត keyframes ដែលដំណើរការជាមួយ CSS property ណាមួយ។ នេះជាឧទាហរណ៍នៃស៊ុមគន្លឹះជីពចរដែលមានជម្រើសមាត្រដ្ឋាន និងភាពស្រអាប់៖
/* * ជីពចរ - ចលនាជីពចរ * ប្រើ --kf-pulse-scale-from និង --kf-pulse-scale-to ដើម្បីគ្រប់គ្រងជួរមាត្រដ្ឋាន * ប្រើ --kf-pulse-opacity-from និង --kf-pulse-opacity- ដើម្បីគ្រប់គ្រងជួរភាពស្រអាប់ * លំនាំដើម៖ គ្មានជីពចរ (តម្លៃទាំងអស់ ១) * ការប្រើប្រាស់៖ * ចលនា៖ kf-pulse 2s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់។ * --kf-pulse-scale-ពី៖ 0.95; --kf-pulse-scale-to: 1.05; // ជីពចរមាត្រដ្ឋាន * --kf-pulse-opacity-ពី៖ 0.7; --kf-pulse-opacity-ទៅ៖ ១; // ភាពស្រអាប់ជីពចរ */
@keyframes 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); } }
នេះបង្កើតជីពចរដែលអាចបត់បែនបាន ដែលអាចធ្វើចលនាលក្ខណៈជាច្រើន៖ .ការអំពាវនាវដល់សកម្មភាព { ចលនា៖ kf-pulse 0.6s ជំនួសគ្មានកំណត់; --kf-pulse-opacity-ពី៖ 0.5; /* ជីពចរភាពស្រអាប់ */ }
.notification-dot { ចលនា៖ kf-pulse 0.6s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់។ --kf-pulse-scale-ពី៖ 0.9; --kf-pulse-scale-to: 1.1; /* ជីពចរមាត្រដ្ឋាន */ }
.text-បន្លិច { ចលនា៖ kf-pulse 1.5s ងាយស្រួលចេញគ្មានកំណត់; --kf-pulse-scale-ពី៖ 0.8; --kf-pulse-opacity-ពី៖ 0.2; /* មាត្រដ្ឋាន និងជីពចរភាពស្រអាប់ */ }
សូមមើល Pen Keyframes Tokens - Demo 6 [forked] ដោយ Amit Sheen។ ស៊ុមគន្លឹះ kf-pulse តែមួយនេះអាចគ្រប់គ្រងអ្វីៗគ្រប់យ៉ាងពីការចាប់យកការយកចិត្តទុកដាក់តិចតួច រហូតដល់ការរំលេចយ៉ាងខ្លាំង ខណៈពេលដែលមានភាពងាយស្រួលក្នុងការប្ដូរតាមបំណង។ ភាពងាយស្រួលកម្រិតខ្ពស់ រឿងដ៏អស្ចារ្យមួយអំពីការប្រើប្រាស់និមិត្តសញ្ញា keyframes គឺមានភាពងាយស្រួលក្នុងការពង្រីកបណ្ណាល័យគំនូរជីវចលរបស់យើង និងផ្តល់នូវផលប៉ះពាល់ដែលអ្នកអភិវឌ្ឍន៍ភាគច្រើនមិនខ្វល់ក្នុងការសរសេរពីដំបូង ដូចជាយឺត ឬលោតជាដើម។ នេះគឺជាឧទាហរណ៍នៃនិមិត្តសញ្ញាស៊ុមគន្លឹះ "លោត" សាមញ្ញដែលប្រើ --kf-bounce-ពីលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនដើម្បីគ្រប់គ្រងកម្ពស់លោត។ /* * លោត - ចលនាចូលលោត * ប្រើ --kf-bounce-from ដើម្បីគ្រប់គ្រងកម្ពស់លោត * លំនាំដើម៖ លោតពី 100vh (បិទអេក្រង់) * ការប្រើប្រាស់៖ * ចលនា៖ kf-bounce 3s ងាយស្រួលចូល; * --kf-bounce-ពី: 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% { បកប្រែ៖ ០ ០; មុខងារ ចលនា-ពេលវេលា៖ ងាយស្រួលចេញ; } }
គំនូរជីវចលដូចជា "បត់បែន" គឺពិបាកបន្តិច ដោយសារការគណនានៅខាងក្នុងស៊ុមគន្លឹះ។ យើងត្រូវកំណត់ --kf-elastic-from-X និង --kf-elastic-from-Y ដាច់ដោយឡែកពីគ្នា (ទាំងពីរគឺស្រេចចិត្ត) ហើយពួកគេរួមគ្នាអនុញ្ញាតឱ្យយើងបង្កើតច្រកចូលយឺតពីចំណុចណាមួយនៅលើអេក្រង់។
/* * Elastic In - ចលនាចូលយឺត * ប្រើ --kf-elastic-from-X និង --kf-elastic-from-Y ដើម្បីគ្រប់គ្រងទីតាំងចាប់ផ្តើម * លំនាំដើម៖ ចូលពីកណ្តាលកំពូល (0, -100vh) * ការប្រើប្រាស់៖ * ចលនា៖ kf-elastic-in 2s ងាយស្រួលចូល-ចេញទាំងពីរ។ * --kf-elastic-from-X: -50px; * --kf-elastic-from-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% { បកប្រែ៖ calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { បកប្រែ៖ calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { បកប្រែ៖ calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
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% { បកប្រែ៖ ០ ០; } }
វិធីសាស្រ្តនេះធ្វើឱ្យវាងាយស្រួលក្នុងការប្រើឡើងវិញ និងប្ដូរស៊ុមគន្លឹះកម្រិតខ្ពស់តាមបំណងនៅទូទាំងគម្រោងរបស់យើង ដោយគ្រាន់តែផ្លាស់ប្តូរលក្ខណសម្បត្តិផ្ទាល់ខ្លួនតែមួយប៉ុណ្ណោះ។
.bounce-and-zoom { ចលនា៖ kf-bounce 3s ងាយស្រួលចូល, kf-zoom 3s លីនេអ៊ែរ; --kf-zoom-ពី៖ 0; }
.bounce-and-slide { សមាសភាពចលនា៖ បន្ថែម; /* ចលនាទាំងពីរប្រើការបកប្រែ */ ចលនា៖ kf-bounce 3s ងាយស្រួលចូល, kf-slide-in 3s ងាយស្រួលចេញ; --kf-slide-from: -200px; }
.elastic-in { ចលនា៖ kf-elastic-in 2s ងាយស្រួលចូល-ចេញទាំងពីរ; }
សូមមើល Pen Keyframes Tokens - Demo 7 [forked] ដោយ Amit Sheen។ រហូតមកដល់ចំណុចនេះ យើងបានឃើញពីរបៀបដែលយើងអាចបង្រួបបង្រួមស៊ុមគន្លឹះក្នុងវិធីដ៏ឆ្លាតវៃ និងមានប្រសិទ្ធភាព។ ជាការពិតណាស់ អ្នកប្រហែលជាចង់កែប្រែអ្វីៗឱ្យកាន់តែសមស្របទៅនឹងតម្រូវការគម្រោងរបស់អ្នក ប៉ុន្តែយើងបានគ្របដណ្តប់ឧទាហរណ៍នៃចលនាទូទៅមួយចំនួន និងករណីប្រើប្រាស់ប្រចាំថ្ងៃ។ ហើយជាមួយនឹងនិមិត្តសញ្ញា keyframe ទាំងនេះឥឡូវនេះ យើងមានប្លុកអគារដ៏មានអានុភាពសម្រាប់បង្កើតចលនាដែលជាប់លាប់ និងអាចរក្សាបាននៅទូទាំងគម្រោងទាំងមូល។ មិនមានស៊ុមគន្លឹះស្ទួនទៀតទេ គ្មានជម្លោះវិសាលភាពសកលទៀតទេ។ គ្រាន់តែជាវិធីស្អាត និងងាយស្រួលដើម្បីដោះស្រាយរាល់តម្រូវការគំនូរជីវចលរបស់យើង។ ប៉ុន្តែសំណួរពិតប្រាកដគឺ៖ តើយើងបង្កើតប្លុកអគារទាំងនេះដោយរបៀបណា? ដាក់វាទាំងអស់គ្នា យើងបានឃើញថាការផ្សំនិមិត្តសញ្ញាស៊ុមគន្លឹះមូលដ្ឋានគឺសាមញ្ញ។ យើងមិនត្រូវការអ្វីពិសេសទេ ប៉ុន្តែដើម្បីកំណត់ចលនាទីមួយ កំណត់ទីពីរ កំណត់អថេរតាមតម្រូវការ ហើយនោះជាវា។ /* Fade in + រុញចូល */ .toast { ចលនា៖ kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* Zoom in + fade in */ .modal { ចលនា៖ kf-fade-in 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-ពី៖ 0.7; --kf-zoom-to: 1; }
/* រុញចូល + ជីពចរ */ .ការជូនដំណឹង { ចលនា៖ kf-slide-in 0.5s, kf-pulse 1.2s ភាពងាយស្រួល ចូល-ចេញ ជំនួសគ្មានកំណត់; --kf-slide-from: -100px 0; --kf-pulse-scale-ពី៖ 0.95; --kf-pulse-scale-to: 1.05; }
បន្សំទាំងនេះដំណើរការយ៉ាងស្រស់ស្អាត ពីព្រោះគំនូរជីវចលនីមួយៗមានគោលដៅលើលក្ខណៈសម្បត្តិផ្សេងៗគ្នា៖ ភាពស្រអាប់ ការបំប្លែង (បកប្រែ/មាត្រដ្ឋាន) ។ល។ ប៉ុន្តែពេលខ្លះមានការប៉ះទង្គិចគ្នា ហើយយើងត្រូវដឹងពីមូលហេតុ និងវិធីដោះស្រាយពួកវា។ នៅពេលដែលគំនូរជីវចលពីរព្យាយាមធ្វើឱ្យមានចលនាដូចគ្នា - ឧទាហរណ៍ ទាំងទំហំចលនា ឬភាពស្រអាប់នៃចលនាទាំងពីរ - លទ្ធផលនឹងមិនដូចអ្វីដែលអ្នករំពឹងទុកនោះទេ។ តាមលំនាំដើម មានតែគំនូរជីវចលមួយប៉ុណ្ណោះដែលត្រូវបានអនុវត្តចំពោះលក្ខណសម្បត្តិនោះ ដែលជាធាតុចុងក្រោយក្នុងបញ្ជីចលនា។ នេះគឺជាដែនកំណត់នៃរបៀបដែល CSS គ្រប់គ្រងចលនាជាច្រើននៅលើលក្ខណៈសម្បត្តិដូចគ្នា។ ឧទាហរណ៍ វានឹងមិនដំណើរការដូចបំណងទេ ពីព្រោះមានតែចលនា kf-pulse ប៉ុណ្ណោះដែលនឹងអនុវត្ត។ .bad-combo { ចលនា៖ kf-zoom 0.5s ទៅមុខ, kf-pulse 1.2s ជម្មើសជំនួសគ្មានកំណត់; --kf-zoom-ពី៖ 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-ពី៖ 0.8; --kf-pulse-scale-to: 1.1; }
ការបន្ថែមចលនា វិធីសាមញ្ញបំផុត និងត្រង់បំផុតដើម្បីដោះស្រាយចលនាជាច្រើនដែលប៉ះពាល់ដល់លក្ខណៈសម្បត្តិដូចគ្នាគឺត្រូវប្រើលក្ខណៈសម្បត្តិនៃសមាសភាពចលនា។ នៅក្នុងឧទាហរណ៍ចុងក្រោយខាងលើ ចលនា kf-pulse ជំនួសចលនា kf-zoom ដូច្នេះយើងនឹងមិនឃើញការពង្រីកដំបូងឡើយ ហើយនឹងមិនទទួលបានមាត្រដ្ឋានដែលរំពឹងទុកដល់ 1.2 ទេ។ តាមរយៈការកំណត់សមាសភាពចលនាដើម្បីបន្ថែម យើងប្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតឱ្យបញ្ចូលគ្នានូវចលនាទាំងពីរ។ នេះផ្តល់ឱ្យយើងនូវលទ្ធផលដែលយើងចង់បាន។ .component-ពីរ { សមាសភាពចលនា៖ បន្ថែម; }
សូមមើល Pen Keyframes Tokens - Demo 8 [forked] ដោយ Amit Sheen ។ វិធីសាស្រ្តនេះដំណើរការល្អសម្រាប់ករណីភាគច្រើនដែលយើងចង់បញ្ចូលគ្នានូវឥទ្ធិពលលើទ្រព្យសម្បត្តិដូចគ្នា។ វាក៏មានប្រយោជន៍ផងដែរនៅពេលដែលយើងត្រូវការបញ្ចូលគ្នានូវចលនាជាមួយនឹងតម្លៃទ្រព្យសម្បត្តិឋិតិវន្ត។ ឧទាហរណ៍ ប្រសិនបើយើងមានធាតុដែលប្រើលក្ខណសម្បត្តិបកប្រែដើម្បីដាក់ទីតាំងវាឱ្យត្រង់កន្លែងដែលយើងចង់បាន ហើយបន្ទាប់មកយើងចង់ធ្វើចលនាវាជាមួយស៊ុមគន្លឹះ kf-slide-in នោះយើងនឹងទទួលបានការលោតដែលអាចមើលឃើញដ៏អាក្រក់ដោយគ្មានសមាសភាពចលនា។ សូមមើល Pen Keyframes Tokens - Demo 9 [forked] ដោយ Amit Sheen។ ជាមួយនឹងការកំណត់សមាសភាពចលនាដើម្បីបន្ថែម ចលនាត្រូវបានរួមបញ្ចូលគ្នាយ៉ាងរលូនជាមួយដែលមានស្រាប់បំប្លែង ដូច្នេះធាតុនឹងនៅនឹងកន្លែង ហើយមានចលនាដូចការរំពឹងទុក។ ចលនាញ័រ មធ្យោបាយមួយទៀតនៃការគ្រប់គ្រងចលនាច្រើនគឺ "ធ្វើអោយ" ពួកវាជាប់គាំង - នោះគឺចាប់ផ្តើមចលនាទីពីរបន្តិចបន្ទាប់ពីរឿងទីមួយបានបញ្ចប់។ វាមិនមែនជាដំណោះស្រាយដែលមានប្រសិទ្ធភាពសម្រាប់គ្រប់ករណីនោះទេ ប៉ុន្តែវាមានប្រយោជន៍នៅពេលដែលយើងមានចលនាចូលតាមដានដោយចលនាបន្ត។ /* បន្ថយក្នុង + ជីពចរភាពស្រអាប់ */ .ការជូនដំណឹង { ចលនា៖ kf-fade-in 2s ងាយស្រួលចេញ, kf-pulse 0.5s 2s ងាយស្រួលចូល-ចេញ ឆ្លាស់គ្នាគ្មានកំណត់; --kf-pulse-opacity-ទៅ៖ 0.5; }
សូមមើល Pen Keyframes Tokens - Demo 10 [forked] ដោយ Amit Sheen។ បញ្ជាទិញបញ្ហា មួយផ្នែកធំនៃគំនូរជីវចលដែលយើងធ្វើការជាមួយ ប្រើប្រាស់មុខងារបំប្លែង។ ក្នុងករណីភាគច្រើន នេះគឺងាយស្រួលជាង។ វាក៏មានអត្ថប្រយោជន៍ក្នុងការអនុវត្តផងដែរ ដោយសារការបំប្លែងចលនាអាចត្រូវបានបង្កើនល្បឿន GPU ។ ប៉ុន្តែប្រសិនបើយើងប្រើការបំប្លែង យើងត្រូវទទួលយកថាលំដាប់ដែលយើងអនុវត្តការបំប្លែងរបស់យើងមានសារៈសំខាន់។ ច្រើន។ នៅក្នុង keyframes របស់យើងរហូតមកដល់ពេលនេះ យើងបានប្រើការបំប្លែងបុគ្គល។ យោងតាមលក្ខណៈបច្ចេកទេស ទាំងនេះតែងតែត្រូវបានអនុវត្តតាមលំដាប់លំដោយ៖ ដំបូង ធាតុត្រូវបានបកប្រែ បន្ទាប់មកបង្វិល បន្ទាប់មកធ្វើមាត្រដ្ឋាន។ នេះសមហេតុផល និងជាអ្វីដែលយើងភាគច្រើនរំពឹងទុក។ ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើយើងប្រើប្រាស់ transform property នោះលំដាប់ដែលមុខងារត្រូវបានសរសេរជាលំដាប់ដែលពួកវាត្រូវបានអនុវត្ត។ ក្នុងករណីនេះ ប្រសិនបើយើងផ្លាស់ទីអ្វីមួយ 100 ភីកសែល នៅលើអ័ក្ស X ហើយបន្ទាប់មកបង្វិលវាដោយ 45 ដឺក្រេ វាមិនដូចគ្នានឹងការបង្វិលវាជាលើកដំបូងដោយ 45 ដឺក្រេ ហើយបន្ទាប់មកផ្លាស់ទីវា 100 ភីកសែលនោះទេ។ /* ការ៉េពណ៌ផ្កាឈូក៖ ដំបូងបកប្រែ បន្ទាប់មកបង្វិល */ .ឧទាហរណ៍-មួយ { បំប្លែង៖ បកប្រែ X (១០០ ភីច) បង្វិល (៤៥ ដឺក្រេ); }
/* ការ៉េបៃតង៖ ដំបូងបង្វិល បន្ទាប់មកបកប្រែ */ .ឧទាហរណ៍-ពីរ { បំលែង៖ បង្វិល (៤៥ ដឺក្រេ) បកប្រែ X (១០០ ភីច); }
សូមមើល Pen Keyframes Tokens - Demo 11 [forked] ដោយ Amit Sheen ។ ប៉ុន្តែយោងទៅតាមលំដាប់នៃការបំប្លែង ការបំប្លែងបុគ្គលទាំងអស់ — អ្វីគ្រប់យ៉ាងដែលយើងបានប្រើសម្រាប់ keyframes tokens — កើតឡើងមុនពេលមុខងារបំប្លែង។ នោះមានន័យថា អ្វីក៏ដោយដែលអ្នកបានកំណត់នៅក្នុងលក្ខណសម្បត្តិបំប្លែងនឹងកើតឡើងបន្ទាប់ពីចលនា។ ប៉ុន្តែប្រសិនបើអ្នកកំណត់ឧទាហរណ៍ បកប្រែរួមគ្នាជាមួយស៊ុមគន្លឹះ kf-spin ការបកប្រែនឹងកើតឡើងមុនពេលមានចលនា។ ឆ្ងល់ទៀតទេ?! វានាំឱ្យមានស្ថានភាពដែលតម្លៃឋិតិវន្តអាចបណ្តាលឱ្យមានលទ្ធផលផ្សេងគ្នាសម្រាប់ចលនាដូចគ្នា ដូចជានៅក្នុងករណីខាងក្រោម៖
/* ចលនាទូទៅសម្រាប់អ្នកបង្វិលទាំងពីរ */ . spinner { ចលនា៖ kf-spin 1s លីនេអ៊ែរគ្មានកំណត់; }
/* Pink spinner: បកប្រែមុនពេលបង្វិល (បំលែងបុគ្គល) */ .pinner-pink { បកប្រែ៖ ១០០% ៥០%; }
/* Green spinner: បង្វិលបន្ទាប់មកបកប្រែ (លំដាប់មុខងារ) */ . spinner-green { បំប្លែង៖ បកប្រែ (១០០%, ៥០%); }
សូមមើល Pen Keyframes Tokens - Demo 12 [forked] ដោយ Amit Sheen។ អ្នកអាចមើលឃើញថា spinner ដំបូង (ពណ៌ផ្កាឈូក) ទទួលបានការបកប្រែដែលកើតឡើងមុនពេលបង្វិល kf-spin ដូច្នេះដំបូងវាផ្លាស់ទីទៅកន្លែងរបស់វាហើយបន្ទាប់មកបង្វិល។ ឧបករណ៍បង្វិលទីពីរ (ពណ៌បៃតង) ទទួលបានមុខងារបកប្រែ () ដែលកើតឡើងបន្ទាប់ពីការបំប្លែងបុគ្គល ដូច្នេះធាតុវិលដំបូង បន្ទាប់មកផ្លាស់ទីទាក់ទងទៅនឹងមុំបច្ចុប្បន្នរបស់វា ហើយយើងទទួលបានឥទ្ធិពលគន្លងដ៏ធំទូលាយនោះ។ ទេ នេះមិនមែនជាកំហុសទេ។ វាគ្រាន់តែជារឿងមួយដែលយើងត្រូវដឹងអំពី CSS ហើយចងចាំនៅពេលធ្វើការជាមួយចលនាច្រើន ឬការផ្លាស់ប្តូរច្រើន។ បើចាំបាច់ អ្នកក៏អាចបង្កើតសំណុំបន្ថែមនៃ kf-spin-alt keyframes ដែលបង្វិលធាតុដោយប្រើមុខងារ rotate()។ ចលនាកាត់បន្ថយ ហើយខណៈពេលដែលយើងកំពុងនិយាយអំពីស៊ុមគន្លឹះជំនួស យើងមិនអាចមិនអើពើជម្រើស "គ្មានចលនា" បានទេ។ អត្ថប្រយោជន៍ដ៏ធំបំផុតមួយនៃការប្រើ keyframes tokens គឺថា ភាពងាយស្រួលអាចដំណើរការបាន ហើយវាពិតជាងាយស្រួលក្នុងការធ្វើ។ តាមរយៈការរចនាស៊ុមគន្លឹះរបស់យើងជាមួយនឹងភាពងាយស្រួលក្នុងចិត្ត យើងអាចធានាថាអ្នកប្រើប្រាស់ដែលចូលចិត្តចលនាដែលកាត់បន្ថយទទួលបានបទពិសោធន៍កាន់តែរលូន និងមិនសូវរំខាន ដោយគ្មានការងារបន្ថែម ឬការចម្លងកូដ។ អត្ថន័យពិតប្រាកដនៃ "ចលនាកាត់បន្ថយ" អាចផ្លាស់ប្តូរបន្តិចពីចលនាមួយទៅមួយទៀត និងពីគម្រោងមួយទៅគម្រោងមួយ ប៉ុន្តែនេះគឺជាចំណុចសំខាន់ៗមួយចំនួនដែលត្រូវចងចាំ៖ កំពុងបិទ 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); } } }
នេះធានាថាអ្នកប្រើប្រាស់ដែលបានកំណត់ការចូលចិត្ត-បន្ថយ-ចលនាដើម្បីកាត់បន្ថយនឹងមិនឃើញចលនាទេ ហើយនឹងទទួលបានបទពិសោធន៍ដែលត្រូវនឹងចំណូលចិត្តរបស់ពួកគេ។ ចូលភ្លាមៗ មាន keyframes មួយចំនួនដែលយើងមិនអាចដកចេញបានដូចជា ចលនាចូល។ តម្លៃត្រូវតែផ្លាស់ប្តូរ, ត្រូវតែមានចលនា; បើមិនដូច្នេះទេ ធាតុនឹងមិនមានតម្លៃត្រឹមត្រូវទេ។ ប៉ុន្តែនៅក្នុងចលនាកាត់បន្ថយ ការផ្លាស់ប្តូរនេះពីតម្លៃដំបូងគួរតែភ្លាមៗ។ ដើម្បីសម្រេចបាននូវចំណុចនេះ យើងនឹងកំណត់សំណុំបន្ថែមនៃ keyframes ដែលតម្លៃលោតទៅស្ថានភាពចុងក្រោយភ្លាមៗ។ ទាំងនេះក្លាយជាស៊ុមគន្លឹះលំនាំដើមរបស់យើង។ បន្ទាប់មក យើងនឹងបន្ថែម keyframes ធម្មតានៅក្នុងសំណួរមេឌៀសម្រាប់ការចូលចិត្ត-បន្ថយ-ចលនាដែលកំណត់ទៅមិនចំណូលចិត្ត ដូចក្នុងឧទាហរណ៍មុនដែរ។ /* លេចឡើងភ្លាមៗសម្រាប់ចលនាកាត់បន្ថយ */ @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 { /* Soft Fade-in សម្រាប់ចលនាកាត់បន្ថយ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* ស៊ុមគន្លឹះលោតដើម */ } }
ឥឡូវនេះ អ្នកប្រើប្រាស់ដែលបានបើកចលនាកាត់បន្ថយនៅតែទទួលបានអារម្មណ៍នៃរូបរាង ប៉ុន្តែដោយគ្មានចលនាខ្លាំងនៃការលោត ឬចលនាយឺត។ ជាមួយនឹងប្លុកអគារនៅនឹងកន្លែង សំណួរបន្ទាប់គឺរបៀបធ្វើឱ្យពួកវាជាផ្នែកមួយនៃលំហូរការងារជាក់ស្តែង។ ការសរសេរស៊ុមគន្លឹះដែលអាចបត់បែនបានគឺជារឿងមួយ ប៉ុន្តែការធ្វើឱ្យពួកវាអាចទុកចិត្តបានក្នុងគម្រោងធំមួយ ទាមទារយុទ្ធសាស្ត្រមួយចំនួនដែលខ្ញុំត្រូវរៀនវិធីលំបាក។ យុទ្ធសាស្ត្រអនុវត្ត និងការអនុវត្តល្អបំផុត នៅពេលដែលយើងមានបណ្ណាល័យដ៏រឹងមាំនៃនិមិត្តសញ្ញា keyframes បញ្ហាប្រឈមពិតប្រាកដគឺរបៀបនាំយកពួកវាទៅក្នុងការងារប្រចាំថ្ងៃ។
ការល្បួងគឺទម្លាក់ keyframes ទាំងអស់ក្នុងពេលតែមួយ ហើយប្រកាសពីបញ្ហាដែលបានដោះស្រាយ ប៉ុន្តែនៅក្នុងការអនុវត្តខ្ញុំបានរកឃើញថាលទ្ធផលល្អបំផុតគឺបានមកពីការអនុម័តបន្តិចម្តងៗ។ ចាប់ផ្តើមជាមួយនឹងចលនាធម្មតាបំផុតដូចជា បន្ថយ ឬស្លាយ។ ទាំងនេះគឺជាការឈ្នះដ៏ងាយស្រួលដែលបង្ហាញពីតម្លៃភ្លាមៗដោយមិនចាំបាច់សរសេរឡើងវិញធំ។ ការដាក់ឈ្មោះគឺជាចំណុចមួយទៀតដែលសមនឹងទទួលបានការយកចិត្តទុកដាក់។ បុព្វបទដែលជាប់លាប់ ឬ namespace ធ្វើឱ្យវាច្បាស់ថាចលនាមួយណាជាសញ្ញាសម្ងាត់ និងមួយណាជានិមិត្តសញ្ញាក្នុងស្រុក។ វាក៏ការពារការប៉ះទង្គិចគ្នាដោយចៃដន្យ និងជួយសមាជិកក្រុមថ្មីទទួលស្គាល់ប្រព័ន្ធចែករំលែកភ្លាមៗផងដែរ។ ឯកសារគឺមានសារៈសំខាន់ដូចកូដខ្លួនឯងដែរ។ សូម្បីតែមតិយោបល់ខ្លីៗនៅពីលើនិមិត្តសញ្ញា keyframes នីមួយៗអាចរក្សាទុករាប់ម៉ោងក្នុងការទស្សន៍ទាយនៅពេលក្រោយ។ អ្នកអភិវឌ្ឍន៍គួរតែអាចបើកឯកសារថូខឹន ស្កេនរកប្រសិទ្ធភាពដែលពួកគេត្រូវការ និងចម្លងគំរូនៃការប្រើប្រាស់ដោយផ្ទាល់ទៅក្នុងសមាសធាតុរបស់ពួកគេ។ ភាពបត់បែនគឺជាអ្វីដែលធ្វើឱ្យវិធីសាស្រ្តនេះសមនឹងការខិតខំប្រឹងប្រែង។ តាមរយៈការលាតត្រដាងលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនដែលសមរម្យ យើងផ្តល់ឱ្យក្រុមដើម្បីសម្រួលចលនាដោយមិនធ្វើឱ្យខូចប្រព័ន្ធ។ ក្នុងពេលជាមួយគ្នានេះសូមព្យាយាមមិនឱ្យស្មុគស្មាញ។ ផ្តល់គន្លឹះដែលសំខាន់ និងរក្សាមតិនៅសល់។ ជាចុងក្រោយ ចងចាំភាពងាយស្រួល។ មិនមែនគ្រប់គំនូរជីវចលទាំងអស់ត្រូវការជម្រើសចលនាដែលកាត់បន្ថយនោះទេ ប៉ុន្តែមានមនុស្សជាច្រើនធ្វើ។ ការដុតនំនៅក្នុងការកែតម្រូវទាំងនេះនៅដើមដំបូងមានន័យថាយើងមិនត្រូវជួសជុលពួកវាឡើងវិញនៅពេលក្រោយនោះទេ ហើយវាបង្ហាញពីកម្រិតនៃការយកចិត្តទុកដាក់ដែលអ្នកប្រើប្រាស់របស់យើងនឹងកត់សម្គាល់ទោះបីជាពួកគេមិនដែលបានលើកឡើងវាក៏ដោយ។
តាមបទពិសោធន៍របស់ខ្ញុំ ការព្យាបាលនិមិត្តសញ្ញា keyframes ជាផ្នែកនៃដំណើរការការងារនិមិត្តសញ្ញារចនារបស់យើង គឺជាអ្វីដែលធ្វើឱ្យពួកវាជាប់។ នៅពេលដែលពួកគេនៅនឹងកន្លែង ពួកគេឈប់មានអារម្មណ៍ដូចជាបែបផែនពិសេស ហើយក្លាយជាផ្នែកនៃភាសារចនា ដែលជាផ្នែកបន្ថែមធម្មជាតិនៃរបៀបដែលផលិតផលផ្លាស់ទី និងឆ្លើយតប។ រុំឡើង គំនូរជីវចលអាចជាផ្នែកមួយដ៏រីករាយបំផុតនៃចំណុចប្រទាក់សំណង់ ប៉ុន្តែដោយគ្មានរចនាសម្ព័ន្ធ ពួកវាក៏អាចក្លាយជាប្រភពនៃការខកចិត្តដ៏ធំបំផុតមួយផងដែរ។ តាមរយៈការចាត់ចែង keyframes ជាសញ្ញាសម្ងាត់ អ្នកយកអ្វីមួយដែលជាធម្មតារញ៉េរញ៉ៃ និងពិបាកក្នុងការគ្រប់គ្រង ហើយប្រែក្លាយវាទៅជាប្រព័ន្ធច្បាស់លាស់ និងអាចព្យាករណ៍បាន។ តម្លៃពិតប្រាកដគឺមិនមែនគ្រាន់តែនៅក្នុងការរក្សាទុកកូដពីរបីជួរនោះទេ។ វាមានទំនុកចិត្តថា នៅពេលអ្នកប្រើការបន្ថយ ស្លាយ ពង្រីក ឬបង្វិល អ្នកដឹងច្បាស់ពីរបៀបដែលវានឹងមានដំណើរការនៅទូទាំងគម្រោង។ វាស្ថិតនៅក្នុងភាពបត់បែនដែលកើតចេញពីលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួនដោយគ្មានភាពច្របូកច្របល់នៃការប្រែប្រួលគ្មានទីបញ្ចប់។ ហើយវាគឺនៅក្នុងភាពងាយស្រួលដែលបានសាងសង់នៅក្នុងគ្រឹះជាជាងបន្ថែមជាការគិតក្រោយ។ ខ្ញុំបានឃើញគំនិតទាំងនេះដំណើរការនៅក្នុងក្រុមផ្សេងគ្នា និងមូលដ្ឋានកូដផ្សេងគ្នា ហើយលំនាំគឺតែងតែដូចគ្នា។ នៅពេលដែលសញ្ញាសម្ងាត់នៅនឹងកន្លែង ស៊ុមគន្លឹះឈប់ក្លាយជាបណ្តុំនៃល្បិចដែលខ្ចាត់ខ្ចាយ ហើយក្លាយជាផ្នែកនៃភាសារចនា។ ពួកគេធ្វើឱ្យផលិតផលមានអារម្មណ៍ថាមានចេតនា មានភាពស៊ីសង្វាក់គ្នា និងរស់រវើកជាងមុន។ ប្រសិនបើអ្នកយករឿងមួយពីអត្ថបទនេះ សូមឲ្យវាក្លាយជានេះ៖ គំនូរជីវចលសមនឹងទទួលបានការថែទាំ និងរចនាសម្ព័នដូចគ្នាដែលយើងបានផ្តល់រួចហើយចំពោះពណ៌ វាយអក្សរ និងគម្លាត។ ការវិនិយោគតូចមួយនៅក្នុង keyframes tokens ទូទាត់រាល់ពេលដែលចំណុចប្រទាក់របស់អ្នកផ្លាស់ទី។
