5

Предположим у меня несколько анимаций (функции, которые что-то меняют), Вообщем я могу просто в каждой из них писать requestAnimationFrame(functionName), запускать их при загрузке страницы, таким образом получается что requestAnimationFrame вызывается много раз и я не знаю хорошо это или плохо (я работал с setInterval и там такое естественно плохо). Или же я могу сделать функцию такого вида:

on.frame = (function () {
    var fns = [];

    function frame () {
        var now = new Date();

        for ( let i = 0; i < fns.length; i++ )
            fns[i](now);


        if (fns.length != 0) requestAnimationFrame(frame);
    }

    return function (fn) {

        if(fns.length == 0){
            fns.push(fn);

            requestAnimationFrame(frame);
        } else fns.push(fn);

    }
})();

Смысл в том чтобы создавать массив с анимациями и выполнять их все в одной функции которая засовывается в один requestAnimationFrame. Стоит ли это делать? Ведь насколько я понимаю requestAnimationFrame и так собирает с начало всё что должно изменится а потом выполняет вместе.

3
  • все анимации бесконечные?
    – Grundy
    17 ноя 2016 в 12:48
  • Могут быть и бесконечные, могут быть и на протяжении какого-то периода, любые
    – Kirpich643
    13 янв 2017 в 18:26
  • requestAnimationFrame запускаются друг за другом, так что не мучайтесь, а просто позаботтесь чтоб анимации не перекрывали друг друга дёргая один объект в разные стороны.
    – nazarpunk
    20 июл 2021 в 0:56

2 ответа 2

0

Например вот так у меня вышло гораздо лучше чем на setTimeout. С easing разберитесь самостоятельно.


let Animate = {

    // Move some units
    animateMove: ( e, p, v, t, r, c ) => {

        // e - HTML element
        // p - CSS propertie
        // v arg - [from, dest, unit);
        // t - time
        // r - easing
        // c - callback function 

        let [ s, m, cnt ] = [ performance.now(), (v[ 0 ] - v[ 1 ]) / t, 0 ];

        void requestAnimationFrame(

            function frame(d) {

                // g - time gone; s - start time; m - speed;  z - delta
                let g = d - s;
                let z = v[ 0 ] - (m * g);

                // Time escape preventing
                if( g > t ) {

                    g = t;

                }

                // Apply FX's
                let f = RR.effects(r, g / t);

                e.style[ p ] = v[ 2 ] ? Math.floor(z * f) + v[ 2 ] : z * f;

                // Animation time is over? If not perform next frame
                if( g < t ) {

                    void requestAnimationFrame(frame);

                } 
                else {

                    // Hard fix CSS to prevent escaping ranges
                    e.style[ p ] = v[ 1 ] + v[ 2 ];

                    if( c && cnt < 1) {

                        c.call(e);

                        cnt++;

                    }

                }

            }

        );

    }

};
-1

Работать будет и так и так, но логичнее собрать всё что относится к requestAnimationFrame - в одном месте.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 18 ноя 2016 в 10:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.