fabric.js 动画自定义缓动函数(匀速等)

fabric.js 动画简介:http://fabricjs.com/fabric-intro-part-2
fabric.js的缓动函数来自于gizmahttp://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, // 指定缓动函数
});

相关资料

缓动函数速查表: https://www.xuanfengge.com/easeing/easeing/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容