Three.js帧动画播放设置（暂停、快进、滚动条）播放设置(暂停、时间段、时间点)
本⽂是的11.3节
你可以通过剪辑、操作、混合器的属性或⽅法完成⼀些播放效果。
播放/暂停(.paused属性)
<button onclick="pause()"type="button" >暂停/继续</button>
<script>
// 暂停继续播放函数
function pause(){
if(AnimationAction.paused){
// 如果是播放状态，设置为暂停状态
AnimationAction.paused =false;
}else{
// 如果是暂停状态，设置为播放状态
AnimationAction.paused =true;
}
}
</script>
播放clip特定时间段
/**
js控制滚动条
* 播放编辑好的关键帧数据
*/
var mixer =new THREE.AnimationMixer(mesh);//创建混合器
var AnimationAction = mixer.clipAction(clip);//返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop =THREE.LoopOnce;//不循环播放
AnimationAction.clampWhenFinished =true;//暂停在最后⼀帧播放的状态
// 设置播放区间10~18  关键帧数据总时间是20
AnimationAction.time =10;//操作对象设置开始播放时间
clip.duration =18;//剪辑对象设置播放结束时间
AnimationAction.play();//开始播放
定位在某个时间点
// 开始结束时间设置为⼀样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time =10;//操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
/**
* 播放编辑好的关键帧数据
*/
var mixer =new THREE.AnimationMixer(mesh);//创建混合器
var AnimationAction = mixer.clipAction(clip);//返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop =THREE.LoopOnce;//不循环播放
AnimationAction.clampWhenFinished =true;//暂停在最后⼀帧播放的状态
// 开始结束时间设置为⼀样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time =10;//操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play();//开始播放
快进(按钮递增时间点)
<button onclick="pos()"type="button" >时间递增</button>
<script>
// 时间点设置函数
function pos(){
// 开始结束时间设置为⼀样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time +=2;//操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play();//开始播放
}
</script>
/**
* 播放编辑好的关键帧数据
*/
var mixer =new THREE.AnimationMixer(mesh);//创建混合器
var AnimationAction = mixer.clipAction(clip);//返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop =THREE.LoopOnce;//不循环播放
AnimationAction.clampWhenFinished =true;//暂停在最后⼀帧播放的状态
滚动条拖动播放帧动画
通过⼀个滚动条拖动播放帧动画，就像你观看视频⼀样，有⼀个视频条可以拖动。
关于前端滚动条的代码你可以随意⼀个都可以，课程案例中直接⽤的vue的element-ui的滚动条组件。
<div id="app">
<div class="block" >
<el-slider v-model="time"show-input:max=20:step=0.01></el-slider>
</div>
</div>
<script>
...
...
var mixer =new THREE.AnimationMixer(mesh);
var AnimationAction = mixer.clipAction(clip);
AnimationAction.loop =THREE.LoopOnce;
AnimationAction.clampWhenFinished =true;
//实例化vue
vm =new Vue({
el:"#app",
data:{
time:0,
},
watch:{
time:function(value){
// 开始结束时间设置为⼀样，相当于播放时间为0，直接跳转到时间点对应的状态        AnimationAction.time = value;//操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play();//开始播放
}
},
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。