Three.js帧动画播放设置(暂停、快进、滚动条)

播放设置(暂停、时间段、时间点)

本文是Three.js电子书的11.3节

你可以通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer的属性或方法完成一些播放效果。

播放/暂停(.paused属性)

<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>  

播放clip特定时间段

/**
 * 播放编辑好的关键帧数据
 */
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" style="position: absolute;padding: 10px;">时间递增</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" style="display:inline;width:500px">
    <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>