一、播放设置(暂停、时间段、时间点)
1. 播放/暂停(.paused属性)
javascript
<button onclick="pause()" type="button" style="position: absolute;padding: 10px;">暂停/继续</button>
<script>
// 暂停继续播放函数
function pause() {
if (AnimationAction.paused) {
// 如果是播放状态，设置为暂停状态
AnimationAction.paused = false;
} else {
// 如果是暂停状态，设置为播放状态
AnimationAction.paused = true;
}
}
</script>2. 播放clip特定时间段
javascript
/**
* 播放编辑好的关键帧数据
*/
const mixer = new THREE.AnimationMixer(mesh); //创建混合器
const 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(); //开始播放3. 定位在某个时间点
javascript
// 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time = 10; //操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间javascript
/**
* 播放编辑好的关键帧数据
*/
const mixer = new THREE.AnimationMixer(mesh); //创建混合器
const 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(); //开始播放4. 快进(按钮递增时间点)
javascript
<button onclick="pos()" type="button" style="position: absolute;padding: 10px;">时间递增</button>
<script>
// 时间点设置函数
function pos() {
// 开始结束时间设置为一样，相当于播放时间为0，直接跳转到时间点对应的状态
AnimationAction.time += 2; //操作对象设置开始播放时间
clip.duration = AnimationAction.time;//剪辑对象设置播放结束时间
AnimationAction.play(); //开始播放
}
</script>javascript
/**
* 播放编辑好的关键帧数据
*/
const mixer = new THREE.AnimationMixer(mesh); //创建混合器
const AnimationAction = mixer.clipAction(clip); //返回动画操作对象
// AnimationAction.timeScale = 5; //默认1，可以调节播放速度
AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.clampWhenFinished = true; //暂停在最后一帧播放的状态5. 滚动条拖动播放帧动画
- 通过一个滚动条拖动播放帧动画，就像你观看视频一样，有一个视频条可以拖动。
vue
<div id="app">
<div class="block" style="display:inline;width:500px">
<el-slider v-model="time" show-input :max=20 :step=0.01></el-slider>
</div>
</div>
<script>
const mixer = new THREE.AnimationMixer(mesh);
const 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>