Skip to content

S-动画对象

信息

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

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

属性

currentTime

默认值:0

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


playState

默认值:GameAnimationPlaybackState.PENDING

当前动画播放状态


playbackRate

默认值:1

每tick动画播放速度


startTime

默认值:0

动画开始的时间tick


target

动画作用的对象

方法

play()

播放或者恢复动画的播放

输入参数

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

cancel()

暂停动画的播放


keyframes()

获取所有的动画关键帧

返回值

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

onFinish()

当动画结束播放时触发

输入参数

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

onReady()

当动画开始播放时触发

输入参数

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

接口

GameAnimationEvent

动画事件

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

GameAnimationPlaybackConfig

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

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

GameAnimationPlaybackState

动画播放状态

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

示例代码

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('兜圈结束')
})