Question

我正在使用FabricJS作为我的图像处理库。我想知道如何在对象添加到画布/从画布中删除动画时添加动画。我在网站上提到了样本。但是我找不到简单的动画（比如小跳或淡入以引起用户注意）。

我应该使用object.animate吗？删除对象时它会起作用吗？示例代码或参考源将非常棒。

Answer 1

似乎fabricJS本身为动画提供了几种方法。您可以使用超时/间隔然后修改类似的东西，也可以使用animate函数（对于简单的对象属性）来执行此操作。对于这种事情，我认为使用animate函数更容易。

例如：

var canvas = new fabric.Canvas(...);
var rect = new fabric.Rect(...);

function startAnimation() {
    // If the object was removed, add it back
    if (rect.opacity === 0) {
        canvas.add(rect);
    }

    // Animate the opacity of the rectangle from 0 - 1 and back
    rect.animate('opacity', rect.opacity === 0 ? 1 : 0, {
        duration: 1000,
        onChange: canvas.renderAll.bind(canvas),
        onComplete: function() {
            // Once the animation is complete, remove the object
            if (rect.opacity === 0) {
                canvas.remove(rect);
            }
        },
        easing: fabric.util.ease['easeInQuad']
    });
}

JSFiddle：http://jsfiddle.net/qnwjs0aw/

fabricJS文档：http://fabricjs.com/cross＆amp; http://fabricjs.com/animation-easing

添加或删除对象时如何添加动画 - Fabricjs

1 个答案: