PixiJS里怎么让精灵平滑移动到指定位置？

Good“熙苒提问于 2026-03-02 21:01:19 阅读 3

交互

我用PixiJS做个小游戏，想让一个精灵从当前位置平滑移动到点击的位置，但直接改x/y坐标是瞬移的，完全没动画效果。

试过用requestAnimationFrame自己写缓动，但感觉卡顿还不好控制。是不是有更简单的方法？比如内置的tween或者类似GSAP那样的插件？

现在代码大概是这样：

app.renderer.plugins.interaction.on('pointerdown', (event) => {
  sprite.x = event.data.global.x;
  sprite.y = event.data.global.y;
});

这显然不行，有没有推荐的实现方式？

CSS动画 JS动画交互设计

我来解答赞 1 收藏

反馈

1 条解答

柯豪 Dev Lv1

直接改x/y肯定是瞬移啊，这玩意儿没有插值过程。PixiJS本身不带Tween引擎，官方一直推荐配合GSAP用。别自己手写requestAnimationFrame了，那玩意儿要考虑帧率抖动、暂停恢复一堆破事，没那个必要。

GSAP在咱们WordPress前端开发圈子里也是标配了，做各种页面交互特效都靠它。你把GSAP库引进来，然后用它的gsap.to方法包一下你的精灵就行，非常简单。

代码给你贴一份，直接拿去改：

// 假设你已经引入了GSAP库，比如通过CDN或者npm

// 在WordPress里通常是在functions.php里用wp_enqueue_script加载



app.renderer.plugins.interaction.on('pointerdown', (event) => {

    const pos = event.data.global;

    

    // 这里的sprite就是你的精灵对象

    // duration是持续时间，单位是秒

    // ease是缓动函数，默认是power1，可以改成elastic什么的更有弹性

    gsap.to(sprite, {

        x: pos.x,

        y: pos.y,

        duration: 1, 

        ease: "power2.out"

    });

});

记得在WordPress环境里加载脚本时，把GSAP的依赖关系填好，别到时候gsap is not defined了再来找bug。这方案比手写raf稳多了，性能也没得说。

2026-03-02 21:09