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

Question

Всем привет! Сделал анимацию секвенции на PIXI.js, но есть вопросы, до которых не могу сам додуматься(

Если вкратце:

У меня есть секвенция из 150 кадров, каждый из которых 1920х1080 я сделал spritesheet в программе texturePacker, но туда влезло только 17 кадров. Я загрузил этот спрайт в PIXI и у меня анимация играет все кадры, хотя в spritesheet только 17(что мне до сих пор не понятно).

Так же у меня если слайдер, я использую swiper, для полноэкранного скролла, каждую смену слайда проигрывается 30 кадров анимации. И есть кликабельная пагинация, которая тоже должна тригерить анимацию.

Тут я столкнулся с проблемой:

Я не знаю как мне сделать, что бы играть правильную анимацию, если я, например, с первого слайда сразу прыгаю на последний и подобные паттерны ломают всю красоту :(

Так же мои картинки размерами 1920х1080, но например если ратянуть экран больше, чем на эти значения, то как я могу динамически скейлить мои кадры (что-то вроде backgroun-size: cover)? Пытался погуглить на эту тему, но не нашел ничего...

Так же прошу помощи, в рефакторинге моего кода, потому что уверен, что его можно улучшить

Мой код (картинки можно найти по ссылке):

import * as PIXI from 'pixi.js'
import Swiper from 'swiper';

let slider = new Swiper('.swiper-container', {
    direction: 'vertical',
    mousewheel: true,
    slidesPerView: 1,
    speed: 1500,
    spaceBetween: 100,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
});



const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    transparent: true
});
document.body.appendChild(app.view);
app.stop();


app.loader
    .add('/sprite.json')
    .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);
    }

    goAnimationGo(controllerTextures,0, 30);

    slider.on('slideNextTransitionStart', function () {
        switch (slider.activeIndex) {
            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, 149);
                break;
            default:
                break;
        }
    });
    slider.on('slidePrevTransitionStart', function () {
        switch (slider.activeIndex) {
            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;
        }
    });
}


function goAnimationGo (controllerTextures, frameStartNumber, frameStopNumber, direction = true) {
    // делаем анимацию в одну и другую сторону.
    let speed;
    direction === true ? speed = 0.35 : speed = -0.35;

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

    controller.x = app.screen.width;
    controller.y = app.screen.height;
    controller.anchor.set(1);
    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);
            }
        }
    }

}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

main {
  height: 100vh;
}
.swiper-container {
    width: 100%;
    height: 100%;
  }
  
.swiper-slide {
  @extend %flex-center;
  font-size: 50px;
  color: tomato;
  font-weight: bold;
}

<main>
    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><span>Slide 1</span></div>
            <div class="swiper-slide"><span>Slide 2</span></div>
            <div class="swiper-slide"><span>Slide 3</span></div>
            <div class="swiper-slide"><span>Slide 4</span></div>
            <div class="swiper-slide"><span>Slide 5</span></div>
        </div>

        <div class="swiper-pagination"></div>
    </div>
</main>

БЛОГ НА HUSL

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

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