网站地图    收藏   

主页 > canvas引擎 > Fabricjs >

Fabric.js之动画探索animate

来源:未知    时间:2022-10-25 11:36 作者:小飞侠 阅读:

[导读] 今天带来Fabric.js之动画探索animate方法使用教程,Fabric.js如何使用动画? 下面通过一个实例来讲解下。 如图所示: 定义一个小方块,然后让它上下移动,代码如下: (function(){varcanvas=th...

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


image.png

如图所示:

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

(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具体用法如下:

1666668517917158.png

    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网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论