（转）第05节：Fabric.js的动画设置
Posted 惊蛰1993
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（转）第05节：Fabric.js的动画设置相关的知识，希望对你有一定的参考价值。
凡是出色的Canvas库都少不了制作动画的方法，Fabric.js也不例外，它有着编写简单且功能强大的动画助手，这就是animate( )方法。
animate主要使用代码如下：
rect.animate(‘angle‘,360,{
onChange:canvas.renderAll.bind(canvas)
})
意思是设置了rect的动画是旋转到360度，onChange是动画的回调函数，可以绑定事件，那这里就是当canvas渲染完成时自动发生动画。
animate接收三个参数：
第一个参数是动画的属性，可以是任何用set( )方法设定的值；
第二个参数是发生变化的结束值（例如正方形从0度旋转到360度）；
第三个参数是设置动画的细节属性，包括动画时间，回调函数，缓动效果，等等。
我们现在对动画有了基本的了解，我们先作一个简单的例子，让一个正方形旋转360度。
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fabric.js动画方法</title> <script type="text/javascript" src="../fabric.js"></script> </head> <body> <canvas width="800" height="800" id="canvas"></canvas> <script type="text/javascript" src="./script.js"></script> </body> </html>
JS：
var canvas = new fabric.Canvas(‘canvas‘); var rect = new fabric.Rect({ top:100, left:100, height:100, width:100, fill:‘red‘, }); rect.set(‘angle‘,0);//设置正方形的初始角度是0度 //下边设置了动画属性，让角度旋转到360度 rect.animate(‘angle‘,360,{ onChange:canvas.renderAll.bind(canvas) }) canvas.add(rect);
animate( )方法还给我们提供了相对值的办法：
例如，你想让方形相对于现在的位置向左移动100px，你可以这样写代码：
t.animate(‘left‘, ‘+=100‘, { onChange: canvas.renderAll.bind(canvas) });
当然，方形相对于现在的角度逆时针旋转5度，你可以这样写代码：
rect.animate(‘angle‘, ‘-=5‘, { onChange: canvas.renderAll.bind(canvas) });
您还可以设置动画的持续时间和缓动效果，这些需要在animate( )方法的第三个参数中设置。例如：
rect.animate(‘left‘, 500, { onChange: canvas.renderAll.bind(canvas), duration: 1000, easing: fabric.util.ease.easeOutBounce });
以上是关于（转）第05节：Fabric.js的动画设置的主要内容，如果未能解决你的问题，请参考以下文章