लीनियर() ईज़िंग फ़ंक्शन की मदद से, सीएसएस में जटिल ऐनिमेशन कर्व बनाएं

पेश है linear(). यह सीएसएस में मौजूद एक ईज़िंग फ़ंक्शन है. यह अपने पॉइंट के बीच लीनियर तरीके से इंटरपोलेट करता है. इससे आपको बाउंस और स्प्रिंग इफ़ेक्ट फिर से बनाने में मदद मिलती है.

Bramus

सीएसएस में ईज़िंग

सीएसएस में एलिमेंट को ऐनिमेट या ट्रांज़िशन करते समय, animation-timing-function और transition-timing-function प्रॉपर्टी का इस्तेमाल करके, ईज़िंग फ़ंक्शन की मदद से वैल्यू बदलने की दर को कंट्रोल किया जा सकता है.

सीएसएस में कई कीवर्ड प्रीसेट के तौर पर उपलब्ध हैं. जैसे, linear, ease, ease-in, ease-out, और ease-in-out. अपनी खुद की ईज़िंग कर्व बनाने के लिए, cubic-bezier() फ़ंक्शन का इस्तेमाल करें. इसके अलावा, steps() ईज़िंग फ़ंक्शन का इस्तेमाल करके, स्टेप-बाय-स्टेप तरीके से भी ईज़िंग कर्व बनाए जा सकते हैं.

सही तरीके से इस्तेमाल करने पर, ईज़िंग से ऐनिमेशन वाले एलिमेंट को वज़न का एहसास मिलता है, क्योंकि यह तेज़ी से आगे बढ़ता है.

सीएसएस में, बाउंस या स्प्रिंग इफ़ेक्ट जैसे जटिल कर्व नहीं बनाए जा सकते. हालांकि, linear() की मदद से अब इन्हें काफ़ी हद तक बनाया जा सकता है.

linear() के बारे में जानकारी

सीएसएस में linear() का इस्तेमाल करके, ईज़िंग को नए तरीके से तय किया जा सकता है. यह फ़ंक्शन, कॉमा लगाकर अलग किए गए कई स्टॉप स्वीकार करता है. हर स्टॉप एक संख्या होती है, जो 0 से 1 के बीच होती है. हर स्टॉप के बीच इंटरपोलेशन, लीनियर तरीके से किया जाता है. इससे फ़ंक्शन के नाम के बारे में पता चलता है.

animation-timing-function: linear(0, 0.25, 1);

ये स्टॉप, डिफ़ॉल्ट रूप से बराबर दूरी पर होते हैं. ऊपर दिए गए स्निपेट में इसका मतलब है कि 0.25 की आउटपुट वैल्यू का इस्तेमाल 50% मार्क पर किया जाएगा.

विज़ुअलाइज़ किए जाने पर, linear(0, 0.25, 1) का ग्राफ़ इस तरह दिखता है:

अगर आपको स्टॉप को बराबर दूरी पर नहीं रखना है, तो स्टॉप की अवधि को पास किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. स्टॉप की अवधि के तौर पर एक वैल्यू पास करने पर, आपको उसका शुरुआती पॉइंट तय करना होता है:

animation-timing-function: linear(0, 0.25 75%, 1);

यहां, 0.25 मार्क पर 0.25 की आउटपुट वैल्यू का इस्तेमाल नहीं किया जाएगा, लेकिन 75% पर किया जाएगा.50%

स्टॉप लेंथ के तौर पर दो वैल्यू तय करते समय, आपको इसके शुरू और खत्म होने, दोनों के पॉइंट तय करने होते हैं:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

समय के हिसाब से, 25% से 75% तक के लिए आउटपुट वैल्यू 0.25 का इस्तेमाल किया जाएगा.

जटिल कर्व बनाना

पिछले उदाहरणों में, आसान ईज़िंग का इस्तेमाल किया गया है. हालांकि, अगर आपको कुछ हद तक सटीक ईज़िंग नहीं चाहिए, तो linear() का इस्तेमाल करके जटिल ईज़िंग फ़ंक्शन फिर से बनाए जा सकते हैं.

इस बाउंस ईज़िंग कर्व को लें. यह एक तरह की ईज़िंग है, जिसे सीधे तौर पर सीएसएस में नहीं दिखाया जा सकता. इसे JavaScript का इस्तेमाल करके तय किया जाता है:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

कोड से आपको ज़्यादा जानकारी नहीं मिल सकती, लेकिन विज़ुअलाइज़ेशन से मिल सकती है. यहां आउटपुट को नीले रंग के कर्व के तौर पर दिखाया गया है:

इसमें कई स्टॉप जोड़कर, इस कर्व को आसान बनाया जा सकता है. यहां हर हरे बिंदु का मतलब एक स्टॉप है:

linear() में पास करने पर, नतीजा एक ऐसी कर्व होती है जो मूल कर्व की तरह दिखती है, लेकिन किनारों पर थोड़ी खुरदरी होती है.

हरे रंग के एनिमेटेड बॉक्स की तुलना नीले रंग के बॉक्स से करें. आपको पता चलेगा कि यह उतना स्मूद नहीं है.

हालांकि, अगर ज़्यादा स्टॉप जोड़े जाते हैं, तो ओरिजनल कर्व का अनुमान लगाया जा सकता है. यहां अपडेट किया गया वर्शन दिया गया है:

सिर्फ़ स्टॉप की संख्या को दोगुना करने पर, आपको पहले से बेहतर नतीजे मिलते हैं.

ऐनिमेशन के लिए इस्तेमाल किया गया कोड ऐसा दिखता है:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

मदद करने वाला टूल

स्टॉप की इस सूची को मैन्युअल तरीके से बनाना बहुत मुश्किल होगा. अच्छी बात यह है कि Jake और Adam ने एक टूल बनाया है. इसकी मदद से, ईज़िंग कर्व को linear() में बदला जा सकता है.

यह टूल, JavaScript ईज़िंग फ़ंक्शन या SVG कर्व को इनपुट के तौर पर लेता है. इसके बाद, linear() का इस्तेमाल करके, आसान कर्व को आउटपुट के तौर पर दिखाता है. स्लाइडर का इस्तेमाल करके, स्टॉप की संख्या और उनकी सटीक जानकारी को कंट्रोल करें.

सबसे ऊपर दाईं ओर, प्रीसेट में से कोई एक विकल्प भी चुना जा सकता है. इनमें स्प्रिंग, बाउंस, सिंपल इलास्टिक या मटीरियल डिज़ाइन पर ज़ोर देने वाली ईज़िंग शामिल हैं.

DevTools की सुविधा

DevTools में, linear() के नतीजे को विज़ुअलाइज़ करने और उसमें बदलाव करने की सुविधा उपलब्ध है. स्टॉप को इधर-उधर खींचने की सुविधा देने वाले इंटरैक्टिव टूलटिप को दिखाने के लिए, आइकॉन पर क्लिक करें.

DevTools की यह सुविधा, Chrome 114 से DevTools में उपलब्ध है.