2

使用 Raphael，我必须移动一些连接了一些线（边）的圆（节点）。当我更改圆的 (cx,cy) 属性时，我必须刷新连接到该圆的线（使用刷新功能）。

没有动画，一切都很好

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

现在，如果我想使用动画...

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

...圆开始移动并在 1000 毫秒内到达最终位置。但是在动画过程中，连接到那个圆圈的线（边）没有移动，因为没有调用刷新函数。

所以问题是：有一种方法可以为 .animate() 指定一种 Raphael 将在动画的每个步骤中调用的“步骤”回调？

我知道使用 jQuery 可以将步骤回调指定为 .animate() 的参数...我希望 Raphael 也有办法做到这一点:)

谢谢！！

4

3 回答 3

0

我终于想出了这个解决方案……在具有假 css 属性的假 DIV 元素上使用 jQuery.animate() ！

$("<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()
    }
})

有关更多信息，特别是关于 step 功能，请阅读http://api.jquery.com/animate/

再见！！

于 2012-05-01T12:15:36.303 回答
0

您是否尝试过在连接到圆圈的线条上使用animateWith ？您也许可以使用它来解决您的问题。虽然我不确定您的 refreshEdges() 的代码是什么，但可能无法使用它。

于 2012-04-17T17:52:54.050 回答
0

我是 HTML5 和 Raphael 的新手，但通过反复试验设法让回调工作：

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-27T15:58:21.667 回答