fabric.js 动画简介:http://fabricjs.com/fabric-intro-part-2
fabric.js的缓动函数来自于gizma
:http://gizma.com/easing/,默认使用的缓动函数为easeInSine
自定义函数
fabric.js默认缓动函数不满足需求时,可根据gizma
中说明,自定义想要的函数
如匀速过渡(gizma
中第一个simple linear tweening
就是匀速)
Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
};
// 使用时自定义函数即可
let linear = (t, b, c, d) => {
return c*t/d + b;
}
canvas.animate('left', '+=500', {
onChange: canvas.renderAll.bind(canvas),
duration: 1000, // 动画时间
easing: linear, // 指定缓动函数
});
网友评论