RequestAnimationFrame — следует ли использовать параметр DOMHighResTimeStamp?

Я пытался исследовать, как использовать requestAnimationFrame, и я очень запутался.

Согласно Mozilla, если у вас есть функция анимации называется «шаг», который вы вызываете с помощью requestAnimationFrame(step), step принимает аргумент, который представляет собой число миллисекунд, аргумент DOMHighResTimeStamp.

И все же каждый пример использования requestAnimationFrame, который я видел в Интернете, не использует этот аргумент. В некоторых примерах утверждается, что вы можете предположить, что функция step будет выполняться 60 раз в секунду, поэтому они вообще не используют никаких концепций time. Другие получают свое собственное «количество миллисекунд» отдельно от аргумента, используя new Date(); - я полагаю, что достаточно легко изменить эти примеры, чтобы вместо этого использовать аргумент.

Можно ли предположить, что функция будет выполняться 60 раз в секунду? Кажется... неразумным для меня. Mozilla говорит "Число обратных вызовов обычно составляет 60 раз в секунду, но обычно соответствует частоте обновления экрана в большинстве веб-браузеров в соответствии с рекомендацией W3C", что меня не устраивает в этом предположении. Есть ли причина, по которой люди используют свой собственный new Date() способ получения миллисекунд, а не аргумент?


javascript animation requestanimationframe
person TKoL    schedule 29.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ну, раньше были и другие ответы и комментарии, но по какой-то причине люди их удалили. В итоге я выяснил, как правильно использовать метку времени, и разместил ответ здесь

Я скопирую ответ:

Кажется, я нашел для вас ответ. Он основан на этой библиотеке.

Во-первых, я бы просто взял функцию с этого сайта

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

Затем я бы использовал модифицированную форму кода примера, что-то вроде этого

function startAnimation(domEl){
    var stop = false;

    // animating x (margin-left) from 20 to 300, for example
    var startx = 20;
    var destx = 300;
    var duration = 1000;
    var start = null;
    var end = null;

    function startAnim(timeStamp) {
        start = timeStamp;
        end = start + duration;
        draw(timeStamp);
    }

    function draw(now) {
        if (stop) return;
        if (now - start >= duration) stop = true;
        var p = (now - start) / duration;
        val = inOutQuad(p);
        var x = startx + (destx - startx) * val;
        $(domEl).css('margin-left', `${x}px`);
        requestAnimationFrame(draw);
    }

    requestAnimationFrame(startAnim);
}

Я мог бы изменить способ расчета «стоп», я мог бы написать что-нибудь, чтобы убедиться, что он заканчивается на destx и т. д., но это основной формат.

Отображение в этом jsfiddle

Я даже немного горжусь этим. Я давно хотел разобраться в этом. Рад, что у меня была причина.

person TKoL    schedule 06.10.2017