three学习（二十九）—— 帧动画

前言

当我们想要将渲染物体动起来可以通过requestAnimateFrame去执行，如果想要物体进行动画就需要使用专门的API，本节我们就来学习一下。

帧动画

在three中有着一系列API去编辑操作动画，下面我们来介绍一下常见的四种操作API:

• 关键帧轨道(KeyframeTrack)：设置关键帧的序列。根据设置物体的属性，让其运动起来，类似于css中@keyframes，接收时间、属性值数组。构造器如下：

   KeyframeTrack( name, times, values, interpolation)
   //name--轨道的名称，也就是标识符
   //times - 时间数组，对应着运动时间，在内部会被转换为Float32Array类型
   //values - 属性值对应的数组，该数组中的值会跟时间数组值相对应。three中position由点表示，所以值数组比时间数组上是很正常的，具体要看属性值的表述
   //interpolation - 插值类型，类似于CSS动画中的运动曲线，默认是线性插值linear interpolation

• 动画剪辑（AnimationClip）：将多个关键帧剪辑成一个动画，类似于animation属性，具体语法：

   AnimationClip( name, duration, tracks)
   //name -- 剪辑名称
   //duration--动画持续时间
   //tracks--关键帧轨道合集

• 动画操作（AnimationActions）：设置动画的播放方式等行为，用来控制动画的开关，具体用法：

   AnimationAction( mixer, clip, localRoot)
   //mixer--动画混合器
   //clip--保存剪辑过的数据
   //localRoot--本地根对象

帧动画的操作需要用该方法操作，所以常用的属性与方法我们要能熟知：
loog:动画循环方式
time:动画开始时间
timeScale:动画播放速度
.play():播放动画
.stop():暂停动画

• 动画混合器(AnimationMixer):将多个拥有动画的对象混合到一起，共用混合器所设置的属性。

   AnimationMixer( rootObject )

.time:设置混合器时间。
.clipAction(clip,optionalRoot):返回clip动画的AnimationAction，clip是动画剪辑的名称或对象，通过返回的AnimationAction就能去操作混合器中对象的对象。
了解了上述四种API我们就能实现物体的动画效果，整体来说three中帧动画的设置跟CSS中animation设置思路差不多，总结下来就是设置关键帧轨道，组合成动画，用相关API去操作动画，如果设置了多个动画对象就可以使用混合器。

   const box1Geometry = new THREE.BoxGeometry();
const box1Material = new THREE.MeshBasicMaterial({ color: 0x8888 });
const box1 = new THREE.Mesh(box1Geometry, box1Material);
const box2Material = new THREE.MeshBasicMaterial({ color: 0x5124 });
const box2 = new THREE.Mesh(box1Geometry, box2Material);
box2.position.set(0, 2, 0);
box1.name = 'box1';
box2.name = 'box2';
//创建组对象
const group = new THREE.Group();
group.add(box1, box2);
scene.add(group);
//创建关键帧轨道 位置 颜色都可以
const time = [0, 5];
const value1 = [0, 0, 0, 2, 0, 0];
const value2 = [1, 1, 1, 0.5, 0.5, 0.5];
const pTrack = new THREE.KeyframeTrack('box1.position', time, value1);
const cTrack = new THREE.KeyframeTrack('box1.material.color', time, value2);
//将关键帧进行剪辑
const duration = 10;
const clip = new THREE.AnimationClip('boxClip', duration, [pTrack, cTrack]);
//播放
const mixer = new THREE.AnimationMixer(group)
const action = mixer.clipAction(clip)
action.timeScale = 10 //调整播放速度
action.play()
const clock = new THREE.Clock();
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  //必须在render中更新
  mixer.update(clock.getDelta());
}
render()

我们一定要在render函数中去更新混合器，不然就不会去播放。

总结

以上就是three中帧动画的实现，主要是运用四个相关的API，整体思路跟CSS动画有异曲同工之妙。