Javascript 如何更改requestAnimationFrame（）函数以使用承诺？

有关使用requestAnimationFrame for simple animation（）的MDN帮助页面提供了一个简单显示动画的示例。我想使用Promise异步运行动画，这样我可以在动画完成时使用

.next（NextFunction）

执行其他操作。我尝试过使用标准建议来构造承诺，但它不起作用，因为requestAnimationFrame及其回调函数每个只接受一个参数，所以我看不到向动画回调函数发送局部变量的方法。

这是执行此操作的代码核心。显示完整示例的代码笔位于

//将整个动画包装在承诺中
函数动画（AnimStep）
{
var o={}；//局部承诺变量
o、 Step=AnimStep.bind（o）；//使o.Step（）具有此==o
返回新承诺（功能（解决、拒绝）
{
//记住一些局部变量
o、 决心=决心；
o、 开始=0；
o、 id=W.requestAnimationFrame（o.Step）；
});
}//制作动画
//定义动画步骤
函数步骤（时间戳）
{
//具有大量动画的最快MsecPerFrame为10毫秒（60 fps）
//请注意，css转换是在不进行平滑的情况下完成的
var MsecPerFrame=10，msecperramim=2000；
如果（！this.start）
this.start=时间戳；
var progress=timestamp-this.start；
GreenBarEl.style.left=进度/MsecPerFrame+'px'；
如果（进度

CodePen还包括通过解析承诺（承诺本身不支持中断）在动画完成之前中断动画的代码。

// Wrap entire animation in a Promise
function Animate(AnimStep)
    {
    var o={}; // Local Promise variables
    o.Step=AnimStep.bind(o); // Make o.Step() have this==o
    return new Promise(function(resolve,reject)
        {
        // Remember some local variables
        o.resolve=resolve;
        o.start=0;
        o.id=W.requestAnimationFrame(o.Step);
        });
    } // Animate

// Define animation step
function AnimStep(timestamp)
    {
    // Fastest MsecPerFrame with lots of animation is 10 msec (60 fps)
    // Note that css transform is done without smoothing
    var MsecPerFrame=10, MsecPerAnim=2000;
    if (!this.start)
        this.start=timestamp;
    var progress = timestamp - this.start;
    GreenBarEl.style.left=progress / MsecPerFrame + 'px';
    if (progress < MsecPerAnim)
        W.requestAnimationFrame(this.Step);
    else
        this.resolve();
    } // AnimStep

// Run the animation and signal when done
Animate(AnimStep).then(Done);