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

我正在尝试对图片进行全屏动画放大。最初，我动态设置图像的高度和宽度以匹配屏幕高度和宽度（保持比率）。但一旦我开始缩放动画，它就开始从实际图像维度（而不是我动态设置的维度）向下缩放。如何在图像上执行缩放动画，例如从

1.5

到

1

，其中

1

表示图像宽度和高度的动态设置值

我在这里重现了这个问题，在2.5秒的时间里，图像将覆盖整个高度和宽度，但一旦动画开始，它将缩小到实际大小

$（文档）.ready（（）=>{
让形象；
让比例=1.5；
让renderer=PIXI.autoDetectRenderer（$（窗口）.width（），$（窗口）.height（）{
透明：是的，
决议：1
});
document.getElementById（'display'）.appendChild（renderer.view）；
/*创造舞台*/
let stage=new PIXI.Container（）；
PIXI.loader.add（'my-image'，”https://i.imgur.com/JaBEvbC.png加载（设置）；
函数设置（）{
image=PIXI.Sprite.fromImage（'my-image'）；
image.x=renderer.width/2；
image.y=renderer.height/2；
图像锚定集（0.5）；
image.height=$（window.height（）；
image.width=$（window.width（）；
stage.addChild（图像）；
渲染器。渲染（舞台）；
setTimeout（（）=>animationLoop（），2500）
}
函数animationLoop（）{
requestAnimationFrame（animationLoop）；
刻度-=0.005；
刻度=刻度<1？1.5：刻度；
image.scale.set（比例）；
渲染器。渲染（舞台）；
}
});
我建议动态插值图像的宽度和高度，从原始大小到最终大小，而不是缩放图像

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

image.orig\u w=image.width；
image.orig_h=image.height；

根据
比例计算
动画循环中[0.0,1.0]范围内的插值值
：

scale-=0.005；
比例=比例<1？1.5：比例；
变量a=2.0*（1.5标度）；//从[1.5,1.0]到[0.0,1.0]

根据值
a
计算图像的大小：

image.width=image.orig_w+（$（window.width（）-image.orig_w）*a；
image.height=image.orig_h+（$（窗口）.height（）-image.orig_h）*a；

请参见示例，其中我将建议的更改应用于原始代码：


$（文档）.ready（（）=>{
让形象；
让比例=1.5；
让renderer=PIXI.autoDetectRenderer（$（窗口）.width（），$（窗口）.height（）{
透明：是的，
决议：1
});
document.getElementById（'display'）.appendChild（renderer.view）；
/*创造舞台*/
let stage=new PIXI.Container（）；
PIXI.loader.add（'my-image'，”https://i.imgur.com/JaBEvbC.png加载（设置）；
函数设置（）{
image=PIXI.Sprite.fromImage（'my-image'）；
image.x=renderer.width/2；
image.y=renderer.height/2；
图像锚定集（0.5）；
image.orig_w=image.width；
image.orig_h=image.height；
stage.addChild（图像）；
渲染器。渲染（舞台）；
setTimeout（（）=>animationLoop（），2500）
}
函数animationLoop（）{
requestAnimationFrame（animationLoop）；
刻度-=0.005；
刻度=刻度<1？1.5：刻度；
var a=2.0*（1.5标度）；//从[1.5,1.0]到[0.0,1.0]
image.width=image.orig_w+（$（窗口）.width（）-image.orig_w）*a；
image.height=image.orig_h+（$（窗口）.height（）-image.orig_h）*a；
渲染器。渲染（舞台）；
}
});