CSS ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ (Cubic Bezier) ਜਨਰੇਟਰ

CSS ਟ੍ਰਾਂਜ਼ਿਸ਼ਨ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ

CSS ਟ੍ਰਾਂਜ਼ਿਸ਼ਨ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਵਿੱਚ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਕਿ ਸਮੇਂ ਦੇ ਨਾਲ ਇੱਕ ਬਦਲਾਅ ਕਿਵੇਂ ਅੱਗੇ ਵਧਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਰੰਗ ਜਾਂ ਆਕਾਰ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਇਹ ਬਦਲਾਅ ਇੱਕ ਸਮਾਨ ਗਤੀ ਨਾਲ ਹੋ ਸਕਦਾ ਹੈ ਜਾਂ ਇਸਦੀ ਗਤੀ ਵਿੱਚ ਉਤਾਰ-ਚੜ੍ਹਾਅ ਆ ਸਕਦਾ ਹੈ। CSS ਵਿੱਚ ਇਸ ਗਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ transition-timing-function ਅਤੇ animation-timing-function ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਸਧਾਰਨ ਐਨੀਮੇਸ਼ਨਾਂ ਲਈ ease, ease-in, ease-out, ਅਤੇ ease-in-out ਵਰਗੇ ਕੀਵਰਡਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਅਤੇ ਕਸਟਮ ਮੋਸ਼ਨ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ, ਸਾਨੂੰ cubic-bezier(x1, y1, x2, y2) ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਗਣਿਤਿਕ ਕਰਵ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜੋ ਐਨੀਮੇਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤ ਤੋਂ ਲੈ ਕੇ ਅੰਤ ਤੱਕ ਦੀ ਗਤੀ ਨੂੰ ਬਾਰੀਕੀ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।

ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ (Cubic Bezier) ਕਰਵ ਦਾ ਗਣਿਤ ਅਤੇ ਕੰਟਰੋਲ ਪੁਆਇੰਟ

ਇੱਕ ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ ਕਰਵ ਚਾਰ ਬਿੰਦੂਆਂ ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹਨਾਂ ਵਿੱਚੋਂ ਪਹਿਲਾ ਬਿੰਦੂ (0, 0) 'ਤੇ ਸਥਿਰ ਹੁੰਦਾ ਹੈ, ਜੋ ਐਨੀਮੇਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤ (ਹੇਠਾਂ-ਖੱਬੇ) ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਚੌਥਾ ਬਿੰਦੂ (1, 1) 'ਤੇ ਸਥਿਰ ਹੁੰਦਾ ਹੈ, ਜੋ ਐਨੀਮੇਸ਼ਨ ਦੇ ਅੰਤ (ਉੱਪਰ-ਸੱਜੇ) ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਕਰਵ ਦਾ ਆਕਾਰ ਅਤੇ ਇਸਦੀ ਗਤੀ ਨੂੰ ਬਾਕੀ ਦੋ ਵਿਚਕਾਰਲੇ ਕੰਟਰੋਲ ਪੁਆਇੰਟਾਂ ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

• ਪਹਿਲਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ (x1, y1): ਇਹ ਕਰਵ ਦੇ ਸ਼ੁਰੂਆਤੀ ਹਿੱਸੇ ਦੇ ਖਿੱਚ ਅਤੇ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।
• ਦੂਜਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ (x2, y2): ਇਹ ਕਰਵ ਦੇ ਆਖਰੀ ਹਿੱਸੇ ਦੇ ਖਿੱਚ ਅਤੇ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।

ਇਸ ਕਰਵ ਵਿੱਚ, ਸਮਾਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ (X-ਧੁਰਾ) ਵੱਲ ਵਧਦਾ ਹੈ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਪ੍ਰਗਤੀ ਹੇਠਾਂ ਤੋਂ ਉੱਪਰ (Y-ਧੁਰਾ) ਵੱਲ ਜਾਂਦੀ ਹੈ।

ਕੰਟਰੋਲ ਪੁਆਇੰਟਾਂ ਦੇ ਮੁੱਲਾਂ ਲਈ ਸਖ਼ਤ ਨਿਯਮ ਹਨ:

• X ਮੁੱਲ (x1, x2): ਇਹ ਮੁੱਲ ਹਮੇਸ਼ਾ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ (0 ≤ x ≤ 1)। ਸਮਾਂ ਕਦੇ ਵੀ ਪਿੱਛੇ ਨਹੀਂ ਜਾ ਸਕਦਾ, ਇਸ ਲਈ X ਦੇ ਮੁੱਲ ਇਸ ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾ ਸਕਦੇ।
• Y ਮੁੱਲ (y1, y2): ਇਹ ਮੁੱਲ -0.70 ਤੋਂ 1.70 ਦੇ ਵਿਚਕਾਰ ਹੋ ਸਕਦੇ ਹਨ। ਕਿਉਂਕਿ Y ਪ੍ਰਗਤੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਜਾ ਸਕਦਾ ਹੈ ਤਾਂ ਜੋ ਐਨੀਮੇਸ਼ਨ ਆਪਣੀ ਅੰਤਿਮ ਸਥਿਤੀ ਤੋਂ ਅੱਗੇ ਨਿਕਲ ਸਕੇ ਜਾਂ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਤੋਂ ਪਿੱਛੇ ਖਿੱਚੀ ਜਾ ਸਕੇ।

ਟੂਲ ਦੀ ਵਰਤੋਂ ਅਤੇ ਇਨਪੁਟ ਵਿਧੀਆਂ

ਇਹ ਜਨਰੇਟਰ ਤੁਹਾਨੂੰ ਵਿਜ਼ੂਅਲ ਤਰੀਕੇ ਨਾਲ ਆਪਣੀ ਪਸੰਦ ਦਾ ਈਜ਼ਿੰਗ ਕਰਵ ਤਿਆਰ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਤਰੀਕਿਆਂ ਨਾਲ ਇਨਪੁਟਸ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ:

1. ਹੈਂਡਲਾਂ ਨੂੰ ਖਿੱਚਣਾ: ਤੁਸੀਂ ਗ੍ਰਾਫ ਉੱਤੇ ਮੌਜੂਦ ਦੋ ਹੈਂਡਲਾਂ ਨੂੰ ਸਿੱਧਾ ਖਿੱਚ ਕੇ ਕਰਵ ਦੇ ਆਕਾਰ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ।
2. ਸੰਖਿਆਤਮਕ ਇਨਪੁਟ: ਤੁਸੀਂ ਪਹਿਲੇ ਅਤੇ ਦੂਜੇ ਕੰਟਰੋਲ ਪੁਆਇੰਟਾਂ ਦੇ X ਅਤੇ Y ਮੁੱਲਾਂ ਨੂੰ ਸਿੱਧਾ ਟਾਈਪ ਕਰਕੇ ਬਦਲ ਸਕਦੇ ਹੋ।
   • ਪਹਿਲਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ X: 0 ਤੋਂ 1 ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ।
   • ਪਹਿਲਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ Y: -0.70 ਤੋਂ 1.70 ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ।
   • ਦੂਜਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ X: 0 ਤੋਂ 1 ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ।
   • ਦੂਜਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ Y: -0.70 ਤੋਂ 1.70 ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ।
3. ਕੀਬੋਰਡ ਨਿਯੰਤਰਣ: ਜਦੋਂ ਕੋਈ ਕੰਟਰੋਲ ਪੁਆਇੰਟ ਹੈਂਡਲ ਫੋਕਸ ਵਿੱਚ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕੀਬੋਰਡ 'ਤੇ ਖੱਬੇ ਐਰੋ (Left arrow) ਕੀਅ ਨੂੰ ਦਬਾਉਣ ਨਾਲ ਇਸਦਾ ਮੁੱਲ ਬਦਲ ਕੇ, ਉਦਾਹਰਨ ਲਈ, 0.99 ਹੋ ਜਾਂਦਾ ਹੈ।
4. ਪ੍ਰੀਸੈੱਟ ਚੋਣ: ਤੁਸੀਂ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਚੋਣ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ "ease", "ease-in", "ease-out", "ease-in-out", "ਬੈਕ ਇਨ", "ਬੈਕ ਆਊਟ", ਜਾਂ "ਬੈਕ ਇਨ-ਆਊਟ"।

ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਗਲਤ ਮੁੱਲ ਦਰਜ ਕਰਦੇ ਹੋ, ਤਾਂ ਟੂਲ ਵਿੱਚ ਸੁਰੱਖਿਆ ਨਿਯਮ ਲਾਗੂ ਹੁੰਦੇ ਹਨ:

• ਜੇਕਰ ਤੁਸੀਂ "ਪਹਿਲਾ ਕੰਟਰੋਲ ਪੁਆਇੰਟ" ਲਈ 9 ਵਰਗਾ ਕੋਈ ਅਵੈਧ ਮੁੱਲ ਦਰਜ ਕਰਦੇ ਹੋ ਅਤੇ ਫਿਰ ਫੀਲਡ ਤੋਂ ਫੋਕਸ ਹਟਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਮੁੱਲ ਆਪਣੇ ਆਪ ਸੀਮਾ ਦੇ ਅੰਦਰ ਯਾਨੀ 1 ਬਣ ਜਾਵੇਗਾ।
• ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਸੰਖਿਆਤਮਕ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਖਾਲੀ ਕਰ ਦਿੰਦੇ ਹੋ ਅਤੇ ਫੋਕਸ ਹਟਾਉਂਦੇ ਹੋ, ਤਾਂ ਪੁਰਾਣਾ ਵੈਧ ਮੁੱਲ ਆਪਣੇ ਆਪ ਬਹਾਲ ਹੋ ਜਾਵੇਗਾ।
• ਖਾਲੀ ਜਾਂ ਗੈਰ-ਸੰਖਿਆਤਮਕ ਇਨਪੁਟਸ ਇੱਕ ਪੂਰੇ ਅਤੇ ਸਹੀ ਮੁੱਲ ਦੇ ਦਰਜ ਹੋਣ ਤੱਕ ਉਡੀਕ ਕਰਦੇ ਹਨ।

ਆਉਟਪੁੱਟ ਅਤੇ ਪ੍ਰੀਵਿਊ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਜਿਵੇਂ ਹੀ ਤੁਸੀਂ ਕਰਵ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਟੂਲ ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਨਤੀਜੇ ਦਿਖਾਉਂਦਾ ਹੈ:

• ਤੁਹਾਡਾ ਕਰਵ: ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਈਜ਼ਿੰਗ ਕਰਵ ਦੀ ਵਿਜ਼ੂਅਲ ਸ਼ਕਲ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
• ਮੋਸ਼ਨ ਪ੍ਰੀਵਿਊ: ਕਰਵ ਦੇ ਨਾਲ-ਨਾਲ ਇੱਕ ਬਿੰਦੂ ਚਲਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਈਜ਼ਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਸਦੇ ਬਿਲਕੁਲ ਨਾਲ ਇੱਕ ਹੋਰ ਬਿੰਦੂ ਇੱਕ ਸਥਿਰ (ਲੀਨੀਅਰ) ਗਤੀ ਨਾਲ ਚਲਦਾ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਦੋਵਾਂ ਦੀ ਗਤੀ ਵਿੱਚ ਅੰਤਰ ਨੂੰ ਸਾਫ਼ ਦੇਖ ਸਕੋ।
• cubic-bezier(x1, y1, x2, y2): ਇਹ ਤੁਹਾਡੇ ਕਰਵ ਦੇ ਅਨੁਸਾਰ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਸਹੀ CSS ਮੁੱਲ ਹੈ।
• ਕਾਪੀ ਸਟੇਟਸ: ਜਦੋਂ ਤੁਸੀਂ ਮੁੱਲ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਕਾਪੀ ਕਰਦੇ ਹੋ, ਤਾਂ ਇੰਟਰਫੇਸ 'ਤੇ "Copied" ਲਿਖਿਆ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਅਸਫਲਤਾ ਦਾ ਕੋਈ ਸੰਦੇਸ਼ ਨਹੀਂ ਹੁੰਦਾ।

ਜੇਕਰ ਤੁਸੀਂ "ਬੈਕ ਆਊਟ" ਪ੍ਰੀਸੈੱਟ ਦੀ ਚੋਣ ਕਰਦੇ ਹੋ, ਤਾਂ ਟੂਲ cubic-bezier() ਦੇ ਮੁੱਲ ਨੂੰ ਸਿੱਧਾ cubic-bezier(0.34, 1.56, 0.64, 1) 'ਤੇ ਸੈੱਟ ਕਰ ਦਿੰਦਾ ਹੈ।

