fabric操作canvas绘图-（二）动画

在上文，我们创建了图形后，可以使用obj.set（）方法变更图形对象的属性。

那么要实现动画效果，肯定要类似地定义好动画的起始状态，这样才能转化成一帧帧动画。

当我们在画布上渲染出一个图案的时候，就相当于已经创建了初始的那一帧。那么要能计算出动画，则需要再定义下变化的属性（也就是定义出结束的状态。）

为了简洁起见，创建的图案对象我都使用obj代替。

fabric提供了这种动画的设置api:

obj.animate( "要设置的属性名", 要设置的属性值, { 
    //动画参数的设置 onChange:canvas.renderAll.bind(canvas) } ) 

一，指定绝对属性

举个例子，让我的文本对象旋转到指定角度的动画。

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const txt = new fabric.Text('test', { 
    left: 140, // 位置 top: 140, shadow: 'rgba(0,0,0,0.3) 15px 15px 15px', // 阴影 fontFamily: 'Hoefler Text', // 字体 stroke: '#ff1318', // 画笔颜色 strokeWidth: 2, // 画笔粗度 fill: '#0f0', //填充颜色 fontSize: 60, // 字体大小 }); txt.animate( "angle", 135, { 
    onChange:canvas.renderAll.bind(canvas), duration:3000 } ) canvas.add(txt); 

实现的效果：

二，指定相对属性

animate的一个便利功能是它还支持相对值，例如我只想相对当前宽度增加100:

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 100, top: 100, width: 30, height: 30, fill: "yellow", }); rect.animate( "width", '+=100', { 
    onChange:canvas.renderAll.bind(canvas), duration:3000 } ) canvas.add(rect); 

实现的效果：

三，动画参数的说明

上文说过，第三个对象参数，里面是设置动画的一些参数，它是可选的。但是注意到，每次都用了onChange方法。为什么呢？

因为当我们调用animate方法时，它只会按照特定算法（即缓动）随时间对属性值进行动画处理。但在每次更改角度后都不会重新渲染画布屏幕。我们显然需要重新渲染才能看到实际的动画。所以这里手动告诉它，每次属性变更后，这个对象重新渲染，于是我们才能看到动画。

这个动画参数可以传的属性有如下几个

   from：允许指定可设置动画的属性的起始值（如果我们不希望使用当前值）。
   onChange:canvas.renderAll.bind(canvas),属性值变更，重新渲染画布
   duration：默认为500（ms）。可用于更改动画的持续时间。
   onComplete：在动画结束时调用的回调。
   easing：缓动功能。具体值查看：http://fabricjs.com/docs/fabric.util.ease.html

示例：

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 100, top: 100, width: 30, height: 30, fill: "yellow", }); rect.animate( "width", '+=100', { 
    from:50, onChange:canvas.renderAll.bind(canvas), duration:2000, easing: fabric.util.ease.easeOutBounce, } ) canvas.add(rect); 

实现的效果：

四，旋转时让绕中心旋转

默认情况下，图案对象的原点是在左上角，所以直接设置旋转动画，是绕着左上角进行旋转的。

为了让它绕中心旋转，可以设置对象的基准点为中心位置：

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 50, top: 50, width: 50, height: 50, fill: "yellow", originX: 'center',//调整中心点的X轴坐标 originY: 'center'//调整中心点的Y轴坐标 }); // 旋转动画 rect.animate('angle', rect.left === 50 ? 360 : 50, { 
    duration: 1000, onChange: canvas.renderAll.bind(canvas), easing: fabric.util.ease.easeInCubic }); canvas.add(rect); 

实现的效果：

可以注意到的是：虽然旋转中心换到中间了，但是left，top的基准也变成这个中心了（之前也是默认的左上角）。

五，同时多个动画效果并循环播放

当我们想要多个动画效果同时触发时：

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 50, top: 50, width: 50, height: 50, fill: "yellow", originX: 'center',//调整中心点的X轴坐标 originY: 'center'//调整中心点的Y轴坐标 }); // 动画效果 function animate() { 
    // 移动动画 rect.animate('left', rect.left === 50 ? 275 : 50, { 
    duration: 1000, onChange: canvas.renderAll.bind(canvas), onComplete: animate }); // 旋转动画 rect.animate('angle', rect.left === 50 ? 360 : 0, { 
    duration: 1000, onChange: canvas.renderAll.bind(canvas), }); // 放大动画 rect.animate('width', rect.left === 50 ? 100 : 50, { 
    duration: 1000, onChange: canvas.renderAll.bind(canvas), }); } animate() canvas.add(rect); 

实现的效果：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/10955.html