Question

我正在尝试对图片进行全屏缩放动画。最初，我是动态设置图像的高度和宽度以匹配屏幕的高度和宽度（保持比率）。但是，一旦我开始缩放动画，它就会从实际图像尺寸开始缩小，而不是我动态设置的尺寸。如何在图像上进行从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>

Answer 1

建议不要动态缩放图像的宽度和高度（从原始尺寸到最终尺寸）。

将窗口的原始大小存储到某些属性中，而不是更改.width中的.height和setup()：

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

根据animationLoop计算scale中[0.0，1.0]范围内的插值：

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>

使PIXI JS从动态设置的高度和宽度进行缩放

1 个答案: