javascript - Raphael element.animate(...) - 指定在动画的每一步执行的回调

Question

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

没有动画，一切都很好

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

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

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

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

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

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

谢谢!!

Answer 1

我终于想出了这个解决方案...在具有假 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()
    }
})

有关更多信息，特别是有关步进函数的信息，请阅读 http://api.jquery.com/animate/

再见!!