Chromium 84 में Web Animations API के सुधार

प्रॉमिस की मदद से ऐनिमेशन को ऑर्केस्ट्रेट करना, बदले जा सकने वाले ऐनिमेशन की मदद से परफ़ॉर्मेंस को बेहतर बनाना, कंपोजिट मोड की मदद से ऐनिमेशन को ज़्यादा बेहतर बनाना वगैरह.

Kevin Ellis
Kevin Ellis

पब्लिश किया गया: 27 मई, 2020

सही तरीके से इस्तेमाल किए जाने पर, ऐनिमेशन आपके ब्रैंड के बारे में उपयोगकर्ता की धारणा और याददाश्त को बेहतर बनाते हैं. साथ ही, उपयोगकर्ता की कार्रवाइयों को दिशा-निर्देश देते हैं और उन्हें आपके ऐप्लिकेशन पर नेविगेट करने में मदद करते हैं. ऐसा, डिजिटल स्पेस में संदर्भ उपलब्ध कराकर किया जाता है.

वेब ऐनिमेशन एपीआई एक ऐसा टूल है जिसकी मदद से डेवलपर, JavaScript की मदद से ज़रूरी ऐनिमेशन लिख सकते हैं. इसे सीएसएस ऐनिमेशन और ट्रांज़िशन लागू करने के लिए लिखा गया था. साथ ही, आने वाले समय में इफ़ेक्ट डेवलप करने के साथ-साथ, मौजूदा इफ़ेक्ट को कंपोज और टाइम करने में भी मदद मिलती है.

Firefox और Safari में, स्पेसिफ़िकेशन की सुविधाओं का पूरा सेट पहले से लागू है. वहीं, Chromium 84 में Chrome और Edge के लिए, ऐसी कई सुविधाएं जोड़ी गई हैं जो पहले काम नहीं करती थीं. इनकी मदद से, अलग-अलग ब्राउज़र पर एक-दूसरे के साथ काम किया जा सकता है.

Web Animations API पहली बार जुलाई 2014 में, Chromium के वर्शन 36 में आया था. यह स्पेसिफ़िकेशन जुलाई 2020 में लॉन्च होगा और इसके वर्शन 84 में ही पूरा हो जाएगा.
Chromium में Web Albums API का लंबा इतिहास.

शुरू करना

अगर आपने @keyframe नियमों का इस्तेमाल किया है, तो Web Animations API का इस्तेमाल करके ऐनिमेशन बनाना आपको काफ़ी जाना-पहचाना लगेगा. सबसे पहले, आपको एक कीफ़्रेम ऑब्जेक्ट बनाना होगा. सीएसएस में यह ऐसा दिख सकता है:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript में ऐसा दिखेगा:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

सीएसएस में ऐनिमेशन के लिए पैरामीटर सेट किए जाते हैं:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

आपको JS में सेट करना होगा:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

दोनों में कोड की संख्या लगभग एक जैसी होती है. हालांकि, JavaScript में आपको कुछ ऐसे सुपरपावर मिलते हैं जो सिर्फ़ CSS में नहीं होते. इसमें इफ़ेक्ट को क्रम से लगाने की सुविधा और उनके चलने की स्थितियों को बेहतर तरीके से कंट्रोल करने की सुविधा शामिल है.

element.animate() से ज़्यादा

हालांकि, इस अपडेट के बाद, element.animate() का इस्तेमाल करके बनाए गए ऐनिमेशन के लिए Web ऐनिमेशन API का इस्तेमाल अब नहीं किया जा सकेगा. हम सीएसएस ऐनिमेशन और ट्रांज़िशन में भी बदलाव कर सकते हैं.

getAnimations() एक ऐसा तरीका है जो किसी एलिमेंट पर सभी ऐनिमेशन दिखाता है. भले ही, उसे element.animate() का इस्तेमाल करके बनाया गया हो या सीएसएस नियमों (सीएसएस ऐनिमेशन या ट्रांज़िशन) का इस्तेमाल करके. इसका एक उदाहरण यहां दिया गया है:

ट्रांज़िशन के लिए, पहले "get" की-फ़्रेम तय करें, ताकि यह पता लगाया जा सके कि ट्रांज़िशन कहां से शुरू हो रहा है. इसके बाद, क्रॉस फ़ेड इफ़ेक्ट चालू करके, दो नए ऐनिमेशन बनाए जाते हैं. क्रॉस-फ़ेड पूरा होने के बाद, कॉपी मिटाएं.

वादों के साथ ऐनिमेशन को व्यवस्थित करने का तरीका

Chromium 84 में, अब आपके पास दो तरीके हैं जिनका इस्तेमाल वादों के साथ किया जा सकता है: animation.ready और animation.finished.

  • animation.ready की मदद से, आपको लंबित बदलावों के लागू होने का इंतज़ार करने की सुविधा मिलती है. जैसे, प्ले और रोकें जैसे प्लेबैक कंट्रोल के तरीकों के बीच स्विच करना.
  • animation.finished, ऐनिमेशन पूरा होने पर कस्टम JavaScript कोड को लागू करने का तरीका उपलब्ध कराता है.

आगे बढ़ते हुए, हम animation.finished की मदद से व्यवस्थित ऐनिमेशन चेन बनाते हैं. यहां आपको एक वर्टिकल ट्रांसफ़ॉर्मेशन (scaleY) के बाद, हॉरिज़ॉन्टल ट्रांसफ़ॉर्मेशन (scaleX) मिलता है. इसके बाद, चाइल्ड एलिमेंट की ओपैसिटी में बदलाव होता है:

खुलने वाले मॉडल एलिमेंट में ट्रांसफ़ॉर्मेशन और ओपैसिटी लागू करना. Codepen पर डेमो देखें
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

हमने चेन में अगले ऐनिमेशन सेट को लागू करने से पहले, animation.finished.then() का इस्तेमाल करके इन ऐनिमेशन को चेन में जोड़ा है. इस तरह, ऐनिमेशन क्रम में दिखते हैं. साथ ही, अलग-अलग विकल्पों (जैसे, स्पीड और आसानी) के साथ अलग-अलग टारगेट एलिमेंट पर इफ़ेक्ट भी लागू किए जा रहे हैं.

सीएसएस में, इसे फिर से बनाना मुश्किल होगा. खास तौर पर, जब एक से ज़्यादा एलिमेंट पर यूनीक और क्रम से चलने वाले ऐनिमेशन लागू किए जा रहे हों. आपको @keyframe का इस्तेमाल करना होगा, ऐनिमेशन डालने के लिए सही समय के प्रतिशत को क्रम से लगाना होगा और क्रम में ऐनिमेशन ट्रिगर करने से पहले animation-delay का इस्तेमाल करना होगा.

उदाहरण: चलाना, रोकना, और पीछे ले जाना

जो खुल सकता है उसे बंद करना चाहिए! हालांकि, Chromium 39 के बाद से, Web Animations API की मदद से ऐनिमेशन चलाए जा सकते हैं, उन्हें रोका जा सकता है, और उन्हें पीछे चलाया जा सकता है.

आपके पास पहले दिखाए गए ऐनिमेशन को लेने का विकल्प है. साथ ही, .reverse() की मदद से बटन पर दोबारा क्लिक करने पर, इस ऐनिमेशन को बिना किसी रुकावट के दिखाया जा सकता है. इस तरह, हमारे मॉडल के लिए आसान और ज़्यादा काम का इंटरैक्शन बनाया जा सकता है.

बटन पर क्लिक करने पर, मोडल खुलने और बंद होने का उदाहरण. Glitch पर डेमो देखें

इसके लिए, आपको दो ऐनिमेशन बनाने होंगे, जिन्हें चलने के लिए मंज़ूरी नहीं मिली है (openModal, और एक इनलाइन ओपैसिटी ट्रांसफ़ॉर्मेशन). इसके बाद, किसी एक ऐनिमेशन को तब तक रोकें, जब तक दूसरा ऐनिमेशन पूरा न हो जाए. इसके बाद, चलाने से पहले हर कार्रवाई के पूरा होने का इंतज़ार करने के लिए, प्रॉमिस का इस्तेमाल किया जा सकता है. आखिर में, यह देखा जा सकता है कि कोई फ़्लैग सेट है या नहीं. इसके बाद, हर ऐनिमेशन को रिवर्स किया जा सकता है.

उदाहरण: आंशिक मुख्य-फ़्रेम के साथ डाइनैमिक इंटरैक्शन

रीटारगेटिंग का उदाहरण, जिसमें माउस क्लिक से ऐनिमेशन को नई जगह पर अडजस्ट किया जाता है. ग्लिच पर डेमो देखें
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

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

मौजूदा ट्रांज़िशन चलने के दौरान, नए ट्रांज़िशन ट्रिगर किए जा सकते हैं. इसका मतलब है कि मौजूदा ट्रांज़िशन में रुकावट आती है और एक नया ट्रांज़िशन शुरू होता है.

बदले जा सकने वाले ऐनिमेशन की मदद से परफ़ॉर्मेंस में सुधार

'mousemove' जैसे इवेंट के आधार पर ऐनिमेशन बनाते समय, हर बार एक नया ऐनिमेशन बनता है. इससे, मेमोरी का तेज़ी से इस्तेमाल होता है और परफ़ॉर्मेंस खराब हो सकती है. इस समस्या को हल करने के लिए, Chromium 83 में बदले जा सकने वाले ऐनिमेशन की सुविधा जोड़ी गई है. इससे, अपने-आप क्लीनअप की सुविधा चालू हो जाती है. इसमें, पूरे हो चुके ऐनिमेशन को बदले जा सकने वाले के तौर पर फ़्लैग किया जाता है. साथ ही, अगर किसी दूसरे पूरे हो चुके ऐनिमेशन से बदला जाता है, तो वे अपने-आप हट जाते हैं. यह उदाहरण देखें:

