yaTouchSlider - स्पर्श उपकरणों के लिए स्लाइडर

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

हमने एक jQuery प्लगइन बनाया है जो स्लाइडर को एक देशी की तरह दिखने में मदद करता है, और हम इसे हर किसी के साथ साझा करना चाहते हैं। आप प्लगइन के काम को देख सकते हैं, उदाहरण के लिए, iPhone या iPod टच के लिए नए खोज परिणाम पृष्ठ में मौसम या चित्रों में।

नियमित CSS3 ट्रांसफ़ॉर्म के विपरीत, "3D" iOS में हार्डवेयर GPU त्वरण का उपयोग करता है। यह आपको एक बहुत ही चिकनी और सुखद एनीमेशन प्राप्त करने की अनुमति देता है। एनीमेशन के हार्डवेयर त्वरण का विषय अपने आप में काफी व्यापक है, भविष्य में इस विषय पर एक अलग लेख होगा।

स्लाइडर को मूल महसूस करने के लिए, हमने कई विवरणों को ध्यान में रखा:

• यदि स्वाइप जेस्चर लंबा है, तुरंत कई बिंदुओं से, तो स्लाइडर इसे समझ जाएगा;
• यदि आप एक से कम कदम स्वाइप करते हैं, जबकि निर्दिष्ट सीमा (डिफ़ॉल्ट रूप से 30 पिक्सेल) को पार नहीं करने पर, स्लाइडर "स्प्रिंग" वापस आ जाएगा;
• जब बाईं या दाईं सीमा से आगे स्वाइप करने का प्रयास करेंगे तो स्लाइडर भी वापस आ जाएगा।

इशारा निर्भरता

स्लाइडर के लिए अधिक जीवंत व्यवहार करने और इशारे से अपेक्षाओं को पूरा करने के लिए, हमने उसे त्वरण को समझने के लिए सिखाया। इसकी गणना निम्न सूत्र द्वारा की जाती है (प्रयोगात्मक रूप से इसके लिए स्थितियां और मूल्य):

accel = speed > 0.3 && speed < 0.6 ? 2 :
speed >= 0.6 && speed < 1 ? 3 :
speed >= 1 ? 4 :
1;

जहां गति अपने समय से विभाजित स्वाइप जेस्चर की शुरुआत से अंत तक की दूरी है (स्कूल ज्ञान "v = s / t" आखिरकार उपयोगी था :)

औसत स्वाइप इशारा लगभग 0.4-0.6 पिक्सल प्रति मिलीसेकंड का है। सीएसएस संक्रमण एनीमेशन समय में एक बहुत छोटा है, लेकिन अभी भी ध्यान देने योग्य भिन्नता है:

animationTime = accel >= 3 ? '0.3' : '0.2';

इसके बाद, कदम त्वरण के मूल्य से गुणा किया जाता है और एनीमेशन होता है।

बाहरी एपीआई

स्लाइडर को ब्लॉक में संलग्न करते समय, आप कॉलबैक फ़ंक्शन निर्दिष्ट कर सकते हैं। यह सभी आवश्यक डेटा - गति, कदम, सीमा, समय और इतने पर एक अग्रेषित सेट के साथ हर स्वाइप के साथ कहा जाएगा। आप स्लाइडर को अपनी उंगली का उपयोग किए बिना भी स्लाइड को स्थानांतरित कर सकते हैं, स्लाइड slideLeft([]) या slideRight([]) को स्लाइडर ब्लॉक पर ट्रिगर कर सकते हैं।

"हमें GitHub पर कांटा"

आप Github पर प्रोजेक्ट रिपॉजिटरी में टिप्पणियों के साथ प्लगइन कोड देख या डाउनलोड कर सकते हैं।

पुनश्च: हम सभी को यैंडेक्स इंटरफ़ेस डेवलपर्स के आधिकारिक ब्लॉग में रुचि रखते हैं।