📈

ነፃ CSS Cubic-Bezier Easing ፈጣሪ

የመቆጣጠሪያ ነጥቦችን በመጎተት CSS easing curvesን ይንደፉ፣ እንቅስቃሴውን በቀጥታ ይመልከቱና cubic-bezier() እሴቱን ይቅዱ። Overshoot/bounce ቅድመ-ውቅሮችን ያካትታል።

በአሳሽዎ ውስጥ ይሰራልምዝገባ የለም፣ ብቅ-ባይ መስኮቶች የሉምምዝገባ አያስፈልግምለዘላለም ነፃ

ከተጫነ በኋላ ከመስመር ውጭ ይሠራል

ኩርባውን ለመቅረጽ አረንጓዴ እና ሮዝ መያዣዎችን ይጎትቱ

የቁጥጥር ነጥቦች

x1y1x2y2

የእንቅስቃሴ ቅድመ-እይታ

የቆይታ ጊዜ1.6s

የስፋት ሽግግር

የCSS ዋጋ

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

ቅድመ ማዋቀሮች

ሮዝ እና አረንጓዴ መያዣዎች ሳጥኑን ከላይ ወይም ከታች ሊጎትቱ ይችላሉ (Y ከ0-1 ውጭ) 'overshoot' / bounce ውጤቶችን ለመፍጠር እንደ back-out እና anticipate። X በ0-1 ውስጥ ይቆያል (ጊዜ ወደ ኋላ ሊመለስ አይችልም)።

እንዴት እንደሚሠራ

አርታዒው ሙሉ በሙሉ በአሳሹ ውስጥ በReact state እና በSVG የተገነባ ነው — የኩርባውን ሒሳብ የሚያከናውን ምንም ላይብረሪ የለም። ሁለት የሚጎተቱ የመቆጣጠሪያ ነጥቦች የSVG cubic Bezier መንገድን ይገልጻሉ፤ የአሳሹ የራሱ የCSS እንቅስቃሴ ሞተር የተገኘውን cubic-bezier() እሴት በቀጥታ ወደ @keyframes ሕግ በማስገባት የእንቅስቃሴ ቅድመ-እይታውን ያስኬዳል።

1
የመቆጣጠሪያ ነጥቦችን ይጎትቱ ወይም ይተይቡ
ሁለት መያዣዎች (P1 በአረንጓዴ-ሰማያዊ፣ P2 በሮዝ) በSVG ሸራ ላይ ይገኛሉ። መጎተት Pointer Events APIን ከsetPointerCapture ጋር ይጠቀማል፤ ስለዚህ መያዣው ከSVG ወሰን ውጭም ቢሆን ጣትዎን ወይም ጠቋሚዎን ይከተላል። መያዣዎችን በቀስት ቁልፎች ማንቀሳቀስ ወይም ትክክለኛ እሴቶችን በx1/y1/x2/y2 የቁጥር ግቤቶች ውስጥ መተየብም ይችላሉ።
2
SVG ኩርባውን በቀጥታ ይስላል
ኩርባው አንድ የSVG <path> አካል ነው፤ የC (cubic Bezier) ትዕዛዙ በእያንዳንዱ የሁኔታ ለውጥ ከአራቱ የመቆጣጠሪያ ነጥብ መጋጠሚያዎች እንደገና ይሰላል። ምንም canvas፣ ምንም ውጫዊ ላይብረሪ የለም — የአሳሹ SVG አሳያ መንገዱን በቀጥታ ይስላል።
3
የአሳሹ CSS ሞተር የፍጥነት ኩርባውን በቅድሚያ ያሳያል
ሦስት የቀጥታ እንቅስቃሴዎች (የሚንሸራተት ነጥብ፣ የስፋት ሽግግር እና መጠን መቀየር) cubic-bezier() እሴቱ በውስጡ የገባበትን CSS @keyframes ያስኬዳሉ። የአሳሹ የራሱ የእንቅስቃሴ ሞተር ኩርባውን ይተረጉማል፤ ስለዚህ የሚያዩት በትክክል የእርስዎ የምርት CSS የሚያመርተው ነው።
4
ቁራጩን በማዕቀፍዎ አገባብ ይቅዱ
ትሮቹ ተመሳሳዮቹን አራት ቁጥሮች እንደ CSS transition-timing-function፣ የTailwind የዘፈቀደ-እሴት ክፍል፣ የFramer Motion ease ድርድር ወይም የanime.js easing ሕብረቁምፊ ያቀርባሉ። ቁራጩ በnavigator.clipboard ወደ ቅንጥብ ሰሌዳ ይጻፋል። ኩርባው በURL hash (#b=x1,y1,x2,y2) ውስጥም ይቀመጣል፤ ስለዚህ ማጋራት ወይም ዕልባት ማድረግ ይችላሉ።