राफेल का उपयोग कैसे करें .animateWith()

Question

क्या किसी ने राफेल में .animateWith() का उपयोग किया है ताकि सफलतापूर्वक सिंक में तेज़ एनिमेशन बनाए रखा जा सके? यह खराब दस्तावेज है। लाइब्रेरी के निर्माता के पास video demonstration है लेकिन मुझे कोई कोड नहीं मिल सकता है।

मेरे पास एक जावास्क्रिप्ट मेट्रोनोम है जिसमें एक रेखा (मेट्रोनोम की भुजा) और एक ट्रैपेज़ॉयडल आकार "वजन" होता है जो अंततः टेम्पो को इंगित करने के लिए ऊपर और नीचे चला जाएगा। मैं एक काम बेला here है, और प्रश्न में पंक्तियां हैं:

 var ticktock = Raphael.animation({ 
      "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}, 
      "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }} 
     }, interval).repeat(repeats/2); 
     arm.animate(ticktock); 
     weight.animateWith(arm, ticktock, ticktock);  

आप बेला की जाँच और यह एक उच्च गति और लगभग 20 टिक दे, तो आप हाथ पीछे वजन अंतराल देखना चाहिए। (कृपया इसे कुछ बार आज़माएं - मर्फी का कानून इत्यादि) मैंने सोचा कि यह ठीक से क्या था() को रोक दिया गया था। शायद मैं इसे गलत तरीके से उपयोग कर रहा हूं।

यदि आप .animateWith() फ़ंक्शन के लिए Raphael source देखते हैं, तो आप इसे प्रत्येक एनीमेशन, FWIW के .start param को सिंक करते हैं।

Answer 1

Raphael documentation से

:

पैरामीटर:

तत्व - [वस्तु] तत्व के साथ

anim सिंक करने के लिए - [वस्तु] एनीमेशन

के साथ सिंक करने

एनीमेशन - [वस्तु] एनीमेशन वस्तु, Raphael.animation देख

तो मुझे लगता है अपने कोड सिर्फ .animateWith() के लिए दूसरा पैरामीटर में एनीमेशन अलग और पारित करने के लिए है कि जरूरत है:

एनीमेशन भाग बस जाता है:

{ 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
} 

तो तुम यह कर सकते हैं:

var animationDone = function() { 
    tick(this, repeats, done); 
}; 

var ticktockAnimationParam = { 
    "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: animationDone }, 
    "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: animationDone } 
}; 
var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats/2); 
arm.animate(ticktock); 
weight.animateWith(arm, ticktockAnimationParam, ticktock);  

बेला देखें: http://jsfiddle.net/wDwsW/7/

FYI करें, मैं कॉलबैक फ़ंक्शन के बाहर ले जाया गया, बजाय गुमनाम कार्यों का उपयोग करने का।