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

【问题标题】：How to add animation when adding or removing an object - Fabricjs添加或删除对象时如何添加动画 - Fabricjs
【发布时间】：2017-06-13 14:12:50
【问题描述】：

我将 FabricJS 用于我的图像处理库。我想知道如何将动画添加到画布中/从画布中删除的对象。我推荐了该网站的样本。但是对于简单的动画（例如小跳或淡入以引起用户注意），我找不到太多。

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

【问题讨论】：

标签： jquery animation html5-canvas fabricjs

【解决方案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 & http://fabricjs.com/animation-easing

【讨论】：

很好的答案。尝试更新您的小提琴以使跳跃生效。我无法让它工作。我错过了什么吗？ jsfiddle.net/qnwjs0aw/1
animate 的第一个参数应该是属性名。应该是这样的。