वेब एनिमेशन - element.animate () क्रोम 36 में पहले से ही है

वेब पर एनिमेशन जावास्क्रिप्ट के क्षेत्रों में से एक था, लेकिन अब जब दुनिया मोबाइल उपकरणों में बदल गई है, एनीमेशन सीएसएस में स्थानांतरित हो गया है। इसने हमें एनिमेशन का वर्णन करने के लिए घोषणात्मक वाक्यविन्यास और अनुकूलन करने के लिए ब्राउज़र का उपयोग करने की अनुमति दी। मोबाइल उपकरणों पर 60fps (60 फ्रेम प्रति सेकंड) की खोज में, आपके ब्राउज़र में प्रभावी ढंग से एनिमेशन प्रदर्शित करने के लिए तंत्र के बारे में सभी सूक्ष्मता और नवाचारों को जानना आपके लिए उपयोगी होगा।



आजकल, बड़ी संख्या में जावास्क्रिप्ट-उन्मुख उपकरण बाजार में दिखाई दे रहे हैं जो एनिमेशन बनाने के लिए अधिक कुशल तंत्र प्रदान करते हैं, लेकिन पवित्र ग्रिल एक घोषणात्मक और अनिवार्य दृष्टिकोण का सहजीवन है, जब निर्णय लेने का आधार शुद्ध कोड होता है।



वेब एनिमेशन इस कॉल का उत्तर देने के लिए डिज़ाइन किए गए हैं, और पहले भाग को पहले ही Chrome 36 रिलीज़ में element.animate()



रूप में शामिल किया जा चुका है। यह नई कार्यक्षमता आपको शुद्ध जावास्क्रिप्ट में एनिमेशन बनाने की अनुमति देती है और अभी भी सीएसएस एनिमेशन या संक्रमण (वास्तव में, क्रोम के 34 वें संस्करण से पहले से ही, ऊपर वर्णित सभी तरीकों को वेब एनीमेशन इंजन के माध्यम से लॉन्च किया गया है ) का उपयोग करके प्रदर्शन मिलता है।



वाक्यविन्यास काफी सरल है, और सबसे अधिक संभावना है कि यह आपके लिए परिचित होगा यदि आपने कभी सीएसएस संक्रमण या एनिमेशन लिखा है:

 element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], { duration: timeInMs, iterations: iterationCount, delay: delayValue });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सबसे बड़ा सुधार यह है कि नई कार्यक्षमता के साथ, हम उन सभी बैसाखियों को भूल सकते हैं जिन्हें हमें इस बिंदु तक काम करना था।



उदाहरण के लिए, पिछले साल "ट्रैकिंग सांता" के लिए, हम आसानी से गिरने वाले बर्फ के टुकड़े देखना चाहते थे, और हमने सीएसएस का उपयोग करके एनीमेशन करने का फैसला किया। तो, यह element.animate



कोई कम उत्पादक नहीं हो सकता है।



वैसे भी, हम स्क्रीन के आधार पर गिरने वाली बर्फ के लिए एक क्षैतिज रेखा का चयन करना चाहते थे और मंच पर क्या हो रहा है, और निश्चित रूप से, गिरने वाली बर्फ की ऊंचाई (उपयोगकर्ता की ब्राउज़र विंडो की ऊंचाई) निर्धारित करने के लिए, जो लॉन्च तक ज्ञात नहीं होगी। इसका मतलब यह था कि हमें सीएसएस आंदोलनों और सीएसएस एनिमेशन का उपयोग करने की आवश्यकता थी, इसलिए बोलने के लिए, मक्खी पर, जिससे भारी प्रदर्शन नुकसान हुआ (सैकड़ों स्नोफ्लेक्स का मतलब सैकड़ों नई शैलियों का था)।



इसलिए, निम्नलिखित उदाहरण में, हमने उस दृष्टिकोण को लागू किया जिसे हम पहले से जानते थे:

 snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)'; //   snowFlake.offsetWidth; snowFlake.style.transitionProperty = 'transform'; snowFlake.style.transitionDuration = '1500ms'; snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

