chart.js onAnimationProgress进度百分比

Question

我想在动画发生时更改fillColor。以某种方式使其从一种颜色变为另一种颜色，如蓝色 - >绿色。

我一直在测试方法，到目前为止我已经能够改变颜色，但它的过渡并不顺畅。

该方法目前涉及两个功能：

onAnimationProgress: function(){},

// Function - Will fire on animation completion.
onAnimationComplete: function(){}

但是在使用onAnimationProgress时，我看不到一种方法来查看动画的进度，比如进度有多远。

有什么想法吗？

Answer 1

onAnimationProgress有2个参数easeDecimal和stepDecimal可以使用

var myLineChart = new Chart(ctx).Line(data, {
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        // stepDecimal proceeds uniformly from 0 to 1
        // easeDecimal proceeds depending on the easing function from 0 to 1
        console.log(stepDecimal)
    }
});

例如，要更改fillColor - 这里我只是调整透明度

var myLineChart = new Chart(ctx).Line(data, {
    animationSteps: 200,
    onAnimationProgress: function (easeDecimal, stepDecimal) {
        this.datasets[0].fillColor = "rgba(120,120,120," + stepDecimal + ")";
    }
});