Three.js 快速入门教程 09 - 动画效果与过渡效果

在 3D 可视化项目中适当使用动画和过渡效果，可以让模型的状态切换更加自然，使用户界面更生动有趣，增强用户与应用程序的交互感。更进一步的，动画和过渡效果应用于讲故事或展示产品，可增强故事叙述的效果，吸引用户的注意力，例如场景漫游。

本篇章将分别通过 Three.js 自带的关键帧动画AnimationClip，以及三方库 tween.js 来实现动画效果和过渡效果

关键帧

开始先介绍下 关键帧 和 关键帧动画 的概念

• 关键帧定义了动画中的关键点或转折点。关键帧可以包含物体的位置、旋转、缩放或其他属性的值。

• 关键帧动画是一种基于关键帧的动画制作方法。它通过在起始帧和终止帧之间定义一系列关键帧，使动画在这些关键帧之间进行插值，从而创建出连续的动画效果。每个关键帧都指定了物体在某个特定时间点的属性状态。系统会自动计算这些关键帧之间的过渡效果，使得动画在时间上平滑过渡。

动画效果

创建关键帧动画

在创建关键帧动画前，先要给需要设置关键帧动画的模型命名。注意如果是通过模型文件加载的模型，可能在建模软件中已经命名过了。

mesh.name = "Car";

在创建关键帧时，就可以用模型名+属性名形式设置要发生改变的属性

// 五秒内模型的属性将从红(1, 0, 0)逐渐变成蓝(0, 0, 1)
const keyframeTrack = new THREE.KeyframeTrack("Car.material.color", [0, 5], [1, 0, 0, 0, 0, 1]);

注意这里的颜色是由 3 组 0-1 之间的值，来表示 rgb 三个颜色通道分量

除了指定开始帧和结束帧，中间还可以插入更多帧得到更复杂的动画效果

// 五秒内模型的属性将从红(1, 0, 0)逐渐变成蓝(0, 0, 1)，下一个五秒内从蓝(0, 0, 1)逐渐变成红(1, 0, 0)
const keyframeTrack = new THREE.KeyframeTrack(
  "Car.material.color",
  [0, 5, 10],
  [1, 0, 0, 0, 0, 1, 1, 0, 0],
);

创建动画剪辑

可以将多个关键帧动画对象作为一个组，放入同一个动画剪辑AnimationClip中

// 名称为AnimationClip，持续时间5秒
const animat