threejs关键帧动画播放(拖动任意时间状态)

参考资料：threejs中文网

threejs qq交流群：814702116

动画播放(拖动任意时间状态)

如果你想了解,关键帧动画在特定时间段播放，或者把动画定位在时间轴上任何一个时刻，或者借助UI拖动条，拖动查看关键帧任何时刻的状态，可以学习本节课。

控制动画播放特定时间段

AnimationClip参数2设置为6，执行AnimationAction.play()，默认播放0~6秒之间的关键帧动画。AnimationClip参数2的值会作为自身.duration属性的值。

const clip = new THREE.AnimationClip("test", 6, [posKF, colorKF]);
console.log('clip.duration',clip.duration);

从时间轴上选择时间段播放动画，开始时刻AnimationAction.time，结束时刻AnimationClip.duration。

//AnimationAction设置开始播放时间：从1秒时刻对应动画开始播放
clipAction.time = 1; 
//AnimationClip设置播放结束时间：到5秒时刻对应的动画状态停止
clip.duration = 5;

注意.loop和.clampWhenFinished对播放效果的影响,如果需要上面代码完全起作用，要设置非循环模式，同时动画播放完，物体停留在结束状态，而不是回到开始状态。

//不循环播放
clipAction.loop = THREE.LoopOnce; 
// 物体状态停留在动画结束的时候
clipAction.clampWhenFinished=true;

查看时间轴上任意时间动画状态

把动画设置为暂停状态，然后你可以通过AnimationAction.time把动画定格在时间轴上任何位置。

//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;
clipAction.time = 1;//物体状态为动画1秒对应状态
clipAction.time = 3;//物体状态为动画3秒对应状态

拖动条拖动显示动画任意时刻模型状态

默认是播放的，可以预先暂停，再通过拖动条控制。

//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;

gui辅助快速创建一个可交互拖动条，调整模型停留在任何选定时间点状态。实际开发时候，你可以通过vue或react的UI组件库实现拖动条。

import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI(); //创建GUI对象
gui.add(clipAction, 'time', 0, 6);

设置步长

gui.add(clipAction, 'time', 0, 6).step(0.1);

动画下一步状态

//在暂停情况下，设置.time属性,把动画定位在任意时刻
clipAction.paused = true;

下一步按钮

<div id="bu" class="bu">下一步</div>

点击按钮，模型调整到time累加0.1秒对应的动画状态。

const bu = document.getElementById('bu');
bu.addEventListener('click', function () {
  clipAction.time += 0.1; 
})