缓动函数Easing Equations以及Fabric.js缓动效果屏蔽
现实生活中,物体并不是突然启动或者停止,当然也不可能一直保持匀速移动。缓动函数是通过时间的变化控制参数值变化的速率,模拟现实中的物体运动。在使用Fabric.js的时候,发现这个库内置了丰富的缓动函数,但是我只想要匀速运动,没找到怎么屏蔽缓动效果。上网搜索后,发现缓动函数比我想象中还有意思,下面这个网站推荐给大家,可以很直观的理解缓动函数:


网址二维码:

Fabric.js
Fabric.js的缓动函数来自于 gizma 在这个网站上可以看到第一个就是 simple linear tweening - no easing, no acceleration 匀速函数。所以按照该函数自己写一个匀速函数:
function noease(t, b, c, d) {
return c*t/d + b;
}
放在自己的JS脚本中(不需要改Fabric.js源文件),在移动动画配置中的easing直接使用即可,比如:
动画对象.animate({top:移动终点},{
onChange: canvas.renderAll.bind(画布),
duration: 动画时长,
easing: noease
})
gizma网址 http://gizma.com/easing/
网址二维码:
