राफेल

Question

के साथ पथ के साथ एसवीजी एनीमेशन मेरे पास एसवीजी एनीमेशन के साथ एक दिलचस्प मुद्दा है।

मैं एक वृत्ताकार मार्ग राफेल

obj = canvas.circle(x, y, size); 
path = canvas.circlePath(x, y, radius);     
path = canvas.path(path); //generate path from path value string 
obj.animateAlong(path, rate, false); 

circlePath विधि एक मैं अपने आप को बनाया है एसवीजी पथ अंकन में चक्र पथ उत्पन्न करने के लिए है का उपयोग कर के साथ एनिमेट कर रहा हूँ: अब तक

Raphael.fn.circlePath = function(x , y, r) {  
    var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z"; 
    return s; 
} 

, इसलिए अच्छा - सब कुछ काम करता है। मेरे पास गोलाकार पथ के साथ एनिमेटिंग मेरा ऑब्जेक्ट (ओबीजे) है।

लेकिन:

एनीमेशन तभी काम करता है मैं एक ही एक्स पर वस्तु बनाने, पथ खुद के रूप में वाई coords।

यदि मैं किसी भी अन्य निर्देशांक से (एनीमेशन, पथ के साथ आधे रास्ते) से एनीमेशन शुरू करता हूं, तो ऑब्जेक्ट सही त्रिज्या के एक चक्र में एनिमेट करता है, हालांकि यह ऑब्जेक्ट एक्स, वाई निर्देशांक से एनीमेशन शुरू करता है जिस तरह से यह दृष्टि से प्रदर्शित होता है।

आदर्श रूप में मैं एनीमेशन को रोकने/शुरू करने में सक्षम होना चाहता हूं - वही समस्या पुनरारंभ करने पर होती है। जब मैं रुकता हूं तो एनीमेशन को पुनरारंभ करें, यह बंद एक्स, वाई से शुरू होने वाले सर्कल में एनिमेट करता है। http://infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

क्लिक करें "शुरू" एनीमेशन शुरू करने के लिए:

अद्यतन

मैं एक पेज कि इस मुद्दे को दर्शाता बनाया। जब आप एनीमेशन को रोकते हैं और फिर से शुरू करते हैं, तो यह वर्तमान आयामों से सही आयामों के चक्र में जारी रहता है।

Answer 1

समस्या यह है कि राफेल को यह जानने का कोई तरीका नहीं है कि सर्कल पथ के साथ पहले से ही भाग-मार्ग है। "स्टार्ट" फ़ंक्शन का मतलब है - एनीमेशन शुरू करें। अगर यह कुछ और किया तो यह टूट जाएगा।

उस ने कहा, आपका उपयोग केस मान्य है, और किसी अन्य फ़ंक्शन की गारंटी दे सकता है - किसी प्रकार का 'रोक'। बेशक, इसे ट्रंक में लाने से आप अधिक इंतजार करना चाहते हैं।

Raphael source code से, यहां 'स्टॉप' कहने पर क्या होता है।

Element[proto].stop = function() { 
    animationElements[this.id] && animationElements[length]--; 
    delete animationElements[this.id]; 
    return this; 
}; 

यह एनिमेशन की कुल संख्या में कमी करता है, और सूची से उस एनीमेशन को हटा देता है। यहां 'पॉज़' फ़ंक्शन जैसा दिख सकता है:

Element[proto].pause = function() { 
    animationElements[this.id] && animationElements[length]--; 
    this._paused_anim = animationElements[this.id]; 
    delete animationElements[this.id]; 
    return this; 
}; 

यह बाद में फिर से शुरू होने वाला एनीमेशन सहेजता है। तो

Element[proto].unpause = function() { 
    this._paused_anim && (animationElements[this.id]=this._paused_anim); 
    ++animationElements[length] == 1 && animation(); 
    return this; 
}; 

विरामित नहीं होगा। स्कोपिंग स्थितियों को देखते हुए, इन दो कार्यों को राफेल स्रोत कोड में सही इंजेक्शन देने की आवश्यकता हो सकती है (यह मूल हैकिंग है, मुझे पता है लेकिन कभी-कभी कोई विकल्प नहीं होता है)। मैं इसे ऊपर दिखाए गए "स्टॉप" फ़ंक्शन के ठीक नीचे रखूंगा।

कोशिश करें, और मुझे बताएं कि यह कैसा चल रहा है।

==== संपादित करें ====

ठीक है, तो यह है कि आप को संशोधित करने के "शुरू" animationElements [this.id] की विशेषता ... की तरह कुछ होगा दिखता है:

this._pause_time = (+new Date) - animationElements[this.id].start; 

ठहराव में

, और फिर

animationElements[this.id].start = (+new Date) - this._pause_time; 

फिर से शुरू पर

।

http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js#L3064