说明
补间动画指的是，我们可以通过为精灵的位置、比例、透明度，等属性，设置开始值和结束值，制作动画，动画中间需要的部分由软件自动计算填充。
Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义补间效果，可以使用这两个库中的其中一个。但是现在我们要使用的是一个名为 Charm.js 的专门用于 Pixi 的补间库。
使用 Charm 库
要开始使用 Charm ，首先直接用 script 标签，引入 js 文件
然后创建它的实例
变量 现在代表 Charm 实例。
和前面的文章中讲到的粒子效果一样，在调用 state 函数之后，必须为游戏循环中的每个帧更新补间。就是在游戏循环中调用 Charm 的 update 方法，如下所示：
滑动补间
Charm 最有用的补间效果之一是 slide 。使用 slide 方法可以使精灵从画布上的当前位置平滑移动到任何其他位置。slide 方法有七个参数，但只有前三个参数是必需的。
| 名称 | 默认值 | 描述 |
|---|---|---|
| anySprite | 需要移动的精灵 | |
| finalXPosition | 滑动结束时 x 坐标 | |
| finalYPosition | 滑动结束时 y 坐标 | |
| durationInFrames | 60 | 补间需要的帧数，也就是动画应该持续多长时间 |
| easingType | 缓动类型 | |
| yoyo | false | 用于确定精灵是否应在补间的起点和终点之间来回移动。 |
| delayTimeBeforeRepeat | 0 | 一个以毫秒为单位的数字，用于确定精灵 之前的延迟时间。 |
示例：
以下是如何使用 slide 方法使精灵用120帧从原始位置移动到坐标为(128,128)的位置的关键代码。
效果图：
以下是关键代码：
在一个真实的项目中，你可以为每个容器填充每个场景所需的精灵数量，你也可以为你的项目添加尽可能多的场景容器。
接下来，将 移开，使其位于画布的右边缘之外。代码如下所示：
这将在画布上显示 ，而 在需要时会从左侧滑出，如下所示。
查看示例
时间过渡
你可以自定义一个 函数在设定的时间间隔后进行过渡。
要使用 ，请为其提供一个参数，它代表你希望等待的时间（以毫秒为单位）。以下是在延迟1秒（1000毫秒）后从 过渡到 的方法。
查看示例
其实在 Charm 库中已经定义了 wait 这个方法，原理和上面的 wait 函数是一样的。你可以这样使用它。
c.wait(1000).then(() => { c.slide(sceneTwo, 0, 0声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！