javascript - 为什么 Canvas 之外的元素没有动画(fabricjs)？

Question

Fabricjs: 我有一些圆圈，在 Canvas 层 (top: -300) 之外，它们有坐标，但是当我对指定位置进行动画处理时，它们就会出现在指定的持续时间内在屏幕上显示，没有任何动画。他们为什么会这样，实现方式是什么？

animateCircle(ind, co, shift = -300, ca) {
    co.animate('top', shift, {
        duration: 1000,
        onChange: ind !== null && ++ind === ca.length ? this.c.renderAll.bind(this.c): undefined,
        easing: fabric.util.ease[0]
    });
}

Answer 1

如果您使用的是最新的 fabricjs，则有一个参数可以跳过屏幕外对象的绘制。您有两种方法可以为屏幕外的对象设置动画:

1) 在 Canvas 上始终或仅在动画持续时间内禁用 skipOffscreen 检查设置 skipOffscreen 为 false。

2) 在动画期间计算动画对象的 obj.setCoords()。

animateCircle(ind, co, shift = -300, ca) {
    co.animate('top', shift, {
        duration: 1000,
        onChange: ind !== null && ++ind === ca.length ? 
        function() {
          this.c.renderAll();
          co.setCoords();
        } : undefined,
        easing: fabric.util.ease[0]
    });
}