(转)第05节:Fabric.js的动画设置
凡是出⾊的Canvas库都少不了制作动画的⽅法,Fabric.js也不例外,它有着编写简单且功能强⼤的动画助⼿,这就是animate( )⽅法。animate主要使⽤代码如下:
canvas动画rect.animate('angle',360,{
derAll.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,{
derAll.bind(canvas)
})
canvas.add(rect);
animate( )⽅法还给我们提供了相对值的办法:
例如,你想让⽅形相对于现在的位置向左移动100px,你可以这样写代码:
t.animate('left', '+=100', { onChange: derAll.bind(canvas) });
当然,⽅形相对于现在的⾓度逆时针旋转5度,你可以这样写代码:
rect.animate('angle', '-=5', { onChange: derAll.bind(canvas) });
您还可以设置动画的持续时间和缓动效果,这些需要在animate( )⽅法的第三个参数中设置。例如:
rect.animate('left', 500, {
onChange: derAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce
});
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论