Animation 使用请求动画帧更改画布动画的持续时间

我正在尝试制作一个类似于进度条的圆圈的动画。我打算在旋转木马上使用它来跟踪下一张幻灯片的播放时间。我遇到的问题是我不知道如何更改动画的持续时间。我试着调整帧速率，效果很好，但动画变得很不稳定。setInterval可以正常工作，但它显示的是整个圆圈，而不是我想要的一部分，所以我无法正确计时。我需要能够控制动画的速度，减慢它的速度，而不会让它口吃。下面是我正在编写的代码

<script>    
    (function() {
        var requestAnimationFrame = window.requestAnimationFrame || 
                                    window.mozRequestAnimationFrame ||
                                    window.webkitRequestAnimationFrame || 
                                    window.msRequestAnimationFrame;
                                    window.requestAnimationFrame = requestAnimationFrame;
    })();
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 90;
        var endPercent = 85;
        var curPerc = 0;
        var circ = -Math.PI;
        var quart = -(Math.PI * 2) + 1;

        function animate(current) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.beginPath();
            context.arc(centerX, centerY, radius, -(quart), ((circ) * current) - quart, true);
            context.lineWidth = 3;
            context.strokeStyle = '#000';
            context.stroke();
            curPerc++;
            if (curPerc < endPercent) {
                requestAnimationFrame(function () {
                animate(curPerc / 100)
                });
            }
        }

     animate();
</script>

（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | |
window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | |
window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=90；
var endPercent=85；
var-curPerc=0；
var circ=-Math.PI；
var quart=-（Math.PI*2）+1；
函数动画（当前）{
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
弧（中心x，中心y，半径，-（夸脱），（（圆周）*当前）-夸脱，真值）；
context.lineWidth=3；
context.strokeStyle='#000'；
stroke（）；
curPerc++；
如果（curPerc

requestAnimationFrame

在回调参数中传递高分辨率时间戳。因此，您可以使用它来确定当前动画中的位置，并使用此增量时间来设置位置变量，而不是

curPerc++

这里是一个幼稚的实现

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=90；
var endPercent=85；
var quart=-（Math.PI*2）+1；
var startTime=null；
var持续时间=空；
函数动画（时间）{
如果（！开始时间）{
开始时间=时间；
}
var delta=数学最小值（1，（时间-开始时间）/持续时间）；
var curPerc=（-2*Math.PI）/100）*（endPercent*delta）；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
弧（中心x，中心y，半径，-夸脱，curPerc-夸脱，真）；
stroke（）；
if（δ<1）{
请求动画帧（动画）；
}否则{
startTime=null；
slider.disabled=false；
}
}
var startAnim=函数（）{
context.lineWidth=3；
context.strokeStyle='#000'；
slider.disabled=true；
持续时间=+slider.value；
l、 text内容=持续时间+毫秒；
请求动画帧（动画）；
};
slider.onchange=startAnim；
斯塔塔尼姆（）
使用滑块更新动画的持续时间



@markE，你说得对。通常我甚至会在
if（delta>=1）
中添加一个“draw last frame”调用，我会将它放在anim函数的顶部。只是太懒了，在OP的结构中做不好。非常感谢。我搜索了这么多东西，却找不到正确的答案。下面是一个基于时间的画布动画。