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

Raphael element.animate(...) - Specify a callback to be executed at every step of animation

本文关键字：动画 每一步 回调 执行 animate element Raphael      更新时间：2023-09-26

使用拉斐尔，我必须移动一些连接一些线（边）的圆（节点）。当我更改圆的 （cx，cy） 属性时，我必须刷新连接到该圆的线（使用刷新函数）。

没有动画，一切都很好

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

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

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

。圆开始移动并在 1000 毫秒内到达最终位置。但在动画过程中，连接到该圆的线（边）不会移动，因为未调用刷新功能。

所以问题是：有一种方法可以指定 .animate（） 一种 Raphael 将在动画的每一步调用的"步骤"回调？

我知道使用 jQuery 可以将该步骤回调指定为 .animate（）...我希望拉斐尔也能做到这一点:)

谢谢！！

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

再见！！

我是

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');
    });
});

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

相关文章：