តើខ្ញុំអាចបង្កើតខ្សែកោង cubic-bezier easing ផ្ទាល់ខ្លួនសម្រាប់ CSS យ៉ាងដូចម្តេច?

អូសចំណុចបញ្ជាទាំងពីរនៅលើក្រាហ្វ វាយតម្លៃ x1, y1, x2, y2 ជាក់លាក់ ឬជ្រើសរើសការកំណត់ជាមុន។ បន្ទាប់មកជ្រើសរើស CSS ក្រោម ទម្រង់ទិន្នផល ហើយចុច ចម្លង ដើម្បីទទួលបានតម្លៃ cubic-bezier() សម្រាប់ transition-timing-function។

តើខ្ញុំអាចបង្កើតបែបផែនលោតផ្លាត (bounce) ឬ overshoot ដោយប្រើ cubic-bezier យ៉ាងដូចម្តេច?

អូសចំណុចបញ្ជាទៅលើ ឬក្រោមប្រអប់ ដើម្បីឱ្យតម្លៃ Y របស់វាលើសពី 0-1។ Y អាចលើសពីចន្លោះនោះបាន ខណៈដែល X ស្ថិតនៅចន្លោះពី 0 ដល់ 1 ជានិច្ច។ ការកំណត់ជាមុន back-out និង anticipate គឺជាចំណុចចាប់ផ្តើម overshoot ស្រាប់ៗ។

តើខ្ញុំអាចយក easing សម្រាប់ Tailwind, Framer Motion ឬ anime.js បានទេ?

បាន។ ផ្ទាំងទម្រង់ទិន្នផលរួមមាន CSS, Tailwind, Framer Motion និង anime.js។ ពួកវាទាំងអស់កំណត់ទម្រង់លេខទាំងបួនដូចគ្នា ដូច្នេះគ្រាន់តែជ្រើសរើសផ្ទាំងណាមួយ រួចចុច ចម្លង ដើម្បីយកកូដទៅក្ដារតម្បៀតខ្ទាស់របស់អ្នក។

តើខ្ញុំផ្ទុកតម្លៃ cubic-bezier ដែលមានស្រាប់មកកែសម្រួលយ៉ាងដូចម្តេច?

បិទភ្ជាប់តម្លៃដូចជា cubic-bezier(.17, .67, .83, .67) ទៅក្នុងប្រអប់នាំចូល ហើយចុច ផ្ទុក។ ប្រសិនបើមិនអាចអានលេខទាំងបួនបានទេ អ្នកនឹងទទួលបានសារកំហុស។ ខ្សែកោងនេះក៏ត្រូវបានរក្សាទុកក្នុង URL នៃទំព័របន្ទាប់ពីសញ្ញា hash ផងដែរ ដូច្នេះវាអាចចែករំលែកបាន។

ហេតុអ្វីបានជាការមើលជាមុនមានអារម្មណ៍ថាយឺតជាងដំណើរការជាក់ស្តែងរបស់ខ្ញុំ?

ការ មើលជាមុន motion ប្រើការកំណត់ រយៈពេល ដែលអ្នកអាចផ្លាស់ប្តូរបាន ហើយតម្លៃលំនាំដើមគឺយឺតជាងដើម្បីឱ្យអ្នកអាចពិនិត្យមើលខ្សែកោងបានច្បាស់។ សូមបន្ថយ រយៈពេល រួចប្រើ Replay ដើម្បីមើលចលនាតាមល្បឿនដែលអ្នកគ្រោងនឹងប្រើប្រាស់។

តើវាឥតគិតថ្លៃពិតមែនទេ?

ពិតប្រាកដណាស់។ ឧបករណ៍ទាំងអស់គឺអាចប្រើបានដោយឥតគិតថ្លៃ ដោយមិនបាច់មានគណនី និងមិនបាច់ប្រើកាតឥណទានឡើយ។ ការងារទាំងអស់ដំណើរការនៅលើឧបករណ៍របស់អ្នកផ្ទាល់ ជាជាងនៅលើម៉ាស៊ីនបម្រើ (server) របស់យើង ដែលនេះហើយជាមូលហេតុធ្វើឱ្យវាដំណើរការដោយឥតគិតថ្លៃ។

វាដំណើរការនៅលើទូរស័ព្ទទេ?

បាទ/ចាស។ វាដំណើរការលើកម្មវិធីរុករកទូរសព្ទទំនើបលើ iOS និង Android ដោយមិនចាំបាច់ដំឡើងអ្វីទេ។

📈

បង្កើត CSS Cubic-Bezier Easing ឥតគិតថ្លៃ

រចនា CSS easing curve ដោយ drag control point, មើលជាមុនចលនាផ្ទាល់ ហើយចម្លងតម្លៃ cubic-bezier()។ រួមបញ្ចូល preset overshoot/bounce។

ដំណើរការក្នុងកម្មវិធីរុករករបស់អ្នកគ្មានការចុះឈ្មោះ គ្មានបង្អួចលេចឡើងមិនចាំបាច់ចូលគណនីឥតគិតថ្លៃជារៀងរហូត

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច

អូស handle teal & rose ដើម្បីកំណត់រូបបោះ curve

ចំណុចត្រួតត្រា

x1y1x2y2

មើលជាមុន motion

រយៈពេល1.6 វិនាទី

ការផ្លាស់ប្ដូរទទឹង

តម្លៃ CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

លំនាំដើម

