मैं fc.tape जावास्क्रिप्ट लाइब्रेरी को
हैबरोसिटी के साथ साझा करना चाहता
हूं । इसका उद्देश्य एक स्प्राइट के एनीमेशन को नियंत्रित करना है, जो फ़्रेम से चिपके हुए हैं।
डेमोFc.tape का उपयोग करने के लिए आपको
jQuery (1.6+),
jQuery UI (1.8+), कोर और विजेट घटकों की आवश्यकता होगी।
आप
ImageMagick पैकेज में शामिल कन्वर्ट उपयोगिता के साथ व्यक्तिगत छवि फ़ाइलों से एक स्प्राइट बना सकते हैं:
$ convert img_* -append sprite.png
चेतावनी:
एपीआई संस्करण 0.2 में थोड़ा बदलाव हुआ है, वर्तमान संस्करण ।सेटिंग्स
धीरे -
धीरे - फ़्रेम के चिकनी स्विचिंग को सक्षम करें, डिफ़ॉल्ट रूप से सक्षम।
छवि - एनीमेशन स्प्राइट के साथ पृष्ठभूमि छवि का पथ, डिफ़ॉल्ट रूप से - तत्व की पृष्ठभूमि छवि।
फ्रेमकाउंट - एनिमेशन में फ्रेम की संख्या।
फ़्रेमहाइट - एक फ्रेम की ऊंचाई, डिफ़ॉल्ट रूप से - तत्व की ऊंचाई।
FrameChangeDuration - मिलीसेकंड में फ़्रेम के बीच स्विच करने की अवधि।
backgroundX - एनीमेशन के साथ स्प्राइट की क्षैतिज ऑफसेट। इसका उपयोग किया जाता है यदि कई स्प्राइट एक छवि में समाहित हैं।
प्रीलोड - एनीमेशन शुरू करें जब स्प्राइट के साथ फाइल लोड हो जाए, डिफ़ॉल्ट रूप से सक्षम हो।
ये सेटिंग्स उदाहरण के लिए या डेटा विशेषताओं के माध्यम से निर्दिष्ट की जा सकती हैं:
<div id=”tape” data-frame-count="20" data-frame-height="150"></div>
एपीआई
निम्न स्तर की एपीआई
WindToNext - अगले फ्रेम पर वापस जाएं
$('#tape').tape('windToNext');
WindToPrev - पिछले फ्रेम पर वापस जाएं
$('#tape').tape('windToPrev');
दोनों विधियां एनीमेशन के आकार को ध्यान में रखती हैं और सीमा से बाहर जाने पर सीमा को बंद कर देती है, अर्थात, विंडटॉक्स्ट अंतिम फ्रेम पर पहला दिखाएगा, और विंडटॉरेव पहले फ्रेम पर - अंतिम।
setPosition - किसी भी एनिमेशन के बिना स्प्राइट की स्थिति निर्धारित करें।
$('#tape').tape('setPosition', 14);
setOptions - मक्खी पर सेटिंग्स बदलें:
$('#tape').tape('setOptions', { frameCount: 37 frameChangeDuration: 70 });
getOption - वर्तमान सेटिंग का मूल्य प्राप्त करें:
var height = $('#tape').tape('getOption', 'frameHeight');
मध्यम स्तर का एपीआई
windTo - किसी दिए गए फ्रेम पर वापस जाएं। लक्ष्य फ़्रेम दो तरीकों से इंगित किया गया है - संपूर्ण एनीमेशन के पूर्ण और सापेक्ष:
$('#tape').tape('windTo', 12); $('#tape').tape('windTo', 0.6, true);
stepInTo - बदले में सभी मध्यवर्ती लोगों को दिखाते हुए, किसी दिए गए फ्रेम पर वापस जाएं। वर्तमान फ्रेम और लक्ष्य के आधार पर, यह एनीमेशन को आगे और पीछे दोनों तरफ मोड़ सकता है। लक्ष्य फ्रेम संख्या की पूर्ण और सापेक्ष सेटिंग का भी समर्थन करता है:
$('#tape').tape('stepInTo', 36, false, function(){ console.log('Animation is finished'); });
उच्च स्तरीय एपीआई
घुमाएँ - माउस को बाएँ बटन से दबाते हुए स्प्राइट को घुमाएँ। इस व्यवहार का उपयोग किया जा सकता है, उदाहरण के लिए, सामानों को प्रदर्शित करने के लिए ऑनलाइन स्टोर में। डिफ़ॉल्ट रूप से, मरोड़ के लिए सक्रिय क्षेत्र स्वयं स्प्राइट तत्व है, लेकिन आप एक विकल्प निर्दिष्ट कर सकते हैं। मरोड़ की दिशा और इसकी गति भी उपलब्ध हैं:
$('#tape').tape('rotate', { element: $('#handler'), deltaX: 3, direction: -1 });
आप विजेट
पृष्ठ पर, हमारी
वेबसाइट पर या हमारे
कार्यों पर विजेट का काम देख सकते हैं।
प्रोजेक्ट पेज github पर ।
भविष्य की योजनाओं में:
- एपीआई सुधार
- बॉक्स में अतिरिक्त व्यवहार (उच्च स्तरीय एपीआई) जोड़ना,
- jQuery यूआई निर्भरता की अस्वीकृति।