माउस को हिलाने पर, एक कॉमेट ट्रेल ऐनिमेट होता है. Glitch पर डेमो देखें
elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

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

  1. ऐनिमेशन पूरा हो गया है.
  2. कॉम्पोज़िट ऑर्डर में एक या उससे ज़्यादा ऐसे ऐनिमेशन हैं जो पूरे हो चुके हैं.
  3. नए ऐनिमेशन, एक ही प्रॉपर्टी को ऐनिमेट कर रहे हैं.

काउंटर को ट्रिगर करने के लिए anim.onremove का इस्तेमाल करके, हटाए गए हर ऐनिमेशन के साथ काउंटर को जोड़कर, यह देखा जा सकता है कि कितने ऐनिमेशन बदले जा रहे हैं.

ऐनिमेशन को और बेहतर तरीके से कंट्रोल करने के लिए, कुछ और तरीके भी हैं:

  • animation.replaceState() से यह ट्रैक किया जा सकता है कि कोई ऐनिमेशन चालू है, बना हुआ है या हटाया गया है.
  • animation.commitStyles(), एलिमेंट की स्टाइल को अपडेट करता है. यह स्टाइल, एलिमेंट में मौजूद स्टाइल के आधार पर तय होती है. साथ ही, यह कंपोज़िट ऑर्डर में एलिमेंट के सभी ऐनिमेशन को भी अपडेट करता है.
  • animation.persist(), किसी ऐनिमेशन को 'बदला नहीं जा सकता' के तौर पर मार्क करता है.

कंपोज़िट मोड के साथ मज़ेदार ऐनिमेशन

वेब ऐनिमेशन एपीआई की मदद से, अब अपने ऐनिमेशन का कंपोजिट मोड सेट किया जा सकता है. इसका मतलब है कि वे "बदलें" के डिफ़ॉल्ट मोड के अलावा, जोड़ने या इकट्ठा करने वाले मोड में भी हो सकते हैं. कंपोज़िट मोड की मदद से, डेवलपर अलग-अलग ऐनिमेशन लिख सकते हैं. साथ ही, उनके पास यह कंट्रोल करने का विकल्प होता है कि इफ़ेक्ट को कैसे जोड़ा जाए. अब तीन कंपोज़िट मोड काम करते हैं: 'replace' (डिफ़ॉल्ट मोड), 'add', और 'accumulate'.

ऐनिमेशन को कॉम्पोज़िट करने पर, डेवलपर छोटे और अलग-अलग इफ़ेक्ट लिख सकता है और उन्हें एक साथ देख सकता है. नीचे दिए गए उदाहरण में, हम हर बॉक्स पर रोटेशन और स्केल कीवर्ड लागू कर रहे हैं. इसमें सिर्फ़ एक बदलाव किया गया है, जो विकल्प के तौर पर जोड़ा गया है. इसे कंपोजिट मोड कहा जाता है:

डिफ़ॉल्ट, जोड़ने, और इकट्ठा करने वाले कंपोजिट मोड दिखाने वाला डेमो. Glitch पर डेमो देखें

डिफ़ॉल्ट 'replace' कंपोज़िट मोड में, फ़ाइनल ऐनिमेशन ट्रांसफ़ॉर्म प्रॉपर्टी को बदल देता है और rotate(360deg) scale(1.4) पर खत्म होता है. 'add' के लिए, कंपोज़िट रोटेशन को जोड़ता है और स्केल को गुणा करता है, जिससे rotate(720deg) scale(1.96) की आखिरी स्थिति बन जाती है. 'accumulate', ट्रांसफ़ॉर्मेशन को जोड़ता है, जिससे rotate(720deg) scale(1.8) बनता है. इन कॉम्पोज़िट मोड की बारीकियों के बारे में ज़्यादा जानने के लिए, वेब ऐनिमेशन स्पेसिफ़िकेशन में CompositeOperation और CompositeOperationOrAuto एनोटेशन देखें.

यूज़र इंटरफ़ेस (यूआई) एलिमेंट का यह उदाहरण देखें:

एक बाउंसी ड्रॉप-डाउन मेन्यू, जिसमें दो कंपोजिट किए गए ऐनिमेशन लागू किए गए हैं. Glitch पर डेमो देखें

यहां दो top ऐनिमेशन कंपोज़िट किए गए हैं. पहला एक मैक्रो-ऐनिमेशन है, जो पेज के सबसे ऊपर से स्लाइड-इन इफ़ेक्ट के तौर पर, मेन्यू की पूरी ऊंचाई तक ड्रॉप-डाउन को मूव करता है. दूसरा, एक माइक्रो-ऐनिमेशन है, जो सबसे नीचे पहुंचने पर थोड़ा बाउंस करता है. 'add' कंपोजिट मोड का इस्तेमाल करने से, ट्रांज़िशन आसानी से होता है.

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

Web Animations API के लिए आगे क्या है

आज के ब्राउज़र में एनिमेशन क्षमताओं में ये सभी रोमांचक बढ़ोतरी हैं और आने वाले समय में और भी नई सुविधाएं आने वाली हैं. आने वाले समय में क्या-क्या होने वाला है, इस बारे में ज़्यादा जानने के लिए, यहां दी गई खास जानकारी देखें: