在Fabric js中的两个对象之间添加动画 [英] Add animation between two objects in Fabric js

问题描述

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

 示例
 
 1.点击新动画
 2.添加矩形
 3.添加子项
 4.添加圈
  

您可以移动形状，拖动和调整大小。我想知道是否可以在两个对象之间添加动画。因此，例如，一个小的圆形圆球将在两个物体之间的线上生成动画。我已经在结构js的动画页面上检查了演示，但不确定是否可以从对象b进行。

这是

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

• 当angle为0或2π的倍数时，幅度为0，所以球位于对象1的中心


• 当角度是π的倍数时，幅度为1，球位于对象2的中心


• 当振幅为0.5时，球位于两个物体之间

你可以根据时间增加角度，无论什么期间或期限你要。

  var animateBallBetweenObjects = function（obj1，obj2）{
 
 //添加球
 
 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（）{
 
 //计算新的幅度
 
 var now = Date.now（）; 
 var elapsed = now  -  prevTime; 
 prevTime = now; 
 angle + = Math.PI *（已过去/（期间* 0.5））; 
幅度= 0.5 *（Math.sin（angle  - （0.5 * Math.PI））+ 1）; 
 
 //设置新位置
 
 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）; 
} 
 
 //尽可能快地设置动画
 
 requestAnimationFrame（loop）; 
}; 
  

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.

解决方案

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.

这篇关于在Fabric js中的两个对象之间添加动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！