ਓਵਰਸ਼ੂਟ ਅਤੇ ਪੁੱਲ-ਬੈਕ ਪ੍ਰਭਾਵ

ਸਧਾਰਨ ਈਜ਼ਿੰਗ ਵਿੱਚ ਐਨੀਮੇਸ਼ਨ ਸਿਰਫ਼ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਤੋਂ ਅੰਤਿਮ ਬਿੰਦੂ ਤੱਕ ਜਾਂਦੀ ਹੈ। ਪਰ cubic-bezier() ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਵਧੇਰੇ ਜੀਵੰਤ ਪ੍ਰਭਾਵ ਬਣਾ ਸਕਦੇ ਹੋ:

• ਪੁੱਲ-ਬੈਕ (Anticipation): ਜੇਕਰ ਤੁਸੀਂ ਪਹਿਲੇ ਕੰਟਰੋਲ ਪੁਆਇੰਟ ਦੇ Y ਮੁੱਲ (y1) ਨੂੰ 0 ਤੋਂ ਹੇਠਾਂ (ਨੈਗੇਟਿਵ, ਜਿਵੇਂ ਕਿ -0.5) ਸੈੱਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ ਥੋੜ੍ਹਾ ਪਿੱਛੇ ਵੱਲ ਖਿੱਚੀ ਜਾਂਦੀ ਹੈ।
• ਓਵਰਸ਼ੂਟ (Overshoot): ਜੇਕਰ ਤੁਸੀਂ ਦੂਜੇ ਕੰਟਰੋਲ ਪੁਆਇੰਟ ਦੇ Y ਮੁੱਲ (y2) ਨੂੰ 1 ਤੋਂ ਉੱਪਰ (ਜਿਵੇਂ ਕਿ 1.5) ਸੈੱਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਆਪਣੇ ਅੰਤਿਮ ਟੀਚੇ ਤੋਂ ਥੋੜ੍ਹਾ ਅੱਗੇ ਨਿਕਲ ਜਾਂਦੀ ਹੈ ਅਤੇ ਫਿਰ ਵਾਪਸ ਆ ਕੇ ਸਥਿਰ ਹੁੰਦੀ ਹੈ।

ਇਹ ਪ੍ਰਭਾਵ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਵਧੇਰੇ ਕੁਦਰਤੀ ਅਤੇ ਭੌਤਿਕ ਵਿਗਿਆਨ ਦੇ ਨਿਯਮਾਂ ਦੇ ਨੇੜੇ ਬਣਾਉਂਦੇ ਹਨ।

ਸੀਮਾਵਾਂ

ਹਾਲਾਂਕਿ cubic-bezier() ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ, ਪਰ ਇਸਦੀਆਂ ਕੁਝ ਸੀਮਾਵਾਂ ਹਨ:

• ਇੱਕ ਸਿੰਗਲ cubic-bezier ਫੰਕਸ਼ਨ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਪੂਰਵ-ਅਨੁਮਾਨ (anticipate) ਅਤੇ ਇੱਕ ਵਾਰ ਓਵਰਸ਼ੂਟ (overshoot) ਕਰ ਸਕਦਾ ਹੈ।
• ਇਹ ਸਿਰਫ਼ ਇੱਕ ਦਿਸ਼ਾ ਵਿੱਚ ਜਾ ਕੇ ਸਥਿਰ ਹੋ ਸਕਦਾ ਹੈ।
• ਇਹ ਅਜਿਹੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਪ੍ਰਗਟ ਨਹੀਂ ਕਰ ਸਕਦਾ ਜੋ ਕਈ ਵਾਰ ਆਪਣੀ ਦਿਸ਼ਾ ਬਦਲਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਬਾਊਂਸ (bounce) ਜਾਂ ਇਲਾਸਟਿਕ (elastic) ਪ੍ਰਭਾਵ। ਅਜਿਹੇ ਗੁੰਝਲਦਾਰ ਪ੍ਰਭਾਵਾਂ ਲਈ CSS ਕੀਫ੍ਰੇਮਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਨਿੱਜਤਾ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ

ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਨਿੱਜਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਹੈ। ਕਰਵ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

---

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)

ਦੋ ਹੈਂਡਲ ਅਤੇ ਚਾਰ ਨੰਬਰਾਂ ਦਾ ਕੀ ਅਰਥ ਹੈ?

ਕਰਵ ਹੇਠਾਂ-ਖੱਬੇ (ਸ਼ੁਰੂਆਤ) ਤੋਂ ਉੱਪਰ-ਸੱਜੇ (ਅੰਤ) ਤੱਕ ਚੱਲਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸਮਾਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਜਾਂਦਾ ਹੈ ਅਤੇ ਪ੍ਰਗਤੀ ਉੱਪਰ ਵੱਲ ਜਾਂਦੀ ਹੈ। ਦੋ ਹੈਂਡਲ ਕੰਟਰੋਲ ਪੁਆਇੰਟ ਹਨ ਜੋ ਇਸਨੂੰ ਮੋੜਦੇ ਹਨ — ਹਰੇਕ ਕੋਲ ਇੱਕ X ਅਤੇ ਇੱਕ Y ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਕੱਠੇ ਉਹ cubic-bezier(x1, y1, x2, y2) ਹੁੰਦੇ ਹਨ। X ਹਮੇਸ਼ਾ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਰਹਿੰਦਾ ਹੈ, ਜਦੋਂ ਕਿ Y ਮੋਸ਼ਨ ਨੂੰ ਓਵਰਸ਼ੂਟ ਕਰਨ ਜਾਂ ਸਥਿਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪਿੱਛੇ ਖਿੱਚਣ ਲਈ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਜਾ ਸਕਦਾ ਹੈ।

ਮੈਂ ਆਪਣੇ CSS ਵਿੱਚ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਾਂ?

cubic-bezier() ਨੂੰ ਕਾਪੀ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਉੱਥੇ ਵਰਤੋ ਜਿੱਥੇ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ — transition-timing-function, animation-timing-function, ਜਾਂ ਸ਼ਾਰਟਹੈਂਡ, ਜਿਵੇਂ ਕਿ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out ਅਤੇ ease-in-out ਕੀਵਰਡ ਸਿਰਫ਼ ਨਿਸ਼ਚਿਤ cubic-bezier ਕਰਵ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਪ੍ਰੀਸੈੱਟ ਨੂੰ ਚੁਣਨ ਨਾਲ ਤੁਹ ਤੁਹਾਨੂੰ ਕੀਵਰਡ ਦੇ ਪਿੱਛੇ ਦਾ ਸਹੀ ਮੁੱਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਕੀ ਇਹ ਇੱਕ ਬਾਊਂਸ (bounce) ਜਾਂ ਇਲਾਸਟਿਕ (elastic) ਪ੍ਰਭਾਵ ਬਣਾ ਸਕਦਾ ਹੈ?

ਆਪਣੇ ਆਪ ਨਹੀਂ। ਇੱਕ ਸਿੰਗਲ cubic-bezier ਪਹਿਲਾਂ ਤੋਂ ਅੰਦਾਜ਼ਾ ਲਗਾ ਸਕਦਾ ਹੈ ਅਤੇ ਓਵਰਸ਼ੂਟ ਕਰ ਸਕਦਾ ਹੈ — "back" ਪ੍ਰੀਸੈੱਟ ਅਜਿਹਾ ਕਰਨ ਲਈ ਇੱਕ ਹੈਂਡਲ ਨੂੰ ਬਾਕਸ ਤੋਂ ਅੱਗੇ ਖਿੱਚਦੇ ਹਨ — ਪਰ ਇਹ ਸਿਰਫ਼ ਇੱਕ ਪਾਸੇ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਫਿਰ ਸਥਿਰ ਹੋ ਸਕਦਾ ਹੈ। Bounce ਅਤੇ elastic ਕਈ ਵਾਰ ਦਿਸ਼ਾ ਬਦਲਦੇ ਹਨ, ਜਿਸ ਨੂੰ ਕੋਈ ਵੀ ਸਿੰਗਲ cubic-bezier ਪ੍ਰਗਟ ਨਹੀਂ ਕਰ ਸਕਦਾ; ਉਹਨਾਂ ਲਈ CSS ਕੀਫ੍ਰੇਮ (keyframes) ਜਾਂ ਕਈ ਸਟਾਪਾਂ ਵਾਲੇ linear() ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।