पेश है linear(), सीएसएस में एक ईज़िंग फ़ंक्शन, जो अपने पॉइंट के बीच रैखिक रूप से इंटरपोलेट करता है, जिससे आप बाउंस और स्प्रिंग इफ़ेक्ट को फिर से बना सकते हैं.
सीएसएस में ईज़िंग
सीएसएस में एलिमेंट को ऐनिमेट या ट्रांज़िशन करते समय, animation-timing-function और transition-timing-function प्रॉपर्टी का इस्तेमाल करके ईज़िंग फ़ंक्शन से वैल्यू बदलने की दर को कंट्रोल किया जा सकता है.
सीएसएस में, प्रीसेट के तौर पर linear, ease, ease-in, ease-out, और ease-in-out जैसे कई कीवर्ड उपलब्ध हैं. अपने खुद के ईज़िंग कर्व बनाने के लिए cubic-bezier() फ़ंक्शन का इस्तेमाल करें या steps() ईज़िंग फ़ंक्शन का इस्तेमाल करके कदम आधारित तरीका अपनाएं.
सही तरीके से इस्तेमाल किए जाने पर, ईज़िंग से ऐनिमेशन वाले एलिमेंट के वज़न का पता चलता है. ऐसा करने से, एलिमेंट की पहुंच बढ़ती है.
सीएसएस में, बाउंस या स्प्रिंग इफ़ेक्ट जैसे जटिल कर्व बनाना संभव नहीं है. हालांकि, linear() की मदद से अब आप इनका सटीक अनुमान लगा सकते हैं.
linear() का परिचय
ब्राउज़र सहायता
- 113
- 113
- 112
- x
सीएसएस में ईज़िंग को परिभाषित करने का नया तरीका 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 में DevTools शिपिंग में उपलब्ध है.