Question

有关将requestAnimationFrame用于简单动画（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）的MDN帮助页面提供了一个仅显示动画的示例。我想使用Promise异步运行动画，所以动画完成后，我可以使用.next(NextFunction)进行其他操作。我尝试使用标准建议来构建Promises，但是它不起作用，因为requestAnimationFrame及其回调函数每个仅接受一个参数，所以我看不到将局部变量发送到动画回调函数的方法。

Answer 1

这是执行此操作的代码的核心。显示完整示例的CodePen位于https://codepen.io/david263/pen/MLarQp。

// 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);

如何更改requestAnimationFrame（）函数以使用Promise？

1 个答案: