让一个车轮动起来分三步
1 .定义动画
const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// 动画的名字
// 动画的属性:将要变化的值
// 动画帧数:上面直接是60帧拉满
// 动画类型属性:就是变化值的类型,比如是浮点数,矩阵,颜色,二维向量,三维向量
// 循环模式:
1 .注意这里的帧数和下面的帧数组有很大的关系
2 .插入变化的帧数
const wheelKeys=[]
wheelKeys.push({
frame:0,
value:0,
})
//开始时候的数据,这里一般都不变
//变化的第二阶段
wheelKeys.push({
frame:60,
value:Math.PI
})
animWheel.setKeys(wheelKeys)
//将帧数组绑定要之前定义的动画实例上
1 .由于上面是60帧,所以这里的frame是60,就代表一秒钟之后,我们想让物体产生的变化
2 .如果想要定义2秒之后的状态,那么就是60*2
3 .如果是60/3,那么其实就是1/3秒的时候物体的变化到哪里了,什么程度了
3 .将动画绑定到运动的物体上
1 .定义好了动画,还需要把动画用到物体上
box.animations.push(animWheel)
//把动画推到他的数组里面就可以了
4 .播放动画
1 .想要播放一次完成的效果,第三个值一定要和帧数组里面的frame一样,不然动画其实执行了一半的
scene.beginAnimation(box,0,60*20,true)
2 .所以当我定义一个60秒内才让他旋转一圈的动画,我需要这样做.模仿钟表的秒针
const wheelKeys=[]
wheelKeys.push({
frame:0,
value:0,
})
wheelKeys.push({
frame:60*60,
value:Math.PI
})
scene.beginAnimation(box,0,60*60,true)
网友评论