Skip to content

动画对象

信息

GameAnimation,作为 animate() 方法的统一返回类型,支持后续的动画操作。

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

属性

currentTime

默认值:0

动画的当前播放时间(多少动画帧)

定义于 #L9586


playState

默认值:GameAnimationPlaybackState.PENDING

当前动画播放状态

定义于 #L9594


playbackRate

默认值:1

每tick动画播放速度

定义于 #L9598


startTime

默认值:0

动画开始的时间tick

定义于 #L9590


target

动画作用的对象

定义于 #L9560

方法

play()

播放或者恢复动画的播放

输入参数

参数必填默认值类型说明
playbackPartial‹GameAnimationPlaybackConfig›播放的参数

定义于 #L9568


cancel()

暂停动画的播放

定义于 #L9572


keyframes()

获取所有的动画关键帧

返回值

类型说明
Partial‹KeyframeType›[]已配置的动画关键帧列表

定义于 #L9564


onFinish()

当动画结束播放时触发

输入参数

参数必填默认值类型说明
handlerfunction监听到动画播放完毕时的处理函数

定义于 #L9581


onReady()

当动画开始播放时触发

输入参数

参数必填默认值类型说明
handlerfunction监听到动画开始播放时的处理函数

定义于 #L9576

接口

GameAnimationEvent

动画事件

参数类型说明
animationGameAnimation动画对象
targetTargetType播放动画的目标对象
cancelledboolean动画是否被取消
ticknumber事件发生时间

定义于 #L13087


GameAnimationPlaybackConfig

用于动画播放配置的参数组

参数类型说明
delaynumber播放延迟
directionGameAnimationDirection播放方向
durationnumber播放时长
endDelaynumber结束延迟
iterationStartnumber反复播放开始时间
iterationsnumber反复播放次数
startTicknumber开始时间

定义于 #L9547


GameAnimationPlaybackState

动画播放状态

属性说明
FINISHED已完成
PENDING挂起等待
RUNNING播放中

定义于 #L9523

示例代码

javascript
//先从模型库搜索"电梯"的模型, 并把它拖入场景中
const elevator = world.querySelector('#电梯-1') //获取电梯板实体
elevator.fixed = true//不受外力影响
elevator.collides = true//允许碰撞
const startPos = [64, 11, 64]//电梯的最低位置
const endPos = [64, 50, 64]//电梯的最高位置

const ani = elevator.animate([// 1+5+1+2=9, 总时间15秒被切成9份
  { position: startPos, duration: 1 },// 1/9 的时间停留在地面
  { position: startPos, duration: 5 },// 5/9 的时间用于地面往楼顶移动
  { position: endPos, duration: 1 },// 1/9 的时间停留在楼顶
  { position: endPos, duration: 2 },// 2/9 的时间从楼顶回到地面
], {
  duration: 16 * 15, //播放一个循环共用时15秒,
  iterations: 1,//动画只播放1次
  direction: GameAnimationDirection.WRAP,//让动画实体从终点回到起点
})

ani.onReady(() => {//当动画开始播放时
  world.say('电梯准备启动')
})

ani.onFinish(() => {//当动画结束播放时
  world.say('电梯自己停了')
})

world.onPress(({ button }) => {
  if (button === GameButtonType.ACTION0) {//左键重新播放动画
    ani.play({
      duration: 16 * 15, //播放一个循环共用时15秒(每秒16帧),
      iterations: Infinity,//动画无限次循环播放
      direction: GameAnimationDirection.WRAP,//让动画实体从终点回到起点
    })
  }
  else if (button === GameButtonType.ACTION1) {//右键停止动画
    ani.cancel()
  }
})

javascript
//先从模型库搜索"单元方块"的模型, 并把它拖入场景中
const vox = world.querySelector('#单元方块-1') //获取实体
vox.meshScale = vox.meshScale.scale(4) //让实体变大4倍

const ani = vox.animate([
  { position: [0, 12, 0], meshColor: [1, 1, 0, 1] },
  { position: [0, 12, 127], meshColor: [1, 0, 0, 1] },
  { position: [127, 12, 127], meshColor: [0, 1, 0, 1] },
  { position: [127, 12, 0], meshColor: [0, 0, 1, 1] },
], {
  iterations: 3,//兜3圈
  direction: GameAnimationDirection.WRAP,//从终点回到起点
  duration: 16 * 5, //兜一圈5秒(每秒16帧)
})

ani.onReady(() => {//当动画开始播放时
  world.say('开始兜圈')
})

ani.onFinish(() => {//当动画结束播放时
  world.say('兜圈结束')
})