📈

Тавлидкунандаи ҳамвории кубик-безие CSS-и ройгон

Хатҳои ҳамвории CSS-ро бо кашидани нуқтаҳои назорат тарҳрезӣ кунед, ҳаракатро зинда пешнамоиш кунед ва арзиши cubic-bezier()-ро нусхабардорӣ кунед. Пешбурдҳои overshoot/бонс дар бар мегирад.

Дар браузери шумо кор мекунадБе бақайдгирӣ, бе равзанаҳои пайдошавандаВоридшавӣ лозим нестҲамеша ройгон

Ҳамин ки бор шуд офлайн кор мекунад

Дастакҳои норанҷӣ ва гулобиро барои шакл додани каҷхат кашед

Нуқтаҳои назорат

x1y1x2y2

Пешнамоиши ҳаракат

Давомнокӣ1.6s

Гузариши паҳноӣ

Қимати CSS

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

Пешфарзҳо

Дастакҳои гулобӣ ва норанҷӣ метавонанд аз болои қуттӣ ё зери он кашида шаванд (Y аз 0-1 берун) то самараи 'бартарӣ' / ҷаҳиш ба монанди back-out ва anticipate созанд. X дар доираи 0-1 мемонад (вақт наметавонад баргардад).

Чӣ тавр он кор мекунад

Муҳаррир пурра дар браузер бо истифодаи ҳолати React ва SVG сохта шудааст — ягон китобхона математикаи каҷхаттаро идора намекунад. Ду нуқтаи назорати кашолашаванда роҳи кубии Безиери SVG-ро муайян мекунанд, ва муҳаррики худи аниматсияи CSS-и браузер пешнамоиши ҳаракатро бо дохил кардани қиммати cubic-bezier()-и натиҷа бевосита ба қоидаи @keyframes иҷро мекунад.

1
Нуқтаҳои назоратро бикашед ё нависед
Ду дастак (P1 бо ранги teal, P2 бо rose) дар канвасы SVG ҷойгиранд. Кашола кардан API-и Pointer Events-ро бо setPointerCapture истифода мебарад, бинобар ин дастак ангушт ё курсори шуморо ҳатто берун аз марзи SVG пайгирӣ мекунад. Инчунин метавонед дастакҳоро бо тугмаҳои паррон ҳаракат диҳед ё қимматҳои дурустро ба вурудҳои рақамии x1/y1/x2/y2 нависед.
2
SVG каҷхаттаро дар вақти воқеӣ мекашад
Каҷхатта як элементи ягонаи SVG <path> аст, ки фармони C (Безиери кубӣ)-и он аз чор координатаи нуқтаи назорат дар ҳар навсозии ҳолат аз нав ҳисоб карда мешавад. На canvas, на китобхонаи берунӣ — тасвиркунандаи SVG-и браузер роҳро бевосита мекашад.
3
Муҳаррики CSS-и браузер ҳамворкуниро пешнамоиш мекунад
Се аниматсияи зинда (нуқтаи лағжанда, гузариши бар ва миқёс) @keyframes-и CSS-ро бо қиммати cubic-bezier()-и дохилшуда кор мекунанд. Муҳаррики аниматсияи худи браузер каҷхаттаро тафсир мекунад, бинобар он чи мебинед дурустан он чист, ки CSS-и истеҳсоли шумо тавлид мекунад.
4
Порчаро бо синтаксиси доскабандии худ нусхабардорӣ кунед
Ҷадвалбандиҳо ҳамон чор рақамро ҳамчун функсияи transition-timing-и CSS, синфи қиммати дилхоҳи Tailwind, массиви осонсозии Framer Motion ё сатри осонсозии anime.js форматбандӣ мекунанд. Порча бо navigator.clipboard ба ҳофиза навишта мешавад. Каҷхатта инчунин дар хатти URL (#b=x1,y1,x2,y2) рамзгузорӣ мешавад, бинобар ин метавонед онро мубодила ё нишона гузоред.