Как можно улучшить мою анимацию PIXI.js

Question

У меня есть анимация секвенции из 150 кадров, которую мне нужно запускать c определенных кадров, в определенные моменты. Анимация работает, но как только я захожу на сайт, то он начинает очень сильно нагружать ЦП. В следствие этого анимация начинает тормозить

Ниже будет представлен код, который я написал и не знаю как сделать лучше(в гугле не забанили, но результата там я не нашел)

Ссылка на картинки, если понадобятся

const app = new PIXI.Application({
    width: windowWidth,
    height: windowHeight,
    transparent: true,
    antialias: true,
    sharedTicker: true
});
document.body.appendChild(app.view);
app.stop();

if (windowWidth < 1025) {
    app.destroy(true);
} else {
    app.loader
        .load(onAssetsLoaded);
}


function onAssetsLoaded() {
    // create an array to store the textures
    const controllerTextures = [];

    for (let i = 1; i < 150; i++) {
        const texture = PIXI.Texture.from(`/assets/img/123/controller_${i}.jpg`);
        controllerTextures.push(texture);
    }


    swiper.on('slideNextTransitionStart', function () {
            switch (swiper.snapIndex) {
                case 1:
                    goAnimationGo(controllerTextures,29, 59);
                    break;
                case 2:
                    goAnimationGo(controllerTextures,60, 89);
                    break;
                case 3:
                    goAnimationGo(controllerTextures,90, 119);
                    break;
                case 4:
                    goAnimationGo(controllerTextures,120, 150);
                    break;
                default:
                    break;
            }
        });

    swiper.on('slidePrevTransitionStart', function () {
            switch (swiper.snapIndex) {
                case 3:
                    goAnimationGo(controllerTextures,149, 121, false);
                    break;
                case 2:
                    goAnimationGo(controllerTextures,120, 91, false);
                    break;
                case 1:
                    goAnimationGo(controllerTextures,90, 61, false);
                    break;
                case 0:
                    goAnimationGo(controllerTextures,60, 29, false);
                    break;
                default:
                    break;
            }
        });



    window.addEventListener('load', function (event) {
        goAnimationGo(controllerTextures,0, 30);
    });
}


function goAnimationGo (controllerTextures, frameStartNumber, frameStopNumber, direction = true) {


    // create an controller AnimatedSprite
    const controller = new PIXI.AnimatedSprite(controllerTextures);


    // делаем анимацию в одну и другую сторону.
    let speed;
    direction === true ? speed = 0.35 : speed = -0.35;

    controller.x = windowWidth / 2;
    controller.y = windowHeight / 2;
    controller.height = windowHeight;
    controller.width = windowWidth;

    controller.anchor.x = .5;
    controller.anchor.y = .5;

    controller.gotoAndPlay(frameStartNumber);
    controller.animationSpeed = speed;
    controller.loop = false;
    app.stage.addChild(controller);

    // start animating
    app.start();

    if (direction === true) {
        controller.onFrameChange = () => {
            if (controller.currentFrame <= frameStopNumber) {
                app.start();
            } else {
                app.stop();
                controller.gotoAndStop(frameStopNumber);
            }
        }
    } else {
        controller.onFrameChange = () => {
            if (controller.currentFrame >= frameStopNumber) {
                app.start();
            } else {
                app.stop();
                controller.gotoAndStop(frameStopNumber);
            }
        }
    }
}

БЛОГ НА HUSL

Как можно улучшить мою анимацию PIXI.js

Ответы (0 шт):