前言

上节我们学习了帧动画，能够让物体进行动画，除此之外我们还能通过各种属性方法去控制动画的过程，本节我们就来学习一下常见的动画设置方法。

动画设置

播放暂停

最简单的动画设置就是播放与暂停了，具体的方法就是用AnimationAction的play与pause方法，我们可以写一个小案例，用按钮去控制动画的暂停、播放。

   <button id="btn" style="position: absolute; top: 10px">暂停</button>
    //action就是上节中的动画设置
    document.getElementById('btn').onclick = function(){
        action.paused = !action.paused;
     }

这里我们需要把按钮position设置为absolute，脱离文档流，不然我们的布局就会错乱。

快进

快进其实就是把动画过程中的事件时间点递增，首先通过Animation中time属性对动画的开始时间点进行增加，接着利用动画剪辑将动画持续时间设置为开始时间点，这样我们就能达到快进的效果。

     action.loop = THREE.LoopOnce;
     action.clampWhenFinished = true;
     function quick(step) {
        action.time += step;
        clip.duration = action.time;//定位到某一个时间点
        action.play();
      }

该方法看似很简单，也包含了好几个知识点，首先这里我们通过loop将动画循环去掉，然后将clampWhenFinished设置为true，该属性会让动画暂停到最后一帧。接着我们将播放定位到了某一个时间点，时通过将开始时间与结束时间设置为一样，此时播放时间为0，动画就是定位到了某一个时间点。action的time属性是开始时间，而duration动画播放时间的值就是结束时间。所以action的time与clip的duration之差就是时间段：

  // 播放5-10之间的动画
   action.time = 5;
   clip.duration = 10;

逐帧播放

知道了快进的方法，那么我们就能利用定位时间点将动画做到逐帧播放。将开始时间进行动态改变，结束时间等于开始时间也随着动态变化，动画就能随着定位到各个时间点，也就实现了逐帧播放。开始时间的变动我们可以借助element中的滑块去变动。

    <el-slider v-model="time" :max=10 :step=0.1 @change="handleChangeTime"></el-slider>
    
    export default {
  data(){
    time:0
  },
  methods:{
    handleChangeTime(val){
      action.time = val;
      clip.duration = action.time;
      action.play()
    }
  }
}

总结

以上就是动画设置的方法，快进与逐帧播放都用到了定位的思路，这点要求我们对相关属性比较熟悉，常用的属性一定要有印象。