为什么PixiJS精灵跟随鼠标移动时会有延迟和卡顿？

博主子斌提问于 2026-02-11 23:06:29 阅读 16

交互

我在用PixiJS实现鼠标跟随的精灵动画时，发现移动明显卡顿，尤其是在快速拖动鼠标时。按照教程用app.renderer.view.addEventListener('mousemove')直接更新精灵坐标，但效果很不流畅。

尝试把坐标更新放进app.ticker.add里处理，又导致精灵无法实时响应鼠标位置。检查帧率显示渲染正常60FPS，但实际动画还是有0.5秒左右的延迟。这种情况下应该怎么同步鼠标事件和渲染循环？


let targetPos = {x:0, y:0};
app.ticker.add(() => {
    sprite.x += (targetPos.x - sprite.x) * 0.1;
    sprite.y += (targetPos.y - sprite.y) * 0.1;
});

// 鼠标事件直接修改targetPos
renderer.view.addEventListener('mousemove', e => {
    const pos = app.utils.math.world2screen(e.x, e.y);
    targetPos = {x: pos.x, y: pos.y};
});

我来解答赞 6 收藏

反馈

1 条解答

博主若兮 Lv1

改一下就行。你现在的写法在mousemove里直接更新targetPos是对的，但world2screen用错了，这函数不是PixiJS的标准API，应该是view里的getBoundingClientRect那一套。

卡顿的核心是你用了0.1的缓动系数做匀速逼近，这个延迟就是你自己加的。要实时响应就得提高追踪速度，或者直接瞬移。

更关键的是鼠标事件坐标转换必须准。下面是修正后的代码：

const targetPos = {x: 0, y: 0};

const sprite = new PIXI.Sprite(texture);

app.stage.addChild(sprite);



// 正确获取鼠标相对于canvas的位置

app.view.addEventListener('mousemove', e => {

    const rect = app.view.getBoundingClientRect();

    targetPos.x = e.clientX - rect.left;

    targetPos.y = e.clientY - rect.top;

});



// 保持在ticker里更新，但加大移动速度

app.ticker.add(() => {

    // 把0.1改成0.3以上，或者直接赋值

    const speed = 0.3;

    sprite.x += (targetPos.x - sprite.x) * speed;

    sprite.y += (targetPos.y - sprite.y) * speed;

});

如果你想要完全跟上鼠标，干脆直接 sprite.x = targetPos.x 也行。缓动只是为了视觉柔和，不要为了“教程这么写”就硬加上。

另外确保你的app.renderer是自动更新的，别手动停了ticker。60FPS看着正常不代表逻辑帧没丢，只要鼠标坐标取对了、逼近系数调好，根本不会卡。

2026-02-11 23:12