javascript - Add animation between two objects in Fabric js - Stack Overflow

admin管理员组

文章数量:1434010

I have a very basic application that let's you create shapes and connect them with a line. To do that you would do the following.

Example

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

You can move the shapes around , drag, and resize. I was wondering if it is possible to add a animation between two objects. So for example a small round circle ball would animate on the line between two objects. I have checked out demos on animation page in fabric js but not sure if it is possible to do from object b.

Here is the FIDDLE.

I have a very basic application that let's you create shapes and connect them with a line. To do that you would do the following.

Example

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

You can move the shapes around , drag, and resize. I was wondering if it is possible to add a animation between two objects. So for example a small round circle ball would animate on the line between two objects. I have checked out demos on animation page in fabric js but not sure if it is possible to do from object b.

Here is the FIDDLE.

• javascript
• fabricjs

Share Improve this question Follow asked Sep 19, 2015 at 16:54 user1010101user1010101 1,65888 gold badges4848 silver badges8080 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6 +100

I don't know if you can use the built in animation function in fabric because as you say these objects might be moving around themselves. But you can make something like this quite easily manually using a bit of Math:

You could do this by treating it like a wave oscillating between 0 and 1. The correct formula for this function is:

• When the "angle" is 0, or a multiple of 2π the amplitude is 0, so the ball is at object1's center
• When the "angle" is a multiple of π, the amplitude is 1 and the ball is at object2's center
• When the amplitude is 0.5, the ball is in between the two objects

You can just increase the angle based on the time, on whatever period, or duration you want.

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 with it here.

本文标签： javascriptAdd animation between two objects in Fabric jsStack Overflow