मैंने हाल ही में लिखा है कि फ्लैश पर स्क्रिप्ट एनीमेशन के लिए एक महान पुस्तकालय ग्रीन्सॉक, अब जावास्क्रिप्ट का भी समर्थन करता है । इस लेख में, मैं GSAP v12 (बीटा) के साथ काम करने की मूल बातें प्रदर्शित करूंगा। परिणाम कुछ इस तरह होगा:


मैं तुरंत एक आरक्षण कर दूंगा कि मैंने $ fx () के प्रलेखन से एक उदाहरण के लिए ग्राफिक्स और विचार लिया, क्योंकि हम में से एक मना कर देगा एक UFO चेतन करने के लिए? :)

स्क्रिप्ट

सबसे पहले, आवश्यक स्क्रिप्ट कनेक्ट करें:

< script type ="text/javascript" src ="js/jquery.min.js" ></ script ><br>< script type ="text/javascript" src ="js/TweenMax.min.js" ></ script ><br>< script type ="text/javascript" src ="js/TimelineMax.min.js" ></ script ><br>< script type ="text/javascript" src ="js/easing/EasePack.min.js" ></ script ><br>< script type ="text/javascript" src ="js/plugins/CSSPlugin.min.js" ></ script >

इतना क्यों?

• तत्वों का चयन करने के लिए हमें jQuery की आवश्यकता है। आप निश्चित रूप से, इसके बिना कर सकते हैं।
• TweenMax (60 Kb) मुख्य एनीमेशन लाइब्रेरी है। TweenLite (21 Kb) भी है, जिसमें केवल बुनियादी सुविधाएँ शामिल हैं।
• टाइमलाइनमैक्स (16 Kb) एक समय पर आधारित पुस्तकालय है। टाइमलाइन लाइट का वजन 9 Kb है।
• EasePack (5 Kb) एनीमेशन प्रभावों का एक सेट है जो इसकी प्रकृति को नियंत्रित करता है, उदाहरण के लिए, चिकनी मंदी या "लोचदार" कंपकंपी।
• CSSPlugin (14 Kb) - आपको HTML ऑब्जेक्ट्स के सीएसएस गुणों को एक समय में या कक्षाओं के पूरे बंडलों में बदलने की अनुमति देता है।

एनीमेशन

हम चेतन करना शुरू कर सकते हैं। मूल वाक्यविन्यास है:

• TweenMax। से (ऑब्जेक्ट, अवधि, मूल्य) - दिए गए मूल्य से वर्तमान तक
• TweenMax। , (ऑब्जेक्ट, अवधि, मूल्य) - वर्तमान मूल्य से निर्दिष्ट तक
• TweenMax। fromTo (ऑब्जेक्ट, अवधि, मान 1, मान 2 ) - दिए गए मूल्य से दिए गए एक तक (गलती न करने के लिए :)

एक वस्तु किसी भी DOM तत्व हो सकती है। सबसे आसान तरीका है कि इसे एक jQuery चयनकर्ता के माध्यम से प्राप्त करें। समय सेकंड में इंगित किया गया है। मान को ऑब्जेक्ट के रूप में निर्दिष्ट किया जाता है, उदाहरण के लिए {value: 500} या {width: 300}। सुविधाजनक सुविधा: यदि आप मूल्य उद्धृत करते हैं, तो परिवर्तन सापेक्ष होगा, निरपेक्ष नहीं। नेत्रहीन:

TweenMax.to( $( '#sample' ), 1, {value: 300} ); // 1 300 <br>TweenMax.to( $( '#sample' ), 1, {value: '300' } ); // 1 300

डेमो 1 में दोनों विकल्पों की तुलना करें

सीएसएस गुणों को एनिमेटेड करना थोड़ा अधिक जटिल है (मुख्य बात ब्रेसिज़ में भ्रमित नहीं होना है):

TweenMax.to( $( '#bg1' ), 2, {css: {background-position: '-300px' }} );

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

इसके अतिरिक्त, आप एनीमेशन की पुनरावृत्ति की संख्या निर्दिष्ट कर सकते हैं (-1 का अर्थ दोहराव):

TweenMax.to($( '#bg1' ), 2, {css: {background-position: '-300px' }}, repeat: -1)

डिफ़ॉल्ट रूप से, सभी एनिमेशन अंत में एक अच्छी मंदी के साथ होते हैं। यदि कोई अन्य प्रभाव (या कोई भी) आवश्यक नहीं है, तो यह स्पष्ट रूप से निर्दिष्ट किया जाना चाहिए:

TweenMax.to($( '#ufo' ), 2, {width: 300}, ease: Linear.easeNone)

हम अपने ज्ञान का उपयोग करेंगे और लाठी और लंबन के साथ एक अंतहीन एनिमेटेड पृष्ठभूमि बनाएंगे:

TweenMax.to($( '#bg1' ), 9, {css:{backgroundPosition: "-314 0px" }, repeat:-1, ease:Linear.easeNone});<br>TweenMax.to($( '#bg2' ), 18, {css:{backgroundPosition: "-269 30px" }, repeat:-1, ease:Linear.easeNone});

डेमो 2 देखें

स्प्राइट

स्प्राइट एनीमेशन का उपयोग करते हुए, UFO पर साइड लाइट चालू करें। हमारे स्प्राइट में 4 फ्रेम होते हैं:


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

TweenMax.to($( '#ufo' ), 0.2, {css:{backgroundPosition : "340 0px" }, ease:SteppedEase.config(4), repeat:-1});

डेमो 3 देखें

समय

मैं शायद इस बारे में बात करूंगा कि एनिमेशन को जंजीरों में कैसे जोड़ा जाए और लेख के दूसरे भाग में परिणामी अनुक्रमों को प्रबंधित किया जाए, लेकिन अब मैं उन लोगों के सवालों का जवाब देने की कोशिश करूंगा।

* सभी कोड उदाहरणों को सोर्स कोड हाइलाइटर का उपयोग करके हाइलाइट किया जाता है ।