如何使用Raphael .animateWith（）

Raphael有沒有人使用.animateWith()成功保持快速動畫同步？它記錄不完整。圖書館的創建者有一個video demonstration，但沒有我能找到的代碼。如何使用Raphael .animateWith（）

我有一個Javascript節拍器，由一條線（節拍器的臂）和梯形「重量」組成，最終會上下移動以表示節奏。我有一個工作小提琴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（）阻止的。也許我錯誤地使用了它。

如果您查看.animateWith（）函數的Raphael source，您會看到它會同步每個動畫的.start參數FWIW。

來源

2013-04-08 Chris Wilson

從Raphael documentation：

參數：

元件 - [對象]元件與

阿尼姆同步 - [對象]動畫與
同步
動畫 - [對象]動畫對象，見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/

僅供參考，我搬到外面的回調函數，而不是使用匿名函數。

來源

2013-04-16 18:02:58 sweetamylase

謝謝你的樣子。恐怕Chrome仍然會在高時段出現一些相當重大的錯位 - 每分鐘嘗試280次。這些文檔對我來說毫無意義。該函數的來源似乎與某些動畫數組中的動畫的「開始」屬性相匹配。也許它只是不起作用？ – 2013-04-18 03:12:42

來源：https：//github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L4123 – 2013-04-18 03:13:12

@ChrisWilson爲我工作順利。也使用Chrome。我的機器是3.2Ghz英特爾i5與8GB內存運行在OSX 10.8.3 – sweetamylase 2013-04-18 19:18:36

如何使用Raphael .animateWith（）

回答

相關問題