Заставьте PIXI JS выполнять масштабирование от динамически заданных высоты и ширины - PullRequest
Новая
       69

Заставьте PIXI JS выполнять масштабирование от динамически заданных высоты и ширины

0 голосов
/ 06 декабря 2018

Я пытаюсь сделать полноэкранное увеличение анимации на картинке.Первоначально я динамически устанавливаю высоту и ширину изображения в соответствии с высотой и шириной экрана (соотношение сохраняется).Но как только я запускаю масштабируемую анимацию, она начинает уменьшать ее по фактическим размерам изображения, а не тому, который я установил динамически.Как сделать анимацию масштабирования изображения, скажем, от 1.5 до 1, где 1 означает мои динамически установленные значения ширины и высоты изображения,

Я воспроизвел проблему здесь,в течение 2,5 секунд изображение будет охватывать полную высоту и ширину, но после запуска анимации оно уменьшится до своего фактического размера. 

$(document).ready(() => {
  let image;
  let scale = 1.5;
  let renderer = PIXI.autoDetectRenderer($(window).width(), $(window).height(), {
    transparent: true,
    resolution: 1
  });
  document.getElementById('display').appendChild(renderer.view);

  /* create stage */
  let stage = new PIXI.Container();

  PIXI.loader.add('my-image',"https://i.imgur.com/JaBEvbC.png").load(setup);

  function setup() {
    
    image = PIXI.Sprite.fromImage('my-image');
    image.x = renderer.width / 2;
    image.y = renderer.height / 2;
    image.anchor.set(0.5);
    
    image.height = $(window).height();
    image.width = $(window).width();
    
    stage.addChild(image);
    renderer.render(stage);

   setTimeout(() => animationLoop(), 2500) 
  }

  function animationLoop() {
    requestAnimationFrame(animationLoop);
    scale -= 0.005;
    scale = scale < 1 ? 1.5 : scale;
    image.scale.set(scale);
    renderer.render(stage);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.3/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div align="center" id="display">
</div>

1 Ответ

0 голосов
/ 06 декабря 2018

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

Сохранить оригинальный размер окна в некоторых свойствах вместоизменение .width и .height в setup(): 

image.orig_w = image.width;
image.orig_h = image.height;

Рассчитать значение интерполяции в диапазоне [0,0, 1,0] в animationLoop, в зависимости от scale: 

scale -= 0.005;
scale = scale < 1 ? 1.5 : scale;

var a = 2.0*(1.5-scale); // from [1.5, 1.0] to [0.0, 1.0]

Рассчитайте размер изображения в зависимости от значения a: 

image.width  = image.orig_w + ($(window).width() - image.orig_w) * a; 
image.height = image.orig_h + ($(window).height() - image.orig_h) * a;

См. Пример, где я применил предложенные изменения к вашему исходному коду: 

$(document).ready(() => {
  let image;
  let scale = 1.5;
  let renderer = PIXI.autoDetectRenderer($(window).width(), $(window).height(), {
    transparent: true,
    resolution: 1
  });
  document.getElementById('display').appendChild(renderer.view);

  /* create stage */
  let stage = new PIXI.Container();

  PIXI.loader.add('my-image',"https://i.imgur.com/JaBEvbC.png").load(setup);

  function setup() {
    
    image = PIXI.Sprite.fromImage('my-image');
    image.x = renderer.width / 2;
    image.y = renderer.height / 2;
    image.anchor.set(0.5);
    
    image.orig_w = image.width;
    image.orig_h = image.height;
    
    stage.addChild(image);
    renderer.render(stage);

   setTimeout(() => animationLoop(), 2500) 
  }

  function animationLoop() {
    requestAnimationFrame(animationLoop);
    scale -= 0.005;
    scale = scale < 1 ? 1.5 : scale;

    var a = 2.0*(1.5-scale); // from [1.5, 1.0] to [0.0, 1.0]
    image.width  = image.orig_w + ($(window).width() - image.orig_w) * a; 
    image.height = image.orig_h + ($(window).height() - image.orig_h) * a; 

    renderer.render(stage);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.3/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center" id="display"></div>
...