Handle rose និង teal អាចទាញឡើងលើ ឬចុះក្រោមប្រអប់ (Y លើស 0-1) ដើម្បីបង្កើតឥទ្ធិពល 'overshoot' / bounce ដូចជា back-out និង anticipate។ X នៅតែក្នុង 0-1 (ពេលវេលាមិនអាចបញ្ច្រាស)។

ការប្រើប្រាស់ទូទៅ

CSS ក្រើម ផ្សេងៗផ្សេងដែលម៉ាករចនាម៉ាក-លក្ខណៈឥទ្ធិយ ឥទ្ធិយលាក់ខ្លួនកម្ម និងវ៉ាលាលាក់ UI។
សរុប និងលាប់ពាក់ព័ន្ធបង្កើតលាង់ស្វាម្ភន ឆ្ងាយដ៏សប្បាយ ដោយដុត័រថាលក្ខណៈសម្បត្តិនៅលើខ្សែប្រឹក្សា។
@keyframes ក្រើម សម្រាប់ជ្រើសរើស CSS keyframe ក្រើម សម្រាប់កម្មវិធីក្រើម។
cubic-bezier មាត្រដ្ឋាន សម្រាប់ JS ក្រើម ឯកសារទទួលបាន cubic-bezier មាត្រដ្ឋាន សម្រាប់ GSAP, Framer Motion, anime.js, និងលើសពីនេះ។
ស្វាគមន៍ ក្រើម ដោះស្រាយលំហូរមើលលទ្ធផល រវាង Bezier ខ្សែពាក់ទ្រនិច និងលំហូរ ដែលវាបង្កើត។

វាដំណើរការដោយរបៀបណា

ឧបករណ៍កែសម្រួលត្រូវបានបង្កើតទាំងស្រុងនៅក្នុងកម្មវិធីរុករកដោយប្រើ React state និង SVG — គ្មានបណ្ណាល័យដោះស្រាយគណិតវិទ្យាខ្សែកោងទេ។ ចំណុចត្រួតពិនិត្យដែលអូសបានពីរកំណត់ផ្លូវ SVG cubic Bezier ហើយម៉ាស៊ីនអានីម៉ាស្យុង CSS ផ្ទាល់របស់កម្មវិធីរុករកដំណើរការការមើលជាមុនចលនាដោយចាក់បញ្ចូលតម្លៃ cubic-bezier() លទ្ធផលដោយផ្ទាល់ទៅច្បាប់ @keyframes។

1
អូស ឬវាយចំណុចត្រួតពិនិត្យ
ចំណុចទាញពីរ (P1 ពណ៌ខៀវបៃតង P2 ពណ៌ផ្កាកុលាប) ស្ថិតលើ canvas SVG។ ការអូសប្រើ Pointer Events API ជាមួយ setPointerCapture ដូច្នេះចំណុចទាញតាមដានម្រាមដៃ ឬកូនកណ្តុររបស់អ្នកទោះបីនៅក្រៅព្រំដែន SVG ក៏ដោយ។ អ្នកក៏អាចរុញចំណុចទាញជាមួយគ្រាប់ចុចព្រួញ ឬវាយតម្លៃច្បាស់លាស់ទៅធាតុចូលលេខ x1/y1/x2/y2។
2
SVG គូរខ្សែកោងក្នុងពេលវេលាពិត
ខ្សែកោងជាធាតុ SVG <path> តែមួយដែលពាក្យបញ្ជា C (cubic Bezier) របស់វាត្រូវបានគណនាឡើងវិញពីកូអរដោនេចំណុចត្រួតពិនិត្យទាំងបួននៅរាល់ការធ្វើបច្ចុប្បន្នភាពស្ថានភាព។ គ្មាន canvas គ្មានបណ្ណាល័យខាងក្រៅទេ — ម៉ាស៊ីនបង្ហាញ SVG របស់កម្មវិធីរុករកគូរផ្លូវដោយផ្ទាល់។
3
ម៉ាស៊ីន CSS កម្មវិធីរុករកបង្ហាញការមើលជាមុនការធ្វើឱ្យរលូន
អានីម៉ាស្យុងផ្ទាល់បី (ចំណុចរអិល ការផ្លាស់ប្តូរទទឹង និងមាត្រដ្ឋាន) ដំណើរការ CSS @keyframes ជាមួយតម្លៃ cubic-bezier() ចាក់បញ្ចូលក្នុងបន្ទាត់។ ម៉ាស៊ីនអានីម៉ាស្យុងផ្ទាល់របស់កម្មវិធីរុករកបកស្រាយខ្សែកោង ដូច្នេះអ្វីដែលអ្នកឃើញគឺពិតជាអ្វីដែល CSS ផលិតកម្មរបស់អ្នកនឹងផលិត។
4
ចម្លងខ្លីៗក្នុងវាក្យសម្ព័ន្ធក្របខ័ណ្ឌរបស់អ្នក
ផ្ទាំងធ្វើទ្រង់ទ្រាយលេខបួនដូចគ្នាជា CSS transition-timing-function ថ្នាក់តម្លៃបំពាន Tailwind ជួរ ease Framer Motion ឬ string ការធ្វើឱ្យរលូន anime.js។ ខ្លីៗត្រូវបានសរសេរទៅក្ដារតម្បៀតខ្ទាស់ជាមួយ navigator.clipboard។ ខ្សែកោងក៏ត្រូវបានអ៊ិនកូដក្នុង URL hash (#b=x1,y1,x2,y2) ដូច្នេះអ្នកអាចចែករំលែក ឬចំណាំវា។