根据网上一个例子想到的(缓动函数Easing Equations以及Fabric.js缓动效果屏蔽 - 哔哩哔哩),记录下。运动轨迹是一个直角
let path = new fabric.Path('m30 30 h0 100 v0 100', {
fill: '',
stroke:'#000',
});
let circle = new fabric.Circle({
left: 30,
top: 30,
radius: 5,
fill: '#fff',
stroke:'#000',
originX: 'center',
originY: 'center',
});
var n = 0;
//t执行时间 b开始位置 c结束位置 d执行时长
//第一次调用 0 30 130 3000 /*left:130*/
//第二次调用 0 30 150 3000 /*top:150*/
//第三次调用 11 30 100 3000 /*left:130*/
//第四次调用 11 30 120 3000 /*top:150*/
// ......
// ... 3000 30 100 3000 /*left:130*/
// ... 3000 30 120 3000 /*top:150*/
let linear = (t, b, c, d) => {
n++
l=d/2;
if(t<=l){
return n%2==0 ? b : (c*t/d*2+b);
}else{
return n%2==0 ? (c*(t-l)/d*2+b) : (b+c); //注意元素起始位置
}
}
circle.animate({left:130,top:150},{
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: linear,
})