ReactPixi 如何为精灵制作动画

Question

我想为精灵的运动设置动画。 我的项目比较复杂，但当我使用 React 组件时，我什至无法使其工作，甚至无法思考如何在这个简单的示例中做到这一点。基本上我的目标是在初始化时将一些精灵向上移动，一些向下移动，但所有这些不仅仅是将它们捕捉到所需的位置，而是将它们平滑地动画化以移动到所需的位置。最好的情况是，如果 Pixi.js 上有我缺少的任何库或属性，它可以让我有权设置对象的转换（例如“x”、“y”、“旋转”）并给予它就像 CSS 中的过渡一样。

    <Stage width={size.width} height={size.width * (1597 / 2486)}>
      <Sprite
        image='img/parallax/fog_1.png'
        x={0}
        y={0}
        width={size.width}
        height={size.width}
      />
    </Stage>

感谢您的任何建议。

Answer 1

好吧，我做了一些挖掘，发现 GSAP 引入了一个 PIXI 插件，所以它现在是兼容的，如果你从 @gsap/react 导入 useGSAP 钩子，你甚至可以在 React 中使用它。这是他们展示一些如何使用它的示例的主题带有示例的主题