fabric.js 動畫簡介:http://fabricjs.com/fabric-intro-part-2
fabric.js的緩動函數(shù)來自于gizma
:http://gizma.com/easing/耽装,默認(rèn)使用的緩動函數(shù)為easeInSine
官方文檔提到的緩動函數(shù)
自定義函數(shù)
fabric.js默認(rèn)緩動函數(shù)不滿足需求時(shí)娶聘,可根據(jù)gizma
中說明衔统,自定義想要的函數(shù)
如勻速過渡(gizma
中第一個(gè)simple linear tweening
就是勻速)
Math.linearTween = function (t, b, c, d) {
return c*t/d + b;
};
// 使用時(shí)自定義函數(shù)即可
let linear = (t, b, c, d) => {
return c*t/d + b;
}
canvas.animate('left', '+=500', {
onChange: canvas.renderAll.bind(canvas),
duration: 1000, // 動畫時(shí)間
easing: linear, // 指定緩動函數(shù)
});
相關(guān)資料
緩動函數(shù)速查表
: https://www.xuanfengge.com/easeing/easeing/