टिप्पणी "प्रतीक्षा फ्रेम" में चिप। चाल की एक सफल शुरुआत सुनिश्चित करने के लिए, ब्राउज़र को पता होना चाहिए कि तत्व प्रारंभिक स्थिति में है, और इसे सत्यापित करने के कई तरीके हैं। सबसे अधिक इस्तेमाल में से एक वस्तु के गुणों में से एक को पढ़ने के लिए है, जिससे पृष्ठ लेआउट पुनर्गणना हो जाता है, जिससे यह पुष्टि होती है कि तत्व को अंतिम स्थान पर जाने से पहले एक प्रारंभिक स्थिति है। इस पद्धति का उपयोग करने से आप एक बार फिर से खुश हो सकते हैं कि आप ब्राउज़र में रेंडरिंग तंत्र की मूल बातें जानते हैं।



सिंटैक्स, जैसा कि हम देखते हैं, इतना पारदर्शी है कि आप किसी और की कल्पना नहीं कर सकते हैं:

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

लेकिन हम कई अलग-अलग सेटिंग्स भी निर्दिष्ट कर सकते हैं। CSS एनिमेशन की तरह, वेब एनिमेशन में देरी और पुनरावृत्ति हो सकती है।

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, delay: 300 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एनिमेशनप्लेयर ऑब्जेक्ट

element.animate () एक एनिमेशनप्लेयर ऑब्जेक्ट देता है जिसका महत्व पृष्ठ पर चल रहे एनिमेशन की संख्या के अनुपात में बढ़ता है। जावास्क्रिप्ट और सीएसएस एनिमेशन एनिमेशनप्लेयर के साथ जुड़े होंगे, जिससे वे विभिन्न उपयोगी और दिलचस्प तरीकों से जुड़ सकते हैं।



अब, एनिमेशनप्लेयर में दो विशेषताएं हैं, और दोनों बहुत उपयोगी हैं। आप किसी भी समय AnimationPlayer.cancel()



का उपयोग करके एनीमेशन को रद्द कर सकते हैं:

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); //  , ,   1.5 ,  . player.cancel();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और, वैसे, जो सीएसएस एनिमेशन और संक्रमण का उपयोग करने के लिए उपयोग किया जाता है, मैं कहना चाहता हूं कि वेब एनिमेशन हमेशा घटनाओं को ट्रिगर करते हैं:

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); player.onfinish = function(e) { console.log('per aspera ad terra!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इसे आजमाइए!

यह सब कार्यक्षमता क्रोम 36 के हुड के नीचे है, जिसकी रिहाई दूसरे दिन पहले ही हो चुकी है! यदि आप इसे आज़माना चाहते हैं, तो इसे क्रोम 36 में एक मूल कार्यान्वयन पर करें। वैसे भी, एक पॉलीफ़ाइल है जो इस कार्यक्षमता को सभी नवीनतम ब्राउज़रों में जोड़ता है।



स्नोफ्लेक्स के डेमो को दो संस्करणों में देखा जा सकता है: मूल कार्यान्वयन पर और पॉलीफाइल का उपयोग करके कार्यान्वयन पर।

अपने विचार हमारे साथ साझा करें।

खैर, यह एक छोटा सा पूर्वावलोकन है जो जल्द ही वेब विकास का एक दैनिक विकास होगा, और इसे केवल एक उद्देश्य के साथ जारी किया गया था: डेवलपर्स के लिए प्रतिक्रिया प्राप्त करने के लिए। हमें यकीन नहीं है कि हमने एनीमेशन एपीआई के साथ काम करते समय सभी इच्छाओं को ध्यान में रखा या सभी तेज किनारों को चिकना कर दिया। हम इसे सही करने के लिए केवल एक ही तरीका देखते हैं: डेवलपर्स को एक कोशिश दें और देखें कि वे क्या कहते हैं।



इस पोस्ट को लिखने में मदद के लिए एडी उस्मानी और मैक्स हेनरिक का धन्यवाद।