Javascript 停止并继续使用requestAnimationFrame制作动画

如何在JavaScript中停止动画的同一位置继续动画

代码：

var requestId=0；
函数动画（时间）{
document.getElementById（“动画”）.style.left=
（时间-动画开始时间）%2000/4+“像素”；
requestId=window.requestAnimationFrame（动画）；
}
函数start（）{
animationStartTime=window.performance.now（）；
requestId=window.requestAnimationFrame（动画）；
}
函数停止（）{
if（请求ID）
window.cancelAnimationFrame（请求ID）；
requestId=0；
}
函数continu（）{
requestId=window.requestAnimationFrame（动画）；
}

#动画{
位置：绝对位置；
左：10px；
填充：50px；
背景：深红色；
颜色：白色；
边缘顶部：50px；
}

点击我开始！
点击我停止！
点击我继续！
您好。

您必须计算停机时间

以下是解决方案：

var requestId=0，
animationStartTime=0，
stoppedAt=0；
函数动画（时间）{
document.getElementById（“动画”）.style.left=
（时间-动画开始时间）%2000/4+“像素”；
requestId=window.requestAnimationFrame（动画）；
}
函数start（）{
animationStartTime=window.performance.now（）；
requestId=window.requestAnimationFrame（动画）；
}
函数停止（）{
if（请求ID）{
window.cancelAnimationFrame（请求ID）；
//停止点时间戳
stoppedAt=window.performance.now（）；
}
}
函数continu（）{
//将停止时间添加到开始时间。
animationStartTime+=window.performance.now（）-stoppedAt；
requestId=window.requestAnimationFrame（动画）；
}

#动画{
位置：绝对位置；
左：10px；
填充：50px；
背景：深红色；
颜色：白色；
边缘顶部：50px；
}

点击我开始！
点击我停止！
点击我继续！
您好。