在Fabric js中的两个对象之间添加动画

我有一个非常基本的应用程序，可让您创建形状并用线连接它们。为此，您需要执行以下操作。

Example

1. Click new animation
2. add rectangle
3. add child
4. add circle

您可以移动形状、拖动形状以及调整其大小。我想知道是否可以在两个对象之间添加动画。例如，一个小圆球会在两个对象之间的线上产生动画。我已经在 Fabric js 中的动画页面上查看了演示，但不确定是否可以从对象 b 执行此操作。

这里是FIDDLE http://jsfiddle.net/xvcyzh9p/.

我不知道您是否可以使用织物中的内置动画功能，因为正如您所说，这些对象可能会自行移动。但是你可以使用一些数学知识轻松地手动制作这样的东西：

您可以将其视为在 0 和 1 之间振荡的波来实现此目的。该函数的正确公式是：

• 当“角度”为 0 或 2π 的倍数时，振幅为 0，因此球位于 object1 的中心
• 当“角度”为π的倍数时，振幅为1，球位于object2的中心
• 当振幅为0.5时，球位于两个物体之间

您可以根据时间、任何时间段或您想要的持续时间来增加角度。

var animateBallBetweenObjects = function (obj1, obj2) {

    // Add the "ball"

    var circle = new fabric.Circle({
        radius: 10,
        fill: 'blue',
        left: obj1.getCenterPoint().x,
        top: obj1.getCenterPoint().y,
        originX: 'center',
        originY: 'middle',
        selectable: false
    });

    canvas.add(circle);

    var period = 1000;
    var amplitude = 0;
    var angle = 0;
    var prevTime = Date.now();

    var loop = function () {

        // Calculate the new amplitude

        var now = Date.now();
        var elapsed = now - prevTime;
        prevTime = now;
        angle += Math.PI * (elapsed / (period * 0.5));
        amplitude = 0.5 * (Math.sin(angle - (0.5 * Math.PI)) + 1);

        // Set the new position

        var obj1Center = obj1.getCenterPoint();
        var obj2Center = obj2.getCenterPoint();

        circle.setLeft(obj1Center.x + (amplitude * (obj2Center.x - obj1Center.x)));
        circle.setTop(obj1Center.y + (amplitude * (obj2Center.y - obj1Center.y)));
        canvas.renderAll();

        requestAnimationFrame(loop);
    }

    // Animate as fast as possible

    requestAnimationFrame(loop);
};

FIDDLE http://jsfiddle.net/1b7phzuy/2/有了它在这里。