Raphael element.animate（...） - 指定要在動畫的每個步驟執行的回調

使用Raphael我必須移動一些連接了一些線條（邊緣）的圓形（節點）。當我更改圓的（cx，cy）屬性時，我必須刷新連接到該圓的線條（使用刷新功能）。Raphael element.animate（...） - 指定要在動畫的每個步驟執行的回調

沒有動畫，所有的罰款現在

circle.attr({ 
    cx : newCx, 
    cy : newCy 
}) 
refreshEdges()

，如果我想使用的動畫......

circle.animate({ 
    cx : newCx, 
    cy : newCy 
},1000)

...圈開始移動並達到1000ms的最終位置。但在動畫過程中，連接到該圓的線條（邊緣）不會移動，因爲刷新功能未被調用。

所以問題是：有一種方法可以指定.animate（）Raphael將在動畫的每個步驟調用的某種「step」回調？

我知道用jQuery這一步的回調可以被指定爲.animate的參數（）......我希望有一種方式與拉斐爾做到這一點也:)

謝謝!!

來源

2012-04-17 andry.failli

爲什麼不激活相關'動畫（）'呼籲邊緣，同時？ – 2012-04-21 18:33:30

謝謝，這可能是一個好主意......但在refreshEdges（）函數中，我做了很多事情，而且我必須在動畫的每一步都做這些事情，例如，我必須移動節點標籤和其他svg元素。我認爲爲我需要修改的每個svg元素啓動動畫效率不高。 – 2012-04-22 20:33:24

你可以把它們全部放在'set'中。 – 2012-04-22 21:32:02

您是否嘗試在連接到圓的線上使用animateWith？您可能可以使用它來解決您的問題。雖然我不確定你的refreshEdges（）代碼是什麼，所以可能無法使用它。

來源

2012-04-17 17:52:54 user1322892

感謝您的回覆，但我不知道如何使用animateWith來實現我想要的功能。這個refreshEdges（）函數很簡單，我只更改所有與che circle節點連接的路徑的「path」屬性。我需要一種方法來在動畫的每個步驟中更改這些屬性... – 2012-04-21 14:45:47

我終於想出了這個解決方案...使用jQuery.animate（）假的CIV屬性的假DIV元素！

$("<div></div>") 
.css({  // set initial animation values using "animX", "animY" fake css props 
    'animX': circle.attr("cx"), 
    'animY': circle.attr("cy") 
}) 
.animate({ // set final animation values using "animX", "animY" fake css props 
    'animX': newCx, 
    'animY': newCy 
}, { 
    duration : 1000, 
    step : function(now,fx){ 
     if (fx.prop == 'animX') 
      circle.attr("cx", now) 
     if (fx.prop == 'animY') 
      circle.attr("cy", now) 
     circle.refreshEdges() 
    } 
})

如需進一步信息，特別是在階梯函數，讀

再見！

來源

2012-05-01 12:15:36

我是新來的HTML5和拉斐爾，而是設法通過反覆試驗來獲取回調的工作：

var rect = r.rect(300, 385, 30, 100, 2).attr({ 
    fill: '#000', 
    transform: t, 
    "fill-opacity": .2 
}).toFront().click(function() { 
    s.animate({ transform: t, stroke: c }, 2000, "bounce", function() { 
     //console.log('muhammad s.a.w'); 
    }); 
});

來源

2013-04-27 15:58:21

Raphael element.animate（...） - 指定要在動畫的每個步驟執行的回調

回答

相關問題