使用Raphael.js在图形中移动节点的动画

Question

在这个demo中，形状代表节点，连接代表边缘。您可以拖放形状。在mousemove事件期间，将调用以下代码，该代码将重绘形状及其连接：

move = function (dx, dy) {
        var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
        this.attr(att);
        for (var i = connections.length; i--;) {
            r.connection(connections[i]);
        }
        r.safari();
    }

我想创建一个用于移动形状的动画。虽然形状正在移动，但它的传入连接也应该重新绘制。以下代码动画移动形状：

shapes[0].animate({transform: "t100,100"}, 1000, 'bounce');

但是我不知道在这个动画中如何重绘连接。我知道Raphael库中的animateWith函数，但我不确定我应该如何在这里使用它。 提前感谢您提供的任何帮助。

Answer 1

我会设置一个数据属性，用于存储图形上的当前位置，另一个属性用于跟踪它的关联连接。然后，当进行更改时，我将监听前夕事件的位置数据，然后使用事件处理动画（您将能够获得关联的连接并为它们创建必要的动画）。