[英]Add animation between two objects in Fabric js
我有一个非常基本的应用程序,可让您创建形状并将其与直线连接。 为此,您将执行以下操作。
Example
1. Click new animation
2. add rectangle
3. add child
4. add circle
您可以左右移动形状,拖动和调整大小。 我想知道是否可以在两个对象之间添加动画。 因此,例如,一个小圆球将在两个对象之间的线上产生动画。 我已经在fabric js的动画页面上签出了演示,但是不确定是否可以从对象b执行。
这是FIDDLE 。
我不知道您是否可以在Fabric中使用内置的动画功能,因为正如您所说的那样,这些对象可能在自己周围移动。 但是,您可以使用一些数学工具轻松地手动进行如下操作:
您可以通过将其视为在0到1之间振荡的波来实现。此函数的正确公式为:
您可以仅根据时间,所需的任何周期或持续时间来增加角度。
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);
};
在这里找到它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.