CSS хурдны муруй ба хөдөлгөөний үндэс
CSS transition болон animation ашиглан вэб хуудасны элементүүдийг хөдөлгөөнд оруулахад хурдны өөрчлөлтийг удирдах шаардлага гардаг. Элементүүд эхнээсээ дуусах хүртлээ тогтмол хурдаар хөдлөх үү, эсвэл эхлээд удааширч байснаа сүүлдээ хурдсах уу гэдгийг хурдны функц (timing function) тодорхойлдог. Үүнийг математикийн хувьд гуравдагч зэргийн Безие муруй (cubic Bezier curve) ашиглан илэрхийлдэг бөгөөд CSS-д cubic-bezier(x1, y1, x2, y2) функцээр дамжуулан тохируулдаг.
Энэхүү муруй нь зүүн доороос (хөдөлгөөний эхлэл) баруун дээш (хөдөлгөөний төгсгөл) чиглэлд ажилладаг. Хэвтээ тэнхлэг буюу X тэнхлэг нь цаг хугацааны явцыг зүүнээс баруун тийш харуулдаг бол босоо тэнхлэг буюу Y тэнхлэг нь хөдөлгөөний ахиц дэвшлийг дээш чиглэлд илэрхийлнэ. Муруйн хэлбэрийг хоёр хяналтын цэгээр удирдах бөгөөд эдгээр цэгийн байрлалаас хамаарч хөдөлгөөний хурд хугацааны агшин бүрд өөр өөрөөр өөрчлөгддөг.
Хяналтын цэгүүд болон оролтын хязгаарлалт
CSS Cubic Bezier Үүсгэгч нь хурдны муруйг өөрийн гараар удирдан зохион бүтээх боломжийг олгодог. Хэрэглэгч хоёр бариулыг чирэх замаар муруйн хэлбэрийг өөрчлөх бөгөөд үүнийг дагаад дараах дөрвөн оролтын утга шинэчлэгдэнэ:
- Эхний хяналтын цэг X (x1): 0-ээс 1-ийн хооронд байх тоон утга.
- Эхний хяналтын цэг Y (y1): -0.70-аас 1.70-ийн хооронд байх тоон утга.
- Хоёр дахь хяналтын цэг X (x2): 0-ээс 1-ийн хооронд байх тоон утга.
- Хоёр дахь хяналтын цэг Y (y2): -0.70-аас 1.70-ийн хооронд байх тоон утга.
Хяналтын цэгүүдийн X утга нь цаг хугацааны явцыг заадаг тул 0 болон 1-ийн хязгаараас гарч болохгүй. Хэрэв оролтын талбарт 9 гэх мэт хязгаараас хэтэрсэн утга оруулаад идэвхгүй болгох (lose focus) үед утга нь автоматаар хамгийн дээд хязгаар болох 1 рүү шилжинэ. Мөн оролтын талбарыг хоосон болгоод идэвхгүй болгоход өмнөх хүчинтэй байсан утга автоматаар сэргэдэг. Хоосон эсвэл тоон бус утга оруулсан тохиолдолд систем зөв утга оруулахыг хүлээх болно.
Бариулыг чирэхээс гадна гарны зүүн сумыг дарах замаар идэвхжсэн хяналтын цэгийн утгыг нарийвчлан өөрчлөх боломжтой бөгөөд жишээ нь утгыг 0.99 болгон бууруулж болно.
Хэтрэх болон ухрах эффект үүсгэх
Ердийн хөдөлгөөнүүд нь 0-ээс 1-ийн хооронд явагддаг бол Y тэнхлэгийн утгыг 0-ээс доош эсвэл 1-ээс дээш гаргаж (гэхдээ -0.70-аас 1.70 хүртэлх хязгаарт багтаан) онцгой эффектүүдийг үүсгэж болно.
- Ухрах эффект (Pull-back): Y утгыг 0-ээс доош (жишээ нь сөрөг утга руу) оруулснаар элемент хөдөлж эхлэхээсээ өмнө бага зэрэг ухрах буюу бэлтгэл хөдөлгөөн хийх эффектийг үзүүлнэ.
- Хэтрэх эффект (Overshoot): Y утгыг 1-ээс дээш гаргаснаар элемент эцсийн цэгтээ хүрэхдээ заасан хязгаарыг даван гарч, дараа нь буцаж эцсийн байрлалдаа орж тогтоно.
Жишээлбэл, "Back Out" бэлэн загварыг сонгоход cubic-bezier(0.34, 1.56, 0.64, 1) утга тохируулагддаг. Энд y1 утга нь 1.56 байгаа нь хөдөлгөөн төгсгөлийн цэгээсээ хэтэрч очоод буцаж тогтох эффектийг үүсгэж буй хэрэг юм.
Хурдны муруйн хязгаарлалт
Хэдийгээр cubic-bezier() функц нь маш уян хатан хөдөлгөөнийг үүсгэж чаддаг ч математик бүтцийн хувьд тодорхой хязгаарлалттай байдаг. Нэг удаагийн cubic-bezier муруй нь хөдөлгөөний эхэнд ухрах эсвэл төгсгөлд хэтрэх эффектийг зэрэг үзүүлж чадах боловч зөвхөн нэг чиглэлд хөдөлж, дараа нь тогтох замаар хязгаарлагдана.
Энэ нь хөдөлгөөний чиглэлийг олон удаа өөрчилдөг ойх (bounce) эсвэл уян хатан (elastic) хөдөлгөөнийг ганцхан cubic-bezier() функцээр илэрхийлэх боломжгүй гэсэн үг юм. Ийм нарийн төвөгтэй хөдөлгөөнийг хийхийн тулд олон үе шаттай CSS keyframes эсвэл бусад аргыг ашиглах шаардлагатай болдог.
Нууцлал ба боловсруулалт
Энэхүү хэрэгслийг ашиглахад таны хувийн нууцлал бүрэн хадгалагдана. Муруйг зурах, хөдөлгөөнийг тооцоолох бүх үйл явц таны вэб хөтөч дээр шууд хийгддэг. Таны оруулсан хяналтын цэгүүд болон тохируулсан ямар ч өгөгдлийг BroBroGo сервер рүү хуулж илгээхгүй.
Түгээмэл асуултууд
Хоёр бариул болон дөрвөн тоо нь ямар утгатай вэ?
Муруй нь зүүн доороос (эхлэл) баруун дээш (төгсгөл) чиглэлд ажиллах бөгөөд цаг хугацаа зүүнээс баруун тийш, ахиц дэвшил дээшээ явна. Хоёр бариул нь түүнийг нугалж буй хяналтын цэгүүд юм — тус бүр нь 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) эсвэл уян хатан (elastic) эффект үүсгэж чадах уу?
Дангаараа бол үгүй. Ганц cubic-bezier нь урьдчилан хөдөлж, хэтэрч чаддаг — "back" бэлэн загварууд нь үүнийг хийхийн тулд нэг бариулыг хайрцагнаас гадагш татдаг — гэхдээ энэ нь зөвхөн нэг чиглэлд хөдөлж, дараа нь тогтох боломжтой. Ойх (bounce) болон уян хатан (elastic) хөдөлгөөнүүд нь чиглэлийг хэд хэдэн удаа өөрчилдөг бөгөөд үүнийг ганц cubic-bezier-ээр илэрхийлэх боломжгүй; тэдгээрт CSS keyframes эсвэл олон цэгтэй linear() функц шаардлагатай.