एनिमेटेड जावास्क्रिप्ट बैनर - यह आसान है *

^{*) वास्तव में, यह अभी भी मुश्किल है, लेकिन पहले की तुलना में आसान है।}

कहानी समस्या के बयान के साथ शुरू हुई: आपको एक दिन में HTML + जावास्क्रिप्ट का उपयोग करके लगभग तीस वस्तुओं के साथ एक एनिमेटेड बैनर बनाने की आवश्यकता है। दिन के दौरान, बेशक, बैनर नहीं बनाया गया था, लेकिन तीन लोगों-दिनों के दो प्रयासों के बाद बनाया गया था। असाइनमेंट पूरा करने के बाद, एक बैच एनीमेशन लाइब्रेरी बनी, जिसे मैंने परिदृश्य नाम दिया। मैं इसके संशोधित संस्करण के बारे में बात करना चाहता हूं।

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

कहीं से भी स्क्रिप्ट चलाना बेहद सरल है:

var newScenario = [...]; $.scenario(newScenario, { complete: function(time) { alert('!'); } }); 

यह केवल उदाहरण में तीन बिंदुओं के बजाय क्या लिखना है यह जानने के लिए रहता है :)

परिदृश्य विवरण

कोई भी परिदृश्य एनिमेटेड ऑब्जेक्ट या एक एनिमेटेड ऑब्जेक्ट की एक सरणी है। प्रत्येक एनिमेटेड ऑब्जेक्ट में तीन मुख्य गुण हो सकते हैं:

• एलिमेंट - एचटीएमएल एलिमेंट के लिए एक पॉइंटर या इस एनिमेटेड ऑब्जेक्ट का प्रतिनिधित्व करने वाले कई तत्व। आप एक हजार और एक तरीके से एक HTML तत्व को इंगित कर सकते हैं, इसलिए मैं इस संपत्ति का विस्तृत विवरण अभी के लिए छोड़ दूंगा।
• दृश्य - दृश्यों की एक सरणी या एक दृश्य। इस मामले में, एक दृश्य एक एनिमेटेड ऑब्जेक्ट पर कुछ कार्यों को संदर्भित करता है जिसमें एक शुरुआत समय और एक अंत समय होता है।
• बच्चा - बाल वस्तुओं या एक बच्चे की वस्तु की एक सरणी।

इस प्रकार, पूरा परिदृश्य एनिमेटेड वस्तुओं का एक पेड़ है। इसके अलावा, इस पेड़ की संरचना को HTML तत्वों की संरचना के साथ मेल खाना नहीं है, जिसका एनीमेशन स्क्रिप्ट द्वारा वर्णित है। यह मुझे लगता है कि स्क्रिप्ट शुरू करने का सबसे सुविधाजनक तरीका इस पेड़ का निर्माण करना है। अंत में, आपको कुछ इस तरह मिलना चाहिए:

 var newScenario = { element: '#scenario', child: [{ element: '.rocket_smile' child: [{ element: '.fire' }, { element: '.eyes' }, { element: '.ears' }] }, { element: '.rocket_atack' child: { element: '.fire' } }, { element: '.cloud', child: [{ element: ['eq', 0] }, { element: ['eq', 1] } }] }; 

और अब जादू दृश्य वस्तु का वर्णन है।

• समय ही आवश्यक संपत्ति है। दो या तीन तत्वों की एक सरणी। पहला तत्व मिलीसेकंड में इस दृश्य का प्रारंभ समय है, जिसे स्क्रिप्ट की शुरुआत से गिना जाता है, अर्थात्। पल से आप $ .scenario () फ़ंक्शन को कॉल करते हैं। दूसरा अंतिम समय है, उसी घटना से संबंधित। पूरे परिदृश्य की कुल अवधि दृश्य के सबसे लंबे अंत समय के बराबर है।
  तीसरा वैकल्पिक तत्व सहजता फ़ंक्शन का नाम है जो इस दृश्य के लिए उपयोग किया जाएगा। ईज़िंग को jQuery से लिया गया है, इसलिए तृतीय-पक्ष ईज़िंग फ़ंक्शन ठीक काम करना चाहिए।
• पहले - सीएसएस गुणों वाली एक वस्तु जिसे एनीमेशन शुरू होने से पहले तत्व पर लागू करने की आवश्यकता है, अर्थात्। समय पर [को ०]।
• के बाद - सीएसएस गुणों वाली एक वस्तु जिसे एनीमेशन पूरा होने के बाद तत्व पर लागू करने की आवश्यकता है, अर्थात्। समय पर [१]।
• चेतन - एक वस्तु जो एनिमेटेड सीएसएस गुणों और उनके अंतिम मूल्यों को सूचीबद्ध करती है। एनिमेटेड तत्व के वर्तमान सीएसएस गुणों को प्रारंभिक मूल्यों के रूप में लिया जाता है। अब तक, केवल संख्यात्मक मूल्यों का समर्थन किया जाता है।
• स्टार्ट - एक ऐसा फंक्शन जिसे सीन शुरू होने से पहले, प्रॉपर्टी से सीएसएस प्रॉपर्टीज को लागू करने के तुरंत बाद कहा जाएगा।
• अंत - एक फ़ंक्शन जिसे दृश्य पूरा होने के बाद बुलाया जाएगा, तुरंत संपत्ति से सीएसएस गुणों को लागू करने के बाद।
• चरण - एक फ़ंक्शन जिसे एनीमेशन के प्रत्येक चरण पर बुलाया जाएगा, जबकि वर्तमान समय समय [0] और समय [1] के बीच है।

ज्यादातर मामलों में पहले और बाद के पैरामीटर शुरू और अंत कॉलबैक फ़ंक्शन के बिना करते हैं। सामान्य सीएसएस गुणों के अलावा, आप उनमें एनिमेटेड तत्वों पर कुछ अतिरिक्त जोड़तोड़ निर्दिष्ट कर सकते हैं: फ़ंक्शन दिखाते हैं, छिपाते हैं, attr, removeAttr, addClass, removeClass, toggleClass समर्थित हैं। एक छोटा सा उदाहरण जिससे सब कुछ स्पष्ट हो जाएगा:

 scene: [{ time: [2500, 4000], before: { opacity: 0, show: '' }, animate: { opacity: 1 } after: { opacity: '' } }, { time: [5500, 6500], before: { addClass: 'rocket_wink' }, after: { removeClass: 'rocket_wink' } }] 

खैर, एक निर्वात में बादलों का गोलाकार कोड:

 { element: '.cloud', child: [{ element: ['eq', 0], time: [0, 7500, 'linear'], before: { top: -80, display: 'block', left: 300 }, animate: { top: 374 } }, { element: ['eq', 1], scene: [{ time: [2500, 5500, 'linear'], before: { top: -80, display: 'block', left: 500 }, animate: { top: 374 } }, { time: [5500, 9000, 'linear'], before: { top: -80, display: 'block', left: 150 }, animate: { top: 374 } }] }] } 

कृपया ध्यान दें कि .cloud तत्व में एनीमेशन बिल्कुल भी नहीं है, और eq (0) तत्व में दृश्य गुण नहीं है, लेकिन इसमें समय, पहले और चेतन गुण शामिल हैं - यह स्क्रिप्ट प्रविष्टि को और कम करने का एक अवसर है।

बुनियादी सिद्धांतों के लिए पर्याप्त है।

सब कुछ jQuery.animate पर क्यों नहीं करते। जीवित उदाहरण

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

जीवित उदाहरण

और यही कारण है कि jQuery.animate ऐसे कार्यों के लिए बहुत उपयुक्त नहीं है:

1. एनिमेट एनीमेशन खत्म होने के बाद पूरा फंक्शन कहता है। लेकिन वह शुरुआत से पहले कुछ नहीं कहती। इस सुविधा के कारण, आपको कतारों का उपयोग करना होगा:
   

    .delay(2500) .queue(function(next) { $(this).css({top: 82, left: 74}); next(); }) .animate({top: 85}, 1500) 

   
   
2. चेतन एक दूसरे के स्वतंत्र रूप से वर्तमान jQuery वस्तु में सभी HTML तत्वों को एनिमेट करता है। प्रत्येक तत्व के लिए, एनीमेशन के अंत के बाद, पूरा फ़ंक्शन कहा जाता है। एनीमेशन के प्रत्येक चरण पर प्रत्येक तत्व की प्रत्येक संपत्ति के लिए चरण फ़ंक्शन को कहा जाता है। यह और भी असुविधाजनक है।
   
   
3. चेतन के माध्यम से, आप बस निश्चित समय के लिए चरण फ़ंक्शन नहीं चला सकते हैं। यदि एनिमेटेड गुणों का सेट खाली है, तो चेतन तुरंत परिणाम लौटाता है। आपको एक गंदी चाल का उपयोग करना होगा: 0 से 0 तक कुछ मान को चेतन करना।
   
   
4. एनीमेशन से कई निकास बिंदु। यदि 10 अलग-अलग ऑब्जेक्ट एक ही समय में, पूरी घटना पर एनीमेशन खत्म करते हैं, तो अंतिम बैनर कोड कौन सा लगाना चाहिए? 10 दिनों के बाद इस कोड को किस घटना के लिए पूरा करें?
   परिदृश्य, इसके विपरीत, एक निकास बिंदु है; यह $ .scenario का पूरा कार्य है ()

इन समस्याओं के कारण, निम्न कोड प्राप्त होता है:

 //    ,      var $rocket_smile_fire = $rocket_smile.find('.fire'); $rocket_smile_fire //  :  ,       .eq(0) //  : marginTop   0,        .animate({marginTop: 0}, { duration: 9000, step: function(x, opt) { //    this,     $rocket_smile_fire .hide() //          .eq(((new Date() - opt.startTime) / 100) % $rocket_smile_fire.length) .show(); }, complete: function() { $rocket_smile_fire.removeAttr('style'); } }); 

यह, निश्चित रूप से, दुखद है, लेकिन आप रह सकते हैं, यदि नहीं ...

किलर फीचर परिदृश्य

कल्पना करें: आप जो एनीमेशन बनाते हैं वह 20 सेकंड तक रहता है। आप अंतिम दृश्य बनाते हैं, जो दो सेकंड तक रहता है। आखिरी सेकंड तक बैनर देखने के दौरान आपका कितना समय बर्बाद होता है? JQuery में किसी समस्या को कैसे हल करें? कोड का एक टुकड़ा बाहर टिप्पणी करें जो अधिकांश काम करता है। यह एक तथ्य नहीं है कि सभी ऑब्जेक्ट अपनी जगह पर होंगे, क्योंकि जो कोड उन्हें स्थानांतरित किया गया था, वह टिप्पणी की गई है।

परिदृश्य का समाधान - बस किस समय दृश्य शुरू करना है और किस समय समाप्त होना है, इसका संकेत दें। खैर, प्लेबैक स्पीड सेट की जा सकती है। और फ्रेम दर को ढेर करने के लिए।

समय निर्धारित करने की क्षमता के साथ उदाहरण

डिबगिंग एक खुशी है।

पटकथा के बारे में थोड़ा और

एनिमेटेड तत्व ऑब्जेक्ट का वर्णन और दृश्यों के लिए कॉलबैक फ़ंक्शन बिना विवरण के बने रहे। मैं अंतराल में भरता हूं। तत्व निम्नलिखित मूल्य ले सकते हैं:

• अनुपस्थित हो सकते हैं। इस मामले में, तत्व मूल एनिमेटेड ऑब्जेक्ट से लिया गया है। इसका उपयोग कई दृश्यों के समूह गुण के लिए किया जा सकता है:
  

   { element: '.rocket_smile', //    scene: { time: [0, 2500, 'easeInOutSine'], animate: { top: 69 } }, //     child: { //        before: { addClass: 'rocket_wink' }, after: { removeClass: 'rocket_wink' } scene: [{ time: [0, 1000] }, { time: [2000, 3000] }, { time: [4000, 5000] }] } } 

  
  
• JQuery की वस्तु । उदाहरण के लिए, $ ('# दृश्य। सेलेमेंट');
  
  
• DOM ऑब्जेक्ट उदाहरण के लिए, दस्तावेज़।
  
  
• स्ट्रिंग , सीएसएस चयनकर्ता। मूल तत्व की खोज () विधि या $ () फ़ंक्शन के लिए पारित किया गया है यदि मूल तत्व गायब है।
  
  
• सरणी। पहला तत्व मूल तत्व की विधि का नाम है: ढूँढें, eq, माता-पिता, आदि। दूसरे और बाद के तत्व इस पद्धति के लिए तर्क हैं।
  element: ['eq', 0] $parent.eq(0) बराबर है। $parent.eq(0) ।
  यदि पहला तत्व गलत है, तो मूल तत्व को नजरअंदाज कर दिया जाता है और $ () फ़ंक्शन के लिए तर्क पारित किए जाते हैं।
  element: [false, 'input[name="name"]'] $('input[name="name"]') बराबर है।
  
  
• वह फ़ंक्शन जो आइटम लौटाता है। फ़ंक्शन के मापदंडों के माध्यम से, मूल तत्व पारित किया जाता है।

प्रारंभ, अंत और चरण कॉलबैक फ़ंक्शन पाए गए तत्व के संदर्भ में निष्पादित किए जाते हैं। तीनों का पहला तर्क स्क्रिप्ट की शुरुआत से बीता हुआ समय है। अंतिम - एनीमेशन ऑब्जेक्ट द्वारा विस्तारित वर्तमान दृश्य की वस्तु:

 { element: '.rocket_smile', button: $('#start-button'), scene: { time: [0, 2500], fadeDuration: 400, start: function(time, scene) { // scene.fadeDuration     // scene.button     scene.button.fadeOut(scene.fadeDuration); }, animate: { top: 69 } }, } 

इन दो मापदंडों के अतिरिक्त, चरण कॉलबैक फ़ंक्शन, वर्तमान एनीमेशन चरण के बारे में विस्तृत जानकारी के साथ एक और पैरामीटर स्वीकार करता है:
- समय , स्क्रिप्ट की शुरुआत से समय;
- पारित , दृश्य की शुरुआत से समय;
- प्रगति , दृश्य की शुरुआत से समय, अंतराल के लिए सामान्यीकृत 0..1;
- स्थिति , यह आइसिंग फ़ंक्शन को लागू करने के बाद प्रगति है।

 { element: '.rocket_atack', scene: { before: { top: 20 }, //  ,    step lastTop: 300, step: function(time, opt, scene) { //    var startTop = scene.before.top; //     var changeTop = scene.lastTop - startTop; // this —   this.css({top: startTop + changeTop * opt.position}); } } } 

जीथब परिदृश्य कोड

भविष्य की योजना

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

   var scene = { before: { top: '20%' }, animate: { top: '40%', left: '+=200px' } } 

  
  
• वेब से टाइमलाइन, लेयर्स, फिल्टर और पुश के साथ विजुअल एडिटर विकसित करें।
  

कई समझ में नहीं आया कि दृश्य संपादक के बारे में एक मजाक है। मैं सादे पाठ में लिख रहा हूं - यह एक मजाक है।