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'

圈子进度栏动画速度问题

1 个答案: