CSS-д зориулсан cubic-bezier хурдасгалтын муруйг хэрхэн үүсгэх вэ?

График дээрх хоёр удирдлагын цэгийг чирэх, яг тодорхой x1, y1, x2, y2 утгуудыг бичих, эсвэл бэлэн тохиргоог сонгоно уу. Дараа нь Гаралтын формат хэсгээс CSS-ийг сонгоод Хуулах дээр дарж transition-timing-function-д зориулсан cubic-bezier() утгыг хуулж авна уу.

cubic-bezier ашиглан ойх эсвэл хэтрэх (overshoot) хөдөлгөөнийг хэрхэн хийх вэ?

Удирдлагын цэгийг дөрвөлжин хүрээний дээр эсвэл доор гаргаж чирвэл Y утга нь 0–1-ээс давна. X утга нь 0-ээс 1 хооронд үлдэх ёстой бол Y нь энэ хязгаараас хэтэрч болно. Back-out болон anticipate бэлэн тохиргоонууд нь хэтрэх хөдөлгөөний бэлэн суурь болдог.

Tailwind, Framer Motion эсвэл anime.js-д зориулсан хурдасгалтыг авч болох уу?

Тийм ээ. Гаралтын форматын таб дотор CSS, Tailwind, Framer Motion болон anime.js бий. Тэд бүгд ижил дөрвөн тоог форматаар нь харуулдаг тул табаа сонгоод Хуулах дээр даран кодоо санах ойд авна уу.

Одоо байгаа cubic-bezier утгыг оруулан засах боломжтой юу?

Оруулах хэсэгт cubic-bezier(.17, .67, .83, .67) гэх мэт утгыг буулгаад Ачаалах дээр дарна уу. Хэрэв дөрвөн тоог уншиж чадахгүй бол алдааны мэдэгдэл гарна. Муруй нь хуудасны URL хаягт hash-аас хойш хадгалагддаг тул хуваалцах боломжтой.

Яагаад урьдчилан харах хөдөлгөөн миний бодит хөдөлгөөнөөс удаан санагдаж байна вэ?

Хөдөлгөөний урьдчилан харах нь таны өөрчилж болох Үргэлжлэх хугацаа тохиргоог ашигладаг бөгөөд анхдагч тохиргоо нь муруйг сайн ажиглах үүднээс удаан байдаг. Үргэлжлэх хугацаа-г богиносгоод Дахин тоглуулах дээр дарж бодит хурдаар нь шалгаарай.

Үнэхээр үнэгүй юу?

Тийм. Хэрэгсэл бүрийг бүртгэл үүсгэхгүйгээр, төлбөрийн картгүйгээр үнэгүй ашиглах боломжтой. Бүх үйл явц манай сервер дээр биш, таны төхөөрөмж дээр явагддаг тул үнэ төлбөргүй ажилладаг.

Гар утсан дээр ажилладаг уу?

Тийм. iOS болон Android-ийн орчин үеийн гар утасны хөтөч дээр юу ч суулгахгүйгээр ажиллана.

📈

CSS Cubic-Bezier хурдасгалтын үүсгэгч — үнэгүй

Хяналтын цэгүүдийг чирж CSS хурдасгалтын муруйнуудыг зохион бүтээх, хөдөлгөөнийг шууд урьдчилан харах болон cubic-bezier() утгыг хуулах. Хэт үсрэлт/харайлтын урьдчилан тохируулгуудыг агуулна.

Хөтчид ажилладагБүртгэл шаардлагагүй, цонх гарахгүйНэвтрэх шаардлагагүйҮүрд үнэгүй

Ачаалагдсаны дараа офлайн ажилладаг

Муруйг хэлбэржүүлэхийн тулд хөх ногоон ба ягаан бариулуудыг чирнэ үү

Хяналтны цэгүүд

x1y1x2y2

Хөдөлгөөний урьдчилан харах

Үргэлжлэх хугацаа1.6 сек

Өргөний шилжилт

CSS утга

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

Урьдчилсан тохиргоо

Ягаан болон хөх ногоон бариулуудыг хайрцгийн дээр эсвэл доор татаж болно (Y нь 0-1-ээс гадуур) — ингэснээр back-out болон anticipate зэрэг хэтрэх / ойх эффектийг үүсгэнэ. X нь 0-1 дотор байна (цаг буцах боломжгүй).

Түгээмэл хэрэглээ

CSS эргүүлэлтийн сонирхлын цэг тохируулалтHonbag эффектүүд, цэс болон UI эргүүлэлтүүдийг байрлуулахдаа сайхан урагшлах хөдөлгөөнийг зохион байгуулаарай.
Хэнэ болон урайлахыг анимацийн сэтгэдэлХуудасны гадна хяналтын цэгүүдийг салгахад сайхан бүрхэвчийн хэнэ хөдөлгөөнийг байгаа.
CSS keyframe анимацуудыг сонирхлын түүлнээCSS keyframe анимациудын төлөө сонирхлын хугацаа функцийг сонго.
JS анимаци сангийн хувьд cubic-bezier утгуудGSAP, Framer Motion, anime.js болон бусадтай cubic-bezier утгуудыг авна.
Сонирхлын хугацаа хөдөлгөөнийг ойлгохBezier муруй болон түүнийг үйлдвэрлэх хөдөлгөөний хоорондох холбоосийг дараах.

Хэрхэн ажилладаг

Засварлагч бүхэлдээ хөтчид React state, SVG ашиглан бүтээгдсэн — ямар ч номын сан муруйн математикыг зохицуулдаггүй. Чирж болох хоёр удирдах цэг SVG кубик Bezier зам тодорхойлж, хөтчийн өөрийн CSS анимацийн систем үр дүнгийн cubic-bezier() утгыг @keyframes дүрэмд шууд оруулж хөдөлгөөний урьдчилан харахыг ажиллуулдаг.

1
Удирдах цэгүүдийг чирэх эсвэл бичих
Хоёр бариул (P1 teal, P2 rose) SVG canvas дээр байрладаг. Чирэлт setPointerCapture-тэй Pointer Events API ашигладаг тул бариул таны хуруу эсвэл курсорыг SVG хилээс гадна ч дагадаг. Та мөн сум товчлуураар бариулыг бага зэрэг хөдөлгөж, эсвэл x1/y1/x2/y2 тоон оролтод яг утга бичиж болно.
2
SVG муруйг бодит цагт зурдаг
Муруй нь дөрвөн удирдах-цэгийн координатаас өөрчлөлт бүрт дахин тооцоологддог C (кубик Bezier) командтай нэг SVG <path> элемент юм. Canvas, гадаад номын сан хамааралгүй — хөтчийн SVG зурлагын систем замыг шууд зурдаг.
3
Хөтчийн CSS систем зөөлрүүлэлтийг урьдчилан харуулдаг
Гурван амьд анимаци (гулсдаг цэг, өргөний шилжилт, масштаб) inline оруулсан cubic-bezier() утгатай CSS @keyframes ажиллуулдаг. Хөтчийн өөрийн анимацийн систем муруйг тайлбарладаг тул та харж байгаа зүйл яг таны production CSS гаргах зүйл юм.
4
Хэсгийг таны framework-ийн синтакст хуулах
Табууд ижил дөрвөн тоог CSS transition-timing-function, Tailwind дурын-утгын класс, Framer Motion ease массив эсвэл anime.js зөөлрүүлэх мөр болгон форматладаг. Хэсэг navigator.clipboard-аар clipboard руу бичигддэг. Муруй мөн URL hash (#b=x1,y1,x2,y2)-д кодлогддог тул та хуваалцах эсвэл хавчуурга хийж болно.