基于路径集合的三维动画链
1、配置路径数据2、创建动画链2.1、rotationAniamte2.2、moveAnimate2.3、动画链式衔接3、动画链效果
目前数据信息可视化的发展趋势越来越快，纬度宽广、数量庞大、结构复杂的数据展示仅仅只依靠二维平面图表已经不能满足了。为了更加清晰，快速的认知和理解一份数据，构建基于现实的三维虚拟可视化效果，被广泛应用到各行业中，迅速成为信息数字化管理的重要组成部分。
三维场景还原了现实的虚拟效果，而各种各样的动画则赋予其更加饱满、灵动的视觉冲击。基于路径集合的三维动画链，它充实了场景中元素的动画效果，接下来我会具体介绍动画链的实现过程。
1、配置路径数据
此次示例中模型均采用gltf格式，以上图场景中小车为例，在模型加载完成后，我们定义配置好一系列的路径点（animatePath），让小车按照该路径执行动画。
1scene.loadGLTF('./static/gltf/car1/1.gltf', {
2 generateTangent: true,
3 useIBLWhenMissingTexture: true,
4 loadTexture: true,
5}).then((data) => {
6 const element = data.root;
7 element.scale = [0.1, 0.1, 0.1];
8 element.ry = Math.PI;
9 element.position = [98, 1.5, -125];
10
11 const { y } = element;
12 const animatePath = [
13 [98, y, -135],
14 [50, y, -135],
15 [10, y, -95],
16 [-30, y, -125]
17 ]
18
19 // 创建动画链
20 element.animate = this.createPathAnimates(element, animatePath, () => {
21 // 动画链结束后的处理
22 ... ...
23 });
24
25 element.animate.play();
26})
其中animatePath的配置，为了满足不同的场景需求，我们可以通过各种方式去实现它的定义；
例如：
在场景中通过可视化的打点操作形成路径
在该场景元素的属性面板中，进行JSON数据的配置
对于精准规范的路径，可以通过接口返回的数据处理
… …
2、创建动画链
实现小车路径集合的动画链，在遍历路径的时候，需要注意两个过程，一个是小车的moveAnimate（小车沿路径移动的动画），另一个则是每一次moveAniamte之前的rotationAniamte（小车在下一段路径动画前的朝向动画）；
1createPathAnimates(element, points, done) {
2 // 声明一个有序的动画集合，方便后面进行动画链处理
3 const animates = [];
4 if (points && points.length > 0) {
5 // 获取小车的初始位置和旋转角度
6 let { x, y, z } = element;
7 let angle = element.ry;
8 for (let i = 0, len = points.length; i < len; i++) {
9 const point = points[i];
10 const x1 = point[0];
11 const z1 = point[2];
12 // 计算下一段与上一段之间的角度，创建rotateAnimate
13 const rotate = Math.atan2(-(z1 - z), x1 - x);
14 const rotateAnimate = this.createRotateAnimate(element, rotate, angle);
15 if (rotateAnimate) {
16 animates.push(rotateAnimate);
17 angle = rotateAnimate.toAngle;
18 }
19 // 创建moveAnimate
20 const moveAnimate = this.createMoveAnimate(element, [x, z], [x1, z1]);
21 if (moveAnimate) {
22 animates.push(moveAnimate);
23 x = x1;
24 z = z1;
25 }
26 }
27 }
28
29 // done为动画链接结束后的回调处理函数
30 animates[animates.length - 1].onDone = done;
31 let animate;
32 for (let i = 0, len = animates.length; i < len; i++) {
33 if (i > 0) {
34 animates[i - 1].chain(animates[i]);
35 } else {
36 animate = animates[i];
37 }
38 }
39
40 return animate;
41}
2.1、rotationAniamte
通过Math.atan2()方法，获取相对的偏移弧度：
与小车的当前弧度进行比较创建rotationAnimate：
1createRotateAnimate(element, toAngle, angle) {
2 if (toAngle !== angle) {
3 if (toAngle - angle > Math.PI) {
4 toAngle -= Math.PI * 2;
5 }
6 if (toAngle - angle < -Math.PI) {
7 toAngle += Math.PI * 2;
8 }
9 }
10 const rotateAnimate = new Animate({
11 from: angle,
12 to: toAngle,
13 type: 'number',
14 dur: Math.abs(toAngle - angle) * 300,
15 easing: 'easeNone',
16 onPlay() {
17 element.animate = this;
18 },
19 onUpdate(value) {
20 element.ry = value + (Math.PI / 2);
21 },
22 });
23 rotateAnimate.toAngle = toAngle;
24 return rotateAnimate;
25}
2.2、moveAnimate
通过上一段与下一段的point创建moveAniamte：
1createMoveAnimate(element, [x, z], [x1, z1]) {
2 return new Animate({
3 from: [x, z],
4 to: [x1, z1],
5 type: 'point',
6 dur: Math.sqrt((x1 - x) ** 2 + (z1 - z) ** 2) * 100 || 100,
7 easing: 'easeNone',
8 onUpdate(value) {
9 const [x, z] = value;
10 element.position = vec3.fromValues(x, element.y, z);
11 },
12 });
13}
2.3、动画链式衔接
处理好对应的rotationAniamte和moveAnimate后，采用动画实例对象的chain方法进行链式衔接，最终的动画实力对象就能够实现我们的动画效果了，同时可以处理动画链结束后的其他操作：
1createPathAnimates(element, points, done) {
2 // 声明一个有序的动画集合，方便后面进行动画链处理
3 const animates = [];
4 ... ...
5 // done为动画链接结束后的回调处理函数
6 animates[animates.length - 1].onDone = done;
7 let animate;
8 for (let i = 0, len = animates.length; i < len; i++) {
9 if (i > 0) {
10 animates[i - 1].chain(animates[i]);
11 } else {
12 animate = animates[i];
13 }
14 }
15
16 return animate;
17}
3、动画链效果
以上述示例来说，最终小车的动画效果：
至此，一个基于路径集合的动画链就完成了，实现的原理也并不复杂；有了这样的动画链机制，我们就可以实现以路径为核心的不同的动画效果，广泛应用到各种动画需求的场景当中。
例如，仓库中的作业流程：
除了把路径动画链应用到场景元素上，我们还可以应用到三维场景的镜头上面，这样一来就能够实现巡航的动画效果：