今天带来Fabric.js之动画探索animate方法使用教程，Fabric.js如何使用动画? 下面通过一个实例来讲解下。

如图所示：

定义一个小方块，然后让它上下移动，代码如下：

(function() {
  var canvas = this.__canvas = new fabric.StaticCanvas('c');

  canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
  );

  fabric.Image.fromURL('../lib/pug.jpg', function(img) {
    canvas.add(img.set({ left: 400, top: 350, angle: 30 }).scale(0.25));
  });

  function animate() {
    canvas.item(0).animate('top', canvas.item(0).get('top') === 500 ? '100' : '500', {
      duration: 1000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: animate
    });
  }
  animate();
})();

1.通过上面代码可以看到，这个代码是定义一个小方块元素，然后设置初始高度100，左侧距离100，宽度50，高度50，填充红色。

new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),

2.关键代码如下，拿到canvas容器下，第一个元素, item(0), 然后调用 animate 方法即可。

animate具体用法如下：

    canvas.item(0).animate('top', canvas.item(0).get('top') === 500 ? '100' : '500', {
      duration: 1000, // 时间单位（毫秒）
      onChange: canvas.renderAll.bind(canvas), // 改变回调，主要告诉引擎渲染刷新
      onComplete: animate // 动画结束回调自己进行循环动画
    });

针对onChange官方说法如下:

你可能想知道为什么我们总是在那里指定“onChange”回调。第三个参数不是可选的吗？是的，但是调用canvas.renderAll每个动画帧是让我们看到实际动画的原因！你看，当我们调用animate方法时，它只会随着时间的推移动画属性值，遵循特定的算法（即缓动）。所以rect.animate('angle', 45)会改变对象的角度，但不会在每次改变角度后重新渲染画布屏幕。我们显然需要重新渲染才能看到实际的动画。

请记住，在该画布表面下方有整个对象模型。对象有自己的属性和关系，canvas只负责将它们的存在投射到外界。

以上就是Fabric.js之动画探索animate全部内容,感谢大家支持自学php网。