Question

我正在使用FabricJs它是一个javascript画布库，可以创建一个小应用程序，您可以在其中创建不同对象之间的形状和动画。

运行它您可以按照以下步骤操作。

1. 点击新动画
1. 单击矩形
1. 单击“添加子项”按钮（这允许您链接对象）
1. 单击圆形或矩形

如果您按照上述步骤操作，您将看到可以在两个形状和动画之间创建两个形状和动画，并通过一个小圆圈来回显示。

我想知道是否可以创建类似的动画，从左到右或从右到左只进行一次。如果有人能指导我，我真的很感激。

这是我的FIDDLE

以下是动画的代码

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

Answer 1

您可以尝试使用内置动画的面料：

http://jsfiddle.net/asturur/s6ju2858/2/

我没有复制你的循环函数，这需要额外的工作，但fabricJS让你能够为一个属性（在我们的例子中为left和top）定义一个带有开始和结束值的动画。

{{1}}

在动画结束时更新了球的移除方法。

使用画布创建方向动画

1 个答案: