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

您是否尝试在与圈子相关的线路上使用animateWith？您可以使用它来解决您的问题。虽然我不确定你的refreshEdges（）的代码是什么，所以可能无法使用它。

Answer 2

我终于想出了这个解决方案...在假的DIV元素上使用jQuery.animate（）和伪css属性！

$("<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/

再见!!

Answer 3

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

Raphael element.animate（...） - 指定要在动画的每个步骤执行的回调

3 个答案: