fabric animate动画的 byValue 的使用(坑)

说明

animate() 动画函数中的 byValue 参数表示步长,一般不需要设置该参数,特别是:不能设置任意值,否则动画会有问题

fabric.util.animate({
    startValue: 1,
    endValue: 10,
    byValue:1, // 设置 1 的目的是每次增加1,其实是有问题的
    duration: 2000,
    onChange: (value) => { // 过程函数
      console.log(value)
    },
});

打印结果:前面都是 1.00x - 1.99x 的值,直到最后一下子跳到 10

正确 byValue 值

byValue 的值是 endValue - startValue

代码改为:

fabric.util.animate({
    startValue: 1,
    endValue: 10,
    byValue:9,
    duration: 2000,
    onChange: (value) => { // 过程函数
      console.log(value)
    },
});

打印结果:1.00x - 10 ,是连续值