समय-आधारित CSS एनीमेशन तकनीक

 (yuanchuan.dev)
7 पॉइंट द्वारा GN⁺ 2024-05-06 | 1 टिप्पणियां | WhatsApp पर शेयर करें

CSS एनीमेशन के लिए समय-आधारित तरीका

  • CSS में गणितीय फ़ंक्शन्स के सपोर्ट के साथ, समय-आधारित तरीके वाली CSS एनीमेशन को फिर से आज़माया जा सकता है
    • mod(), round(), त्रिकोणमितीय फ़ंक्शन्स आदि का समर्थन मिलता है
    • डेमो देखने के लिए experimental feature flag को सक्षम करना पड़ सकता है

आधारभूत विचार

  • CSS Houdini API के जरिए समय (मिलीसेकंड) ट्रैक करने वाला उपयोगकर्ता-परिभाषित वेरिएबल परिभाषित किया जा सकता है
    • @property नियम का उपयोग करके --t वेरिएबल परिभाषित करें और प्रारंभिक मान 0 सेट करें
    • @keyframes नियम से --t को 24 घंटे (86,400,000ms) में लाइनियर तरीके से बढ़ाएँ
    • --t पर आधारित अन्य मान भी बदलते हैं और एनीमेशन इफेक्ट बनता है
    • counter() फ़ंक्शन से --t वेरिएबल का मान दिखाया जा सकता है

फ्रेम रेट नियंत्रण

  • स्मूद एनीमेशन के लिए प्रति सेकंड 60 फ्रेम (FPS) की अपडेट दर पर्याप्त मानी जाती है
  • यदि ज़रूरत हो तो step() फ़ंक्शन से फ्रेम रेट को मैन्युअल तरीके से नियंत्रित किया जा सकता है
    • animation-timing-function प्रॉपर्टी में step() का उपयोग करके वांछित FPS का हिसाब लगाया जा सकता है

टाइम रूपांतरण

  • --t का मान एक दिशा में लगातार बढ़ता है, इसलिए कुछ CSS प्रॉपर्टी के लिए यह उपयुक्त नहीं हो सकता
  • min() फ़ंक्शन से किसी निश्चित मान पर पहुंचकर एनीमेशन को रोका जा सकता है
  • mod() फ़ंक्शन का उपयोग करके एनीमेशन को फिर से शुरू किया जा सकता है
  • sin() फ़ंक्शन से आगे-पीछे हिलने का प्रभाव बनाया जा सकता है

कस्टम Easing फ़ंक्शन

  • गणितीय फ़ंक्शन और --t वेरिएबल की मदद से कस्टम easing फ़ंक्शन बनाया जा सकता है
  • cubic-bezier() से कठिन से कठिन कुछ इफेक्ट भी बनाना संभव हो जाता है
  • उदाहरण: ease-out-cubic, ease-out-elastic आदि

CSS Doodle प्रयोग

  • जटिल expressions में var() और calc() कोड की readability को कम कर सकते हैं
  • css-doodle में @t फ़ंक्शन से --t वेरिएबल को दर्शाया जा सकता है
  • नवीनतम css-doodle संस्करण में args के अंदर सीधे सरल गणितीय expressions की अनुमति दी गई है
  • अतिरिक्त रूप से @T और @TS फ़ंक्शन भी उपलब्ध हैं
    • @T दिन की शुरुआत से समय दर्शाता है
    • @TS @t(/1000) का शॉर्टकट है, जो सेकंड में समय ट्रैक करता है
  • घड़ी का उदाहरण और jump motion उदाहरण जैसे केस भी css-doodle से इम्प्लीमेंट किए जा सकते हैं

निष्कर्ष

  • समय को वेरिएबल की तरह इस्तेमाल करने वाली यह approach रोचक है
  • Keyframes शायद ज्यादा intuitive हो, लेकिन गणनाओं और इनपुट वेरिएबल्स वाले जटिल डेमो सीन में समय को वेरिएबल की तरह लेने से अधिक विविध परिणाम मिलते हैं

GN⁺ की राय

  • CSS की time-based animation तकनीक केवल CSS से संभव एनीमेशन के दायरे को ही नहीं बढ़ाती, बल्कि shader या WebGL जैसी अन्य तकनीकों के साथ इंटीग्रेशन की संभावनाओं को भी बढ़ाती दिखती है
  • CSS Houdini और CSS Doodle जैसे टूल्स के साथ इस्तेमाल करने पर और भी अधिक लचीले व विविध अभिव्यक्ति के विकल्प खुल सकते हैं
  • हालांकि वास्तविक प्रोजेक्ट में लागू करते समय browser compatibility या performance issue जैसी चीज़ें ध्यान देने की होंगी। पुराने Keyframe तरीके और इसके pros/cons की अच्छी तुलना करके ही चुनना बेहतर रहेगा
  • GSAP जैसी प्रोफेशनल एनीमेशन लाइब्रेरीज़ से तुलना करके भी pros/cons का विश्लेषण ज़रूरी है। दोनों को mutual complement की तरह कैसे जोड़ा जा सकता है, इसे भी explore करना ठीक रहेगा
  • उम्मीद है कि time-based CSS एनीमेशन के उदाहरण और उपयोग मामले अधिक मात्रा में शेयर हों, ताकि फ्रंटएंड डेवलपर्स इसे और आसानी से अपनाकर लगा सकें

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-05-06
Hacker News टिप्पणियाँ

  • CSS में negative animation-delay value का इस्तेमाल करके JavaScript से animation progress को control किया जा सकता है। उदाहरण के लिए animation-delay: -1500ms सेट करने पर animation तुरंत शुरू होकर 1.5 सेकंड के पॉइंट पर jump कर जाती है। JavaScript से इस value को manipulate करके CSS animations को scrub किया जा सकता है और सभी animations को game-engine style के calculate-update-render tick loop के साथ compatible बनाया जा सकता है।

  • आसान easing function या एक-दो channel की बेसिक keyframe से आगे बढ़ते ही इस approach की सीमाएँ जल्दी सामने आ जाती हैं। Theatre.js library में timeline के साथ studio UI है, जिससे keyframes और Bézier curves edit किए जा सकते हैं, और ऐसा runtime मौजूद है जो इन keyframes को import करके timeline के अनुसार values interpolate करता है—इसलिए जब tuned animation चाहिए हो तो यह बहुत काम आता है।

  • इस पोस्ट में लगभग 88% browser support वाला custom CSS @property इस्तेमाल किया गया है। अलग-अलग ब्राउज़र में default value सेट करने का तरीका अलग हो सकता है—Chrome में undefined या invalid value हो तो default इस्तेमाल करता है, जबकि Firefox सिर्फ undefined case में default सेट करता है। ज़्यादातर projects में शायद সমস্যা नहीं होगी, लेकिन browsers के बीच implementation mismatch हटाने के लिए शायद JavaScript से Firefox का default सेट करना पड़े।

  • CSS में mod(), round(), त्रिकोणीय functions जैसी पर्याप्त गणितीय functions पहले से हैं। CSS JavaScript की तरह timer start नहीं कर सकता, लेकिन अब CSS Houdini API से custom variables define करके milliseconds में time track किया जा सकता है। फिर भी जब JavaScript मौजूद है, इन सब की जरूरत क्यों पड़े? Drawing layer को सिर्फ drawing primitives पर ही ध्यान नहीं देना चाहिए? और क्यों धीरे-धीरे higher-level layers बढ़ती जा रही हैं?

  • बनी हुई clock बहुत slick लगती है। लेख अच्छी तरह लिखा गया है। Chrome अभी तक mod() के लिए CSS support रिलीज़ नहीं कर पाया है, इसलिए बिना preview release के page के अधिकांश examples animate नहीं होंगे।

  • अगर बिना tick control किए सभी browsers में smooth CSS animation चाहिए हो तो FLIP तरीका काफ़ी useful है।

  • मुझे ऐसा 'box breathing' बनाना था जिसमें inhale-hold-exhale-hold के सभी चरण custom करके अपनी body के हिसाब से सेट कर सकूँ और चाहे गए effect ला सकूँ; इस page में दिए तरीके के बिना (JS या भारी complexity के बिना) ऐसा कोई तरीका नहीं मिला। इस page पर सच में बहुत creative demos हैं!

  • दिलचस्प यह है कि mod() से पहले वाला demo काम करता है, लेकिन mod() और sin() दोनों ही latest Android Chrome पर कोई काम नहीं कर रहे हैं।

  • पेज के नीचे का animation बेहद प्रभावशाली है। लगता है कि यह element नहीं, बल्कि जैसा दिख रहा है।

  • यह बेहद प्रभावित करने वाला है, लेकिन कहीं न कहीं लगता है कि हम वही जगह छू रहे हैं जो कई दशक पहले Flash से संभव थी। मैं Flash के वापस आने की उम्मीद नहीं करता, लेकिन CSS animation बनाने के लिए ज्यादा user-friendly tools उपलब्ध हों तो बेहतर होगा।