圆形进度条动画速度问题

Question

我将此代码用于带有播放和停止按钮的圆形进度条，当我单击播放按钮时，进度条开始播放动画，当我单击停止按钮时，它的动画停止，并且工作正常。基本上我注意到进度条动画速度在整个循环中是不一样的，开始时，动画移动缓慢，逐渐动画速度逐步增加，所以我想在整个循环中制作和管理动画速度相同和相等起点到终点，你能解释一下我是如何实现这个功能的吗？

var bar = new ProgressBar.Circle(containercheck, {
    color: 'black',
    strokeWidth: 8,
    trailWidth: 9,
    strokeColor: 'red',
    easing: 'easeInOut',
    duration: 30000,
    text: {
        autoStyleContainer: true
    },
    from: {
        color: '#3f81bd',
        width: 8
    },
    to: {
        color: '#3f81bd',
        width: 8
    },
    // Set default step function for all animate calls
    step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
        circle.path.setAttribute('stroke-width', state.width);
        var value = Math.round(circle.value() * 30);
        if (value === 0) {
            circle.setText('<span class="numberValue">' + 0 + '</span>' +
                '<span>Exercise</span>');
        } else {
            circle.setText('<span class="numberValue">' + value + '</span>' +
                '<span>Exercise</span>');
        }
    }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '20px';

Answer 1

动画计时函数应该是线性的而不是ease-in-out 将此添加到您的代码中：animation-timing-function: linear; 即 easing: 'linear'

圆形进度条动画速度问题

circle progress bar animation speed issue

javascript

jquery

progress-bar