CSS Cubic Bezier Үүсгэгч
Хурдны муруйг үүсгэхийн тулд хоёр бариулыг чирж, цэг хэрхэн хөдөлж байгааг тогтмол хөдөлгөөнтэй харьцуулан харж, cubic-bezier() утгыг хуулж аваарай.
cubic-bezier(0.25, 0.1, 0.25, 1)Муруйг таны хөтөч дээр шууд зурдаг. Таны тохируулсан юуг ч 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() функц шаардлагатай.