爲什麼超越畫布的元素不會動畫（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] 
    }); 
}