使用createjs.Tween与PixiJS 7时，补间遮罩跳至最终位置的问题

核心问题原因 #

CreateJS Tween修改Pixi Graphics遮罩的x/y属性后，不会自动触发Pixi的重绘标记，导致Graphics的绘制指令没有实时更新，直到补间结束才一次性刷新，看起来就是直接跳变。

方案1：改用PixiJS官方Tween（推荐） #

跨库Tween容易出现兼容问题，直接用Pixi自带的@pixi/tween模块，它会自动处理渲染更新：

1. 安装依赖：

   npm install @pixi/tween
   

2. 示例代码：

   import { Application, Graphics, Container } from 'pixi.js';
   import { Tween, TweenManager } from '@pixi/tween';
   
   // 初始化Pixi应用
   const app = new Application({ width: 800, height: 600 });
   document.body.appendChild(app.view);
   
   // 创建层级容器
   const gameLayer = new Container();
   const bonusLayer = new Container();
   app.stage.addChild(gameLayer, bonusLayer);
   
   // 创建全屏遮罩
   const maskGraphics = new Graphics()
       .beginFill(0x000000)
       .drawRect(0, 0, app.screen.width, app.screen.height)
       .endFill();
   bonusLayer.mask = maskGraphics;
   
   // 把Tween管理器绑定到Pixi的ticker，自动驱动帧更新
   app.ticker.add(TweenManager.update);
   
   // 创建补间动画（示例：左滑擦除效果）
   new Tween(maskGraphics)
       .to({ x: -app.screen.width }, 1000) // 1秒内滑出屏幕
       .start();
   

方案2：继续用CreateJS Tween，手动触发重绘 #

如果不想换库，就在Tween的change事件里强制标记Graphics为脏，触发Pixi重绘：

import { Application, Graphics, Container } from 'pixi.js';
import { Tween } from 'createjs';

const app = new Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

const gameLayer = new Container();
const bonusLayer = new Container();
app.stage.addChild(gameLayer, bonusLayer);

const maskGraphics = new Graphics()
    .beginFill(0x000000)
    .drawRect(0, 0, app.screen.width, app.screen.height)
    .endFill();
bonusLayer.mask = maskGraphics;

// 必须保持Pixi的ticker运行，否则没有帧更新
app.ticker.add(() => {});

// CreateJS Tween绑定change事件，手动标记脏
Tween.get(maskGraphics)
    .to({ x: -app.screen.width }, 1000)
    .on("change", () => {
        maskGraphics.dirty(); // 强制Graphics重新生成绘制指令
        bonusLayer.dirty = true; // 标记容器需要更新
    });

额外检查点 #

• 确认遮罩的初始x/y和尺寸是正确的全屏大小，避免初始状态就有偏移
• 确保bonusLayer确实在gameLayer上方，层级顺序没错

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