एक jQuery एनीमेशन को पीछे और आगे स्क्रॉल करना

Question

मैं एक फुटसल (इनडोर सॉकर) कोचिंग एप्लिकेशन बना रहा हूं जो एक कोच को स्क्रीन पर खिलाड़ियों को जोड़ने की अनुमति देता है, अपनी गति दिशा निर्धारित करता है (एचटीएमएल 5 कैनवास का उपयोग करके तीरों को खींचकर), और फिर 'play' दबाएं 'स्क्रीन पर सभी खिलाड़ियों को स्थानांतरित करने के लिए। एक खिलाड़ी एक खिलाड़ी की पृष्ठभूमि छवि के साथ एक div से बना है।

एनीमेशन jquery .animate() फ़ंक्शन का उपयोग करके किया जा रहा है।

मैं जो करता हूं वह खिलाड़ी div'sleft और top सीएसएस स्थिति विशेषताओं को बदलता है।

मैं यह कैसे किया जा सकता है पर दो बातें और अनिश्चित करना चाहते हैं:

1. मैं एक jQuery स्लाइडर बना सकते हैं और यह incremently के लिए कदम के रूप में एनीमेशन जगह लेता है करना चाहते हैं। मुझे लगता है कि मैं इसे शुरू करने से पहले एनीमेशन की कुल लंबाई की गणना करके ऐसा करूँगा?

2. मैं jQuery स्लाइडर को पीछे और आगे ऊपर ले जाना चाहता हूं - एनिमेटियन को उलटाने के लिए और आवश्यकता होने पर इसे रोकें। यह सब संभव है कि हम एनीमेशन के लिए divs को ले जा रहे हैं, और फ्रेम-दर-फ्रेम अनुक्रम एनीमेशन नहीं कर रहे हैं।

Answer 1

एनीमेशन शुरू होने से पहले पर काम कर रहे हैं कैसे के बारे में प्रारंभिक स्थिति की बचत की तरह लगता है?

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which 
$(playerdiv).data("startTop",startposition.top); 
$(playerdiv).data("startLeft",startposition.left); 

बाद में आप

left = $(playerdiv).data("startTop") 

का उपयोग कर इसे प्राप्त कर सकते हैं आदि

आप चरण विकल्प का उपयोग करके एनिमेशन को कॉलबैक प्रदान कर सकते हैं, इस प्रकार आप तदनुसार अपने स्लाइडर को अपडेट कर सकते हैं।

$(playerdiv).animate({ 
    top : targetTop, 
    left : targetLeft, 
    step, function(){ magic happens here 
}) 

Answer 2

मैं इसे इस तरह से करना होगा:

1. उपयोगकर्ता क्लिक करता है "चलाएं", अपने गंतव्य के लिए अपने मौजूदा स्थिति से divs एनिमेट शुरू करते हैं। आप आसानी से शेष स्लाइडर की स्थिति पर निर्भर करता है समय और divs स्थिति की गणना कर सकते हैं:

   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
   • प्रारंभ करना डिवीलेफ्ट = प्रारंभिक डिवीलेफ्ट + (अंतिम डिवीलेफ्ट - प्रारंभिक डिवीलेफ्ट) * स्लाइडरपॉशन;
   • प्रारंभ समय = कुल अवधि * स्लाइडरपॉशन;

   (या कि, की तरह कुछ जहां sliderPosition 0 और 1 के बीच कुछ है)

2. उपयोगकर्ता स्लाइडर पर फिर से क्लिक करता है, सभी divs पर .stop() विधि कहते हैं: इस तरह से वे करेंगे एनिमेट करना बंद करें और आप उन्हें स्थिर रूप से सेट करने में सक्षम होंगे: divs की स्थिति की गणना करें और उस बिंदु पर स्थिर रूप से उन्हें स्थानांतरित करें।

3. यदि उपयोगकर्ता स्लाइडर "ड्रॉप" करता है और "प्ले" अभी भी सक्रिय होता है, तो एनीमेशन को स्लाइडर को छोड़ने के बिंदु से आगे जारी रखना चाहिए।

एक अच्छा प्रोजेक्ट को आप :)