WebGL BabylonJS 封装两点之间移动动画

最新推荐文章于 2024-07-20 18:16:53 发布

Axlxhxx

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量236

点赞数 3

本文链接：https://blog.csdn.net/creatlh/article/details/137277347

版权

该篇文章介绍了如何在BABYLON.js中利用CubicEase创建相机的平滑移动动画，通过控制半径和目标位置的动画参数，实现两点之间的过渡效果。

摘要由CSDN通过智能技术生成

两点之间过渡的缓动动画函数，可以调整相机半径调整相机远近。

实现如下：

export const moveTarget = async (
  camera: BABYLON.ArcRotateCamera,
  options: MoveTarget,
): Promise<void> => {
  const { position, radius, speed } = options

  const ease = new BABYLON.CubicEase()
  ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT)

  const animationParams = {
    speed,
    duration: 120,
    easingFunction: ease,
  }

  // 定义半径动画
  const radiusAnimation = animateProperty(camera, 'radius', camera.radius, radius, animationParams)

  // 定义目标动画
  const targetAnimation = animateProperty(
    camera,
    'target',
    camera.target,
    position,
    animationParams,
  )

  // 等待两个动画完成
  await Promise.all([radiusAnimation, targetAnimation])
}

// 辅助函数，用于创建并启动动画
export const animateProperty = (
  target: any,
  property: string,
  from: any,
  to: any,
  params: any,
): Promise<void> => {
  return new Promise((resolve) => {
    const animation = BABYLON.Animation.CreateAndStartAnimation(
      'animation',
      target,
      property,
      params.speed,
      params.duration,
      from,
      to,
      0,
      params.easingFunction,
    )

    animation?.waitAsync().then(() => {
      resolve()
    })
  })
}