HyphotesisRaphael.js
में मैं एक रास्ते पर कुछ हलकों है कस्टम एनिमेशन (आकृति में आकार प्रारंभ देखें) और वे एक और पथ (चित्र में अंत आकार) को चेतन करने की जरूरत है।
एनीमेशन करना चाहिए कई कार्यों के होते हैं:
- सभी सर्कल त्रिज्या
आंकड़ा कमी - पथ
बदल - नई स्थिति
करने के लिए पूरे आकार स्थानांतरित
समस्या
Raphael.js एच जानता है मूल निर्देशांक से मंडलियों को अंतिम रूप में त्रिज्या को बदलने के लिए ओउ को एनिमेट करने के लिए। चूंकि एनीमेशन मूल और अंतिम वाले समान पथ पर नहीं चलता है, इसलिए एनीमेशन बहुत अच्छा नहीं दिखता है। मंडल x1, y1 से x2, y2 से सीधे रेखा में जाते हैं।
मैं क्या करने की कोशिश की
सीधी-सपाट एनीमेशन कर, शुरू से ही समाप्त करने के लिए हलकों चलती, त्रिज्या बदल रहा है। जैसे मैंने कहा, यह ठीक नहीं है।
अंतराल में प्रत्येक सर्कल को स्थानांतरित करना, प्रत्येक पुनरावृत्ति पर नए पथ की गणना करना और मंडलियों की स्थिति की गणना करना। यह बहुत धीमी गति से चलता है।
Element.getPointAtLength() के साथ प्रत्येक पुनरावृत्ति पर अस्थायी सर्कल स्थिति की गणना करना। यह भी बहुत धीमी है।
कुछ मध्यस्थ पथों को सरणी में हार्डकोड किया गया है और प्रत्येक के माध्यम से एनीमेशन चला रहा है। यह गति के मामले में बेहतर है लेकिन झटकेदार
तो, कोई विचार?
मैं भी इस प्रश्न का उत्तर की तरह ... मैं शिक्षण के लिए एक घड़ी बना रहा हूं थे, जहां मैं की जरूरत है आर्क लाइन के साथ आसानी से एनिमेट करने के लिए एक चाप। आपके मामले में, हालांकि, यह सीधे नए बिंदु पर कूदता है: http://jsfiddle.net/zFXCb/10/ अगर मुझे कोई समाधान मिल जाए तो मैं एक उत्तर पोस्ट करूंगा। –