使用 canvas 创建定向动画

Question

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

到运行就可以按照以下步骤操作了。

1. 点击新动画
1. 单击矩形
1. 单击添加子按钮（这允许您 link 个对象）
1. 单击圆形或矩形

如果您按照上述步骤操作，您会发现您可以创建 2 个形状，并在这两个形状之间创建一个来回小圆圈显示的动画。

我想知道是否可以创建从左到右或从右到左仅一次的类似动画。如果有人能指导我，我将不胜感激。

这是我的 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 使你能够为属性（在我们的例子中是左和上）定义一个具有开始和结束值的动画。

var animateBallBetweenObjects = function (obj1, obj2) {
    var completedLeft, completedTop;
    // obj1, obj2 are predefined.
    var c1 = obj1.getCenterPoint();
    var c2 = obj2.getCenterPoint();
    var circle = new fabric.Circle({
        radius: 10,
        fill: 'blue',
        left: c1.x,
        top: c1.y,
        originX: 'center',
        originY: 'center',
        selectable: false
    });

    canvas.add(circle);

    circle.animate('left', c2.x, {
      onChange: canvas.renderAll.bind(canvas),
      startValue: c1.x,
      endValue: c2.x,
      onComplete: function() {
        completedLeft = true;
        completedTop && canvas.remove(circle);
      },
      easing: fabric.util.ease['easeInQuad']
    }).animate('top', c2.y, {
      startValue: c1.y,
      endValue: c2.y,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        completedTop = true;
        completedLeft && canvas.remove(circle);
      },
      easing: fabric.util.ease['easeInQuad']
    });
};

已更新 fiddle，在动画结束时删除球。

使用 canvas 创建定向动画

Creating directional animation using canvas

javascript

canvas

fabricjs