PixiJS角色动画精灵重新赋值后无法更新问题

问题原因分析 #

1. 直接赋值变量无效：你把character重新赋值为新的AnimatedSprite时，舞台上显示的还是最初添加的旧精灵实例——变量只是指向了新对象，但舞台的子元素引用没更新，所以看不到变化。
2. 替换纹理后动画不循环：仅替换textures数组不会同步动画的播放状态（比如loop属性、当前帧位置、播放状态），导致动画无法正常循环。

解决方案 #

方案1：切换完整精灵实例 #

移除旧精灵，添加新精灵并同步属性：

if (keys['87'] && character.y > 0) {
    // 从父容器移除旧精灵
    character.parent.removeChild(character);
    // 获取新精灵，同步位置等属性
    const newSprite = characterMovement["walk_up"];
    newSprite.x = character.x;
    newSprite.y = character.y;
    newSprite.scale.copyFrom(character.scale);
    // 添加到舞台
    app.stage.addChild(newSprite);
    // 更新变量指向
    character = newSprite;
    // 确保动画开始播放
    character.play();
}

方案2：修复纹理替换后的循环问题 #

替换纹理后重置动画状态：

if (keys['87'] && character.y > 0) {
    character.textures = characterMovement["walk_up"].textures;
    // 强制开启循环
    character.loop = true;
    // 重置到第一帧并开始播放
    character.gotoAndPlay(0);
    // 同步动画速度（如果不同动画速度有差异）
    character.animationSpeed = characterMovement["walk_up"].animationSpeed;
}

内容的提问来源于stack exchange，提问作者DuckQuackington