राफेल

Question

के साथ एनिमेटिंग पथ मैं अभी भी राफेल को समझने की कोशिश कर रहा हूं और कुछ मूल एनीमेशन के साथ फंस गया हूं। यहां एक नज़र डालें: http://jsfiddle.net/d7d3Z/

यह काफी आसान है: दो पथ जो जगह में एनिमेट करते हैं। हालांकि मैं चाहता हूं कि यह एक साथ शुरू करने के बजाय, एक रेखा की तरह इसे 'ड्रा' करने के लिए दिखाई दे।

मैं एनिमेशन कैसे ऑर्डर कर सकता हूं?

Answer 1

के बाद पहले एक खत्म हो गया है आप दूसरे एनीमेशन कॉल कर सकते हैं है।

window.onload = function() { 
    var c= Raphael("canvas", 200, 200); 
    var p = c.path("M140 100"); 
    var r = c.path("M190 60"); 

    p.animate({path:"M140 100 L190 60"}, 2000, function() { 
     r.animate({path:"M190 60 L 210 90"}, 2000); 
    }); 


}; 

http://jsfiddle.net/d7d3Z/1/

Answer 2

animate के लिए एक कॉलबैक का उपयोग करें: http://jsfiddle.net/pPwRP/

क्या यह आपको दे देंगे कि यह कॉलबैक निष्पादित करेंगे के बाद पहली एनीमेशन समाप्त हो गया है है।

---

क्लिक करने के लिए आलसी के लिए - यहाँ कोड

window.onload = function() { 
    var c= Raphael("canvas", 200, 200); 
    var p = c.path("M140 100"); 
    var r = c.path("M190 60"); 

    p.animate({path:"M140 100 L190 60"}, 2000, function() { 
     r.animate({path:"M190 60 L 210 90"}, 2000); 
    }); 
};