fabric.js 自定义animate路径

 根据网上一个例子想到的（缓动函数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,
    })