📈

இலவச CSS Cubic-Bezier ஈசிங் உருவாக்கி

கட்டுப்பாட்டு புள்ளிகளை இழுத்து CSS ஈசிங் வளைவுகளை வடிவமைக்கவும், இயக்கத்தை நேரடியாக முன்னோட்டமிட்டு, cubic-bezier() மதிப்பை நகலெடுக்கவும். ஓவர்ஷூட்/பவுன்ஸ் முன்னமைப்புகள் அடங்கும்.

உங்கள் உலாவியில் இயங்கும்பதிவு தேவையில்லை, பாப்-அப்கள் இல்லைஉள்நுழைவு தேவையில்லைஎன்றும் இலவசம்

ஏற்றியப் பிறகு ஆஃப்லைனில் வேலை செய்கிறது

வளைவை வடிவமைக்க டீல் & ரோஸ் கைப்பிடிகளை இழுக்கவும்

கட்டுப்பாட்டு புள்ளிகள்

x1y1x2y2

இயக்க முன்னோட்டம்

கால அளவு1.6s

அகல மாற்றம்

CSS மதிப்பு

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

முன்னமைவுகள்

back-out மற்றும் anticipate போன்ற 'ஓவர்ஷூட்' / குதிப்பு விளைவுகளை உருவாக்க ரோஸ் மற்றும் டீல் கைப்பிடிகள் பெட்டிக்கு மேலே அல்லது கீழே இழுக்கப்படலாம் (Y 0-1-க்கு அப்பால்). X 0-1-க்குள் இருக்கும் (நேரம் திரும்பாது).

இது எவ்வாறு செயல்படுகிறது

editor React state மற்றும் SVG மூலம் முழுவதும் உலாவியில் உருவாக்கப்பட்டது — வளைவுக் கணிதத்தை எந்த நூலகமும் கையாள்வதில்லை. இழுக்கக்கூடிய இரண்டு control points ஒரு SVG cubic Bezier பாதையை வரையறுக்கின்றன; விளைவு cubic-bezier() மதிப்பை நேரடியாக @keyframes விதியில் செருகி, உலாவியின் சொந்த CSS animation இயந்திரம் இயக்க முன்னோட்டத்தை இயக்குகிறது.

1
control points ஐ இழுக்கவும் அல்லது தட்டச்சு செய்யவும்
இரண்டு handles (teal நிறத்தில் P1, rose நிறத்தில் P2) SVG canvas இல் உள்ளன. இழுத்தல் setPointerCapture உடன் Pointer Events API ஐப் பயன்படுத்துகிறது; எனவே SVG எல்லைக்கு வெளியேயும் handle உங்கள் விரல் அல்லது cursor ஐப் பின்தொடரும். அம்புக்குறி விசைகளால் handles ஐ நகர்த்தலாம், அல்லது x1/y1/x2/y2 எண் உள்ளீடுகளில் சரியான மதிப்புகளைத் தட்டச்சு செய்யலாம்.
2
SVG வளைவை நேரலையாக வரைகிறது
வளைவு ஒற்றை SVG <path> உறுப்பு; அதன் C (cubic Bezier) கட்டளை ஒவ்வொரு state புதுப்பிப்பிலும் நான்கு control-point ஆயங்களிலிருந்து மீண்டும் கணக்கிடப்படுகிறது. canvas இல்லை, வெளி நூலகம் இல்லை — உலாவியின் SVG renderer பாதையை நேரடியாக வரைகிறது.
3
உலாவியின் CSS இயந்திரம் easing ஐ முன்னோட்டமிடுகிறது
மூன்று நேரலை animations (நகரும் புள்ளி, அகல மாற்றம், அளவு மாற்றம்) cubic-bezier() மதிப்பை inline ஆகச் செருகிய CSS @keyframes ஐ இயக்குகின்றன. உலாவியின் சொந்த animation இயந்திரம் வளைவை விளக்குகிறது; எனவே நீங்கள் காண்பது உங்கள் production CSS தருவதைச் சரியாகப் போன்றது.
4
உங்கள் framework syntax இல் துணுக்கை நகலெடுக்கவும்
டேப்கள் அதே நான்கு எண்களை CSS transition-timing-function, Tailwind arbitrary-value class, Framer Motion ease array அல்லது anime.js easing string ஆக வடிவமைக்கின்றன. துணுக்கு navigator.clipboard மூலம் கிளிப்போர்டில் எழுதப்படுகிறது. வளைவு URL hash இலும் (#b=x1,y1,x2,y2) குறியாக்கப்படுகிறது; எனவே அதைப் பகிரலாம் அல்லது புக்மார்க் செய்யலாம்.