猫史档案馆

观前提示：本人第一次做教程 若有错误麻烦指正

————教程开始————

首先，我们为什么要使用动画？

开发API里对动画是这样介绍的：

Animation 动画，可对World世界、Entity实体及Player玩家等对象添加动画。动画将在本地播放运行，获得更好的性能，播放更流畅、平滑。

简单来说，动画能让实体等的运动更顺滑

举个例子：

如果我现在想让世界下雨，那么我就有两种选择：

//选择1
world.rainDensity=10

//选择2
world.animate([
        {rainDensity:0},
        {rainDensity:10},
    ],{
    duration: 16*50, 
    iterations: 1,
    direction: Box3AnimationDirection.NORMAL,
})

选择一：直接更改world.rainDensity的值，方便但十分粗糙，雨是突然成片降下的

选择二：运用动画，代码有点长但是能让效果更流畅，雨是一点一点变大的

这就是动画的好处。

说了这么多，具体介绍一下该如何使用动画

以下代码的运行效果是让一个实体平移

const pingTai = world.querySelector('#平台-1');
pingTai.animate([
        { position: [10,10,24] },//第一节点
        { position: [20,10,24] },//第二节点
    ],{
    duration: 16, //动画播放时间=>    16帧=1秒
    iterations: 1,//动画只播放1次
    direction: Box3AnimationDirection.NORMAL,
})

第一行代码，获取已经摆放好的‘平台-1’实体

 

pingTai.animate([],{})

这行代码是调用animate

 

{ position: [10,10,24] },//第一节点
{ position: [20,10,24] },//第二节点



/*如何解决动画节点过多？
pingTai.onFinish(() => {//当动画结束播放时
    //继续往下写你想实现的效果
})
*/

这边是动画的主要部分，可以这样理解，每一个{ }都是一个时间节点，根据你的需要在{ }中填入对应代码，代码会从上往下执行，向下一个时间节点进行过度。时间节点是有限的，最多16个，如果超出就会报错，可如果动画太长了必须要超出该怎么办呢？很简单，在动画结束的时候新建一个动画。

如上代码，第一节点是pingTai的坐标[10,10,24]，第二节点是pingTai即将到达的坐标[20,10,24]，运行时动画会让pingTai从第一节点的坐标逐步移向第二节点的坐标。刚才说了，{ }中不止可以填写坐标，还有很多别的东西，例如meshColor，meshScale等，更多的效果请在开发API文档中寻找答案。

值得注意的是，如果pingTai的初始坐标不是第一节点所写的，那么运行时它会先瞬移到第一节点再执行如上操作。

 

duration: 16, //动画播放时间=>    16帧=1秒
iterations: 1,//动画只播放1次
direction: Box3AnimationDirection.NORMAL,//播放方向

这里第一行的duration指的是动画播放时间，以帧为单位（16帧为1秒），

第二行的iterations指的是动画播放次数，

第三行的direction指的是动画播放方向，NORMAL是普通，WRAP指循环，还有许多不同的方向，具体可查阅开发API文档

 

接下来要说的是一些注意事项：

1.虽然动画能实现很多效果，但千万不要把所有的效果都用动画来实现，如果极多动画同时播放，会导致报错

2.在同一个节点{ }中，可以插入很多种效果

3.动画不仅可以用在实体上，还可以用在world和player上

4.想不到了：(

 

对于刚投入于创作的萌新来说，以上的教程应该已经足够用了，动画的用法有很多，这只是冰山一角，如果要实现更好的效果，还需要更深入的学习。最后，如果有错，请立即指出，谢谢。