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

पेश है 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 की आउटपुट वैल्यू का इस्तेमाल 50% के निशान पर नहीं, बल्कि 75% पर किया जाएगा.

स्टॉप की लंबाई के रूप में दो वैल्यू तय करते समय, इसके शुरुआती और आखिरी पॉइंट, दोनों तय किए जाते हैं:

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

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

रैखिक() के साथ जटिल कर्व बनाना

हालांकि, ऊपर दिए गए उदाहरण बहुत आसान ईज़िंग हैं, फिर भी आप 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
);

मदद के लिए टूल

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

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

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

DevTools सहायता

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

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

Unस्प्लैश पर हाउवी मैपसन की फ़ोटो