基于路径集合的三维动画链

目前数据信息可视化的发展趋势越来越快，纬度宽广、数量庞大、结构复杂的数据展示仅仅只依靠二维平面图表已经不能满足了。为了更加清晰，快速的认知和理解一份数据，构建基于现实的三维虚拟可视化效果，被广泛应用到各行业中，迅速成为信息数字化管理的重要组成部分。
 
三维场景还原了现实的虚拟效果，而各种各样的动画则赋予其更加饱满、灵动的视觉冲击。基于路径集合的三维动画链，它充实了场景中元素的动画效果，接下来我会具体介绍动画链的实现过程。

1、配置路径数据

此次示例中模型均采用gltf格式，以上图场景中小车为例，在模型加载完成后，我们定义配置好一系列的路径点（animatePath），让小车按照该路径执行动画。

scene.loadGLTF('./static/gltf/car1/1.gltf', {
  generateTangent: true,
  useIBLWhenMissingTexture: true,
  loadTexture: true,
}).then((data) => {
  const element = data.root;
  element.scale = [0.1, 0.1, 0.1];
  element.ry = Math.PI;
  element.position = [98, 1.5, -125];
  
  const { y } = element;
  const animatePath = [
    [98, y, -135],
    [50, y, -135],
    [10, y, -95],
    [-30, y, -125]
  ]
  
  // 创建动画链
  element.animate = this.createPathAnimates(element, animatePath, () => {
    // 动画链结束后的处理
    ... ...
  });
  
  element.animate.play();
})

其中animatePath的配置，为了满足不同的场景需求，我们可以通过各种方式去实现它的定义；
例如：

• 在场景中通过可视化的打点操作形成路径
• 在该场景元素的属性面板中，进行JSON数据的配置
• 对于精准规范的路径，可以通过接口返回的数据处理
• ... ...

2、创建动画链

实现小车路径集合的动画链，在遍历路径的时候，需要注意两个过程，一个是小车的moveAnimate（小车沿路径移动的动画），另一个则是每一次moveAniamte之前的rotationAniamte（小车在下一段路径动画前的朝向动画）；

createPathAnimates(element, points, done) {
  // 声明一个有序的动画集合，方便后面进行动画链处理
  const animates = [];
  if (points && points.length > 0) {
    // 获取小车的初始位置和旋转角度
    let { x, y, z } = element;
    let angle = element.ry;
    for (let i = 0, len = points.length; i < len; i++) {
      const point = points[i];
      const x1 = point[0];
      const z1 = point[2];
      // 计算下一段与上一段之间的角度，创建rotateAnimate 
      const rotate = Math.atan2(-(z1 - z), x1 - x);
      const rotateAnimate = this.createRotateAnimate(element, rotate, angle);
      if (rotateAnimate) {
        animates.push(rotateAnimate);
        angle = rotateAnimate.toAngle;
      }
      // 创建moveAnimate 
      const moveAnimate = this.createMoveAnimate(element, [x, z], [x1, z1]);
      if (moveAnimate) {
        animates.push(moveAnimate);
        x = x1;
        z = z1;
      }
    }
  }

  // done为动画链接结束后的回调处理函数
  animates[animates.length - 1].onDone = done;
  let animate;
  for (let i = 0, len = animates.length; i < len; i++) {
    if (i > 0) {
      animates[i - 1].chain(animates[i]);
    } else {
      animate = animates[i];
    }
  }

  return animate;
}

2.1、rotationAniamte

通过Math.atan2()方法，获取相对的偏移弧度：

与小车的当前弧度进行比较创建rotationAnimate：

createRotateAnimate(element, toAngle, angle) {
  if (toAngle !== angle) {
    if (toAngle - angle > Math.PI) {
      toAngle -= Math.PI * 2;
    }
    if (toAngle - angle < -Math.PI) {
      toAngle += Math.PI * 2;
    }
  }
  const rotateAnimate = new Animate({
    from: angle,
    to: toAngle,
    type: 'number',
    dur: Math.abs(toAngle - angle) * 300,
    easing: 'easeNone',
    onPlay() {
      element.animate = this;
    },
    onUpdate(value) {
      element.ry = value + (Math.PI / 2);
    },
  });
  rotateAnimate.toAngle = toAngle;
  return rotateAnimate;
}

2.2、moveAnimate

通过上一段与下一段的point创建moveAniamte：

createMoveAnimate(element, [x, z], [x1, z1]) {
  return new Animate({
    from: [x, z],
    to: [x1, z1],
    type: 'point',
    dur: Math.sqrt((x1 - x) ** 2 + (z1 - z) ** 2) * 100 || 100,
    easing: 'easeNone',
    onUpdate(value) {
      const [x, z] = value;
      element.position = vec3.fromValues(x, element.y, z);
    },
  });
}

2.3、动画链式衔接

处理好对应的rotationAniamte和moveAnimate后，采用动画实例对象的chain方法进行链式衔接，最终的动画实力对象就能够实现我们的动画效果了，同时可以处理动画链结束后的其他操作：

createPathAnimates(element, points, done) {
  // 声明一个有序的动画集合，方便后面进行动画链处理
  const animates = [];
  ... ...
  // done为动画链接结束后的回调处理函数
  animates[animates.length - 1].onDone = done;
  let animate;
  for (let i = 0, len = animates.length; i < len; i++) {
    if (i > 0) {
      animates[i - 1].chain(animates[i]);
    } else {
      animate = animates[i];
    }
  }

  return animate;
}

3、动画链效果

以上述示例来说，最终小车的动画效果：

至此，一个基于路径集合的动画链就完成了，实现的原理也并不复杂；有了这样的动画链机制，我们就可以实现以路径为核心的不同的动画效果，广泛应用到各种动画需求的场景当中。

例如，仓库中的作业流程：

除了把路径动画链应用到场景元素上，我们还可以应用到三维场景的镜头上面，这样一来就能够实现巡航的动画效果：

如果大家有好的想法，可以微信：541002349 讨论。

也欢迎关注公众号“ITman彪叔”，接收更多消息。