Как изменить функцию requestAnimationFrame () для использования Promise?

Question

Страница справки MDN по использованию requestAnimationFrame для простой анимации (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) дает пример, который просто отображает анимацию. Я хочу, чтобы моя анимация запускалась асинхронно с использованием 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);