当前位置: 首页 > 工具软件 > Animation.js > 使用案例 >

babylon.js 基本动画

赵镜
2023-12-01

无论实现什么动画,它都必须考虑所需的动作、时间、产生所需流动性所需的帧数和序列中的关键点。动画由一系列图像、帧生成,这些图像、帧一个接一个地显示。

创建动画:

const myAnim = new BABYLON.Animation(name, property, frames_per_second, property_type, loop_mode)

name - string: 动画名称
property - string:动画将应用到的对象的属性。例如,此处改变的是scaling.x属性
frames per second - number: 每秒动画帧数,(与每秒场景渲染帧数无关)
property type - number: 属性参数的属性类型。
这可以使用以下常量进行设置:
    BABYLON.Animation.ANIMATIONTYPE_COLOR3
    BABYLON.Animation.ANIMATIONTYPE_FLOAT
    BABYLON.Animation.ANIMATIONTYPE_MATRIX
    BABYLON.Animation.ANIMATIONTYPE_QUATERNION
    BABYLON.Animation.ANIMATIONTYPE_VECTOR2
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3
loop mode - number optional: 可以使用以下参数设置:
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE - 从初始值重新启动动画
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT - 在最终值处暂停动画
BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE - 使用键值渐变重复动画递增

设置关键帧:

这是一个数组,对象的 myKeys。每个对象具有以下两个属性:

frame:帧号

value:对于要更改的属性

构建完成后,将其添加到动画中。

myAnim.setKeys(myKeys);

开始动画:

将其添加到动画数组属性

mesh.animations.push(myAnim)

参数详情:

scene.beginAnimation(target, from, to);

target:要添加动画的对象

from:开始动画的帧

to:结束动画的帧

如果想要动画循环播放,就将第四个参数设置为 true,默认值为 false

scene.beginAnimation(target, from, to, true)

 demo  :    Animation Examples | Babylon.js Playground (babylonjs.com)

 还有以下方法可选:

  • pause()  暂停
  • restart()  重启
  • stop()  停止
  • reset()  重置

demo :5秒后停止动画(stop())   Animation Examples | Babylon.js Playground (babylonjs.com)

 类似资料: