एक गतिशील स्क्रॉलिंग कार्यान्वयन के लिए कुछ अच्छे एल्गोरिदम क्या हैं? सुविधा एक कस्टम यूआई सूची पर परीक्षण किया जाएगा। जबकि मैं मोबाइल उपकरणों को लक्षित कर रहा हूं (जिनके पास यह सुविधा अंतर्निहित नहीं है), विभिन्न प्रोग्रामिंग फ़ील्ड से कोई भी एल्गोरिदम या कोड उदाहरण भी उपयुक्त हो सकता है।एनीगोरिदम किनेटिक स्क्रॉलिंग को लागू करने के लिए
मैंने हाल ही में एक को लागू किया। ये वे कदम हैं जिन्हें मैंने लिया था।
मैं शायद जल्द ही इस कोड को स्रोत खोलूंगा। आपको इसकी कितनी जल्दी आवश्यकता है?
संपादित करें: लिंक बदल दिया। क्षमा करें, गलत पृष्ठ पर थोड़ा सा इंगित करें। संपादित 2: या नहीं? वैसे भी, मूल पृष्ठ जो मैंने लिंक किया था वह वर्तमान में लिंक किए गए पृष्ठ पर पहला लिंक था।
खैर मुझे लगता है कि यह एक तरह कुछ हो जाएगा) जब वह अपने उंगली छोड़ देता है, ऑटो सूची स्क्रॉल कितनी तेजी से उपयोगकर्ता स्क्रॉल ख) की लेकिन क्या उपयोगकर्ता था की एक प्रारंभिक वेग के साथ एक कम वेग के साथ वेग मिलता है।
चूंकि यह मूल रूप से पूछा गया था, इसलिए मैंने पेस्ट्रीकिट के लिए स्रोत कोड को ध्यान से पढ़ा है, जिस फ्रेम में सेब ने जावास्क्रिप्ट में अपनी गतिशील स्क्रॉलिंग को ठीक से डुप्लिकेट किया है। कोई कण भौतिकी पाश नहीं है- स्पर्श की वेग सटीक पल पर मापा जाता है कि उंगली उठाई जाती है। उस बिंदु से आगे, स्क्रॉल एक साधारण आसान फ़ंक्शन का उपयोग करके एनिमेटेड है जो इनपुट पैरामीटर के रूप में वेग का उपयोग करता है।
मैं बस अपना मोबाइल जीयूआई ढांचे के लिए एक स्क्रोलर विजेट जोड़ा, इसलिए मैंने सोचा कि मैं अपने यहाँ समाधान का हिस्सा चाहते हैं।
चूंकि यह एक बहुत जटिल मुद्दा है, मैं इसे विभाजित करने के लिए छोटे कुछ हद तक स्वतंत्र उप-कार्य में, इस प्रकार का निर्णय लिया:
बेसिक स्क्रॉल कार्यक्षमता: इस कार्य को सरल में खींचें घटनाओं से निपटने में शामिल रास्ता, जो ड्रैग दूरी और दिशा के अनुसार सामग्री को स्क्रॉल करके है। यह कार्यान्वित करने के लिए अपेक्षाकृत सरल था, स्क्रॉल करने योग्य क्षेत्र के अंदर एक बच्चे विजेट को टैप ईवेंट को पास करने के दौरान ड्रैग ऑपरेशन बनाम कब शुरू करना है, यह जानने का एकमात्र मुश्किल पहलू था।
स्क्रॉल जड़ता: यह सबसे चुनौतीपूर्ण था।यहां विचार यह है कि जब उपयोगकर्ता पूरी तरह से बंद हो जाता है तब तक धीरे-धीरे धीमा होने के बाद स्क्रॉलिंग कुछ समय तक जारी रहनी चाहिए। इसके लिए मुझे स्क्रॉल वेग का विचार होना चाहिए। दुर्भाग्यवश, एक नमूना से वेग की गणना करना सटीक नहीं है, इसलिए जब उपयोगकर्ता स्क्रॉल कर रहा है तो मैं एक परिपत्र बफर में अंतिम एन गति घटनाओं को रिकॉर्ड करता हूं, साथ ही प्रत्येक घटना के दौरान। मैंने आईफोन पर और एचपी टचपैड पर ठीक काम करने के लिए एन = 4 पाया। जब उंगली उठाई जाती है तो मैं रिकॉर्ड गति से जड़ स्क्रॉलिंग के लिए अनुमानित प्रारंभ वेग की गणना कर सकता हूं। मैंने स्क्रॉलिंग को अच्छी तरह से मरने के लिए एक नकारात्मक त्वरण गुणांक परिभाषित किया और मानक गति सूत्रों का उपयोग किया (here देखें)। यदि स्क्रॉल स्थिति सीमा में पहुंचने पर सीमा तक पहुंच जाती है तो मैं रेंज से बाहर जाने से रोकने के लिए वेग को 0 पर रीसेट कर देता हूं (अचानक स्टॉप को संबोधित किया जाता है)।
लचीला स्क्रॉलिंग सीमा: स्क्रॉल अंत तक पहुंचने पर अचानक स्टॉप में जाने के बजाय मैं विजेट को कुछ स्क्रॉल करना चाहता था, लेकिन प्रतिरोध की पेशकश करना चाहता था। इसके लिए मैंने दोनों सिरों पर अनुमत स्क्रॉल रेंज को उस राशि से बढ़ाया जिसे मैंने विजेट आयामों के फ़ंक्शन के रूप में परिभाषित किया था। मैंने पाया है कि प्रत्येक छोर पर आधे चौड़ाई या ऊंचाई को अच्छी तरह से काम किया है। स्क्रॉलिंग को यह महसूस करने की चाल है कि यह कुछ प्रतिरोध की पेशकश कर रहा है, जब वे सीमा से बाहर हैं तो प्रदर्शित स्क्रॉल स्थितियों को समायोजित करना था। मैंने इसके लिए एक स्केलिंग प्लस प्लस एक मंदी समारोह का उपयोग किया (कुछ अच्छे आसान कार्य here हैं)।
वसंत व्यवहार: अब से वैध सीमा से पहले स्क्रॉल करना संभव है, इसलिए यदि उपयोगकर्ता इसे सीमा से बाहर छोड़ देता है तो मुझे स्क्रॉलर को वैध स्थिति में वापस लाने का एक तरीका चाहिए। यह स्क्रॉल ऑफ़सेट समायोजित करके हासिल किया जाता है जब स्क्रॉलर रेंज स्थिति से बाहर एक स्टॉप पर आता है। समायोजन समारोह जो मैंने एक अच्छा वसंत दिखने के लिए पाया है, वह वर्तमान स्थिति से दूरी को वांछित स्थिति तक स्थिरता से विभाजित करना और उस राशि से ऑफ़सेट को स्थानांतरित करना था। धीरे-धीरे धीमी गति जितनी बड़ी होगी।
स्क्रॉलबार: अंतिम स्पर्श ओवरले स्क्रॉलबार जोड़ने के लिए था, जो स्क्रॉलिंग शुरू होने पर फीका होता है और समाप्त होने पर फीका होता है।
क्या आप स्क्रॉल इनर्टिया के लिए अपना कोड साझा कर सकते हैं? धन्यवाद। – SpaceDog
क्या आपने रॉबर्ट पेननर के आसान कार्यों को देखा है?
http://www.robertpenner.com/easing/
IIRC इन एक्शन के लिए मूल रूप से थे और एक लंबे समय के लिए चारों ओर गया है।
मैंने इन्हें पहले कभी नहीं देखा है! बहुत उपयोगी। +1 –
मैं कुछ हफ्तों में इसे स्वयं लागू करने की कोशिश करूंगा। अब मैं केवल इसके बारे में सोच रहा हूं। आपकी प्रतिक्रिया के लिए धन्यवाद। यदि आप अपना समाधान स्रोत खोलने का निर्णय लेते हैं, तो यहां कुछ घोषणा करें। –
अब लंबे समय से लिंक हैं :( –