（转）第05节：Fabric.js的动画设置

时间 2019-11-11

标签 fabric.js fabric 动画设置栏目 JavaScript 繁體版

原文原文链接

凡是出色的Canvas库都少不了制做动画的方法，Fabric.js也不例外，它有着编写简单且功能强大的动画助手，这就是animate( )方法。javascript

animate主要使用代码以下：html

rect.animate('angle',360,{
    onChange:canvas.renderAll.bind(canvas)
})

意思是设置了rect的动画是旋转到360度，onChange是动画的回调函数，能够绑定事件，那这里就是当canvas渲染完成时自动发生动画。java

animate接收三个参数：canvas

第一个参数是动画的属性，能够是任何用set( )方法设定的值；
第二个参数是发生变化的结束值（例如正方形从0度旋转到360度）；
第三个参数是设置动画的细节属性，包括动画时间，回调函数，缓动效果，等等。函数

咱们如今对动画有了基本的了解，咱们先做一个简单的例子，让一个正方形旋转360度。动画

HTML：spa

<!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：code

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( )方法还给咱们提供了相对值的办法：htm

例如，你想让方形相对于如今的位置向左移动100px，你能够这样写代码：blog

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
});