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

Question

我正在为我的图像处理库使用 FabricJS。我想知道如何在对象添加到 canvas 或从中删除时将动画添加到对象。我参考了网站的样品。但是我找不到太多简单的动画（比如小跳跃或淡入以引起用户注意）。

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

Answer 1

似乎 fabricJS 本身提供了几种动画方法。您可以使用 timeout/interval 然后修改类似的东西，或者您可以使用 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 & http://fabricjs.com/animation-easing

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

How to add animation when adding or removing an object - Fabricjs

jquery

animation

html5-canvas

fabricjs