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

我有一个非常基本的应用程序，让你创建形状并用一条线连接它们。要做到这一点，您需要执行以下操作

Example

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

可以四处移动形状、拖动形状并调整其大小。我想知道是否有可能在两个对象之间添加动画。例如，一个小圆球将在两个对象之间的直线上设置动画。我已经在fabric js中查看了动画页面上的演示，但不确定是否可以从对象b执行

---

以下是。

我不知道您是否可以在fabric中使用内置动画功能，因为正如您所说，这些对象可能会在自身周围移动。但是，您可以使用一点数学知识手动制作类似的内容：

你可以把它当作在0和1之间振荡的波来处理。此函数的正确公式为：

• 当“角度”为0或2π的倍数时，振幅为0，因此球位于object1的中心
• 当“角度”是π的倍数时，振幅为1，球位于物体2的中心
• 当振幅为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);
};

---

这里有它。

所以基本上说，在我创建了父图形和子图形之后。我想知道是否有可能创建一个动画功能，我们会告诉我们选择父和子。例如，你可以在画布上有许多父-子对象，当你点击“创建动画”时，你可以指定你想要添加动画的父-子对象。你发布的内容与我想要的非常接近。我会玩一玩，确保它的安全i@user1010101我不确定我是否理解你的问题。您是否在询问一次是否可以有多个动画？答案是肯定的，你可以想要多少就有多少：嗨，对不起，我的意思是我们可以添加一个名为animation的新函数，该函数将parent id和child作为参数，并在它们之间创建动画。所以从用户的角度来看，我们基本上会创建一个矩形，然后添加另一个形状，比如说圆作为它的子对象。然后，我们将单击一个名为“添加动画”的按钮，然后选择要设置动画的两个对象。之后，动画将发生。如果这还不清楚，请告诉我。是的，这是可能的。然而，这是一个完全不同的问题。