📈

ਮੁਫ਼ਤ 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 ਦੇ ਅੰਦਰ ਰਹਿੰਦਾ ਹੈ (ਸਮਾਂ ਪਿੱਛੇ ਨਹੀਂ ਜਾ ਸਕਦਾ)।

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਐਡੀਟਰ React state ਅਤੇ SVG ਵਰਤ ਕੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਿਆ ਹੈ — ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ ਕਰਵ ਗਣਿਤ ਨਹੀਂ ਸੰਭਾਲਦੀ। ਦੋ ਖਿੱਚਣਯੋਗ control points ਇੱਕ SVG cubic Bezier path ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਪਣਾ CSS ਐਨੀਮੇਸ਼ਨ ਇੰਜਣ ਨਤੀਜੇ ਵਾਲਾ cubic-bezier() ਮੁੱਲ ਸਿੱਧਾ @keyframes rule ਵਿੱਚ ਪਾ ਕੇ ਗਤੀ ਦੀ ਝਲਕ ਚਲਾਉਂਦਾ ਹੈ।

1
Control points ਖਿੱਚੋ ਜਾਂ ਟਾਈਪ ਕਰੋ
ਦੋ ਹੈਂਡਲ (teal ਵਿੱਚ P1, rose ਵਿੱਚ P2) ਇੱਕ SVG canvas 'ਤੇ ਹਨ। ਖਿੱਚਣਾ setPointerCapture ਨਾਲ Pointer Events API ਵਰਤਦਾ ਹੈ ਤਾਂ ਜੋ ਹੈਂਡਲ SVG ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਵੀ ਤੁਹਾਡੀ ਉਂਗਲ ਜਾਂ ਕਰਸਰ ਦਾ ਪਿੱਛਾ ਕਰੇ। ਤੁਸੀਂ ਤੀਰ ਕੁੰਜੀਆਂ ਨਾਲ ਹੈਂਡਲ ਥੋੜ੍ਹਾ ਹਿਲਾ ਸਕਦੇ ਹੋ ਜਾਂ x1/y1/x2/y2 ਨੰਬਰ ਇਨਪੁੱਟਾਂ ਵਿੱਚ ਸਹੀ ਮੁੱਲ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ।
2
SVG ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਕਰਵ ਬਣਾਉਂਦਾ ਹੈ
ਕਰਵ ਇੱਕ ਸਿੰਗਲ SVG <path> element ਹੈ ਜਿਸਦੀ C (cubic Bezier) ਕਮਾਂਡ ਹਰ state ਅੱਪਡੇਟ 'ਤੇ ਚਾਰ control-point ਨਿਰਦੇਸ਼ਾਂਕਾਂ ਤੋਂ ਮੁੜ ਗਿਣੀ ਜਾਂਦੀ ਹੈ। ਕੋਈ canvas, ਕੋਈ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ — ਬ੍ਰਾਊਜ਼ਰ ਦਾ SVG renderer ਸਿੱਧਾ path ਬਣਾਉਂਦਾ ਹੈ।
3
ਬ੍ਰਾਊਜ਼ਰ CSS ਇੰਜਣ easing ਦੀ ਝਲਕ ਦਿਖਾਉਂਦਾ ਹੈ
ਤਿੰਨ ਲਾਈਵ ਐਨੀਮੇਸ਼ਨਾਂ (ਖਿਸਕਦਾ ਬਿੰਦੂ, ਚੌੜਾਈ transition, ਅਤੇ scale) inline ਪਾਏ cubic-bezier() ਮੁੱਲ ਨਾਲ CSS @keyframes ਚਲਾਉਂਦੀਆਂ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਪਣਾ ਐਨੀਮੇਸ਼ਨ ਇੰਜਣ ਕਰਵ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਜੋ ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ ਬਿਲਕੁਲ ਉਹੀ ਤੁਹਾਡੀ production CSS ਬਣਾਏਗੀ।
4
ਆਪਣੇ framework ਦੇ ਸਿੰਟੈਕਸ ਵਿੱਚ snippet ਕਾਪੀ ਕਰੋ
ਟੈਬਾਂ ਉਹੀ ਚਾਰ ਨੰਬਰ CSS transition-timing-function, Tailwind arbitrary-value class, Framer Motion ease array, ਜਾਂ anime.js easing string ਵਜੋਂ ਫਾਰਮੈਟ ਕਰਦੀਆਂ ਹਨ। snippet navigator.clipboard ਨਾਲ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। ਕਰਵ URL hash (#b=x1,y1,x2,y2) ਵਿੱਚ ਵੀ ਐਨਕੋਡ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਸਾਂਝਾ ਜਾਂ ਬੁੱਕਮਾਰਕ ਕਰ ਸਕੋ।