为什么超越画布的元素不会动画（fabricjs）？

Question

Fabricjs：我有一些圆圈，超出画布层（top：-300），他们有coords，但是当我做指定位置的动画时，他们只是在没有任何动画的指定持续时间内出现在屏幕上。他们为什么这样做，以及如何实现这一点？

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）禁用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] 
    }); 
}