快速上手 Reality Composer Pro 的 Timelines 功能,轻松添加动画

了解 Reality Composer Pro 中的 Timelines 功能

快速上手 Reality Composer Pro 的 Timelines 功能,轻松添加动画

在 WWDC23 上,苹果发布了面向专业开发者的 Reality Composer Pro,帮助人们完成 visionOS 上的 3D 内容开发。让人意外的是,在 iPad 版本的 Reality Composer 上,可以通过 Behavior 模块为 3D 模型添加动画,而在专业版本的 Reality Composer Pro 上反而缺失了该功能。

在 WWDC24 上,苹果发布了 Xcode 15 更新,Reality Composer Pro 也获得了一项新功能——Timelines。这个功能可以为你的 3D 模型添加动画效果,使得在专业版本中实现动画变得更加方便和强大。


Timelines 功能模块能做什么?

在之前的文章中,我像你介绍了 3D 模型的动画可以分为模型自身的动画模型在空间中移动的动画

visionOS 开发 / 使用 RealityKit 播放动画(一)
了解如何使用 RealityKit 在 3D 模型上播放动画。

Reality Composer Pro 的 Timelines 功能模块:

  • 可以用于为 3D 模型添加在空间中移动的动画
  • 无法为 3D 模型添加自身动画(例如一条鱼的游动,机器人移动过程中的摆臂等)。

理解清楚 Reality Composer Pro 能做什么/不能做什么,能够帮助我们更好的去使用它。


认识 Timelines 功能模块

Timelines 是 Reality Composer Pro(随 Xcode 15 一起安装) 中的一个全新功能,你可以在其中按照时间顺序执行特定的动作(Actions),或者在特定时间节点执行特定动作。

点击 Create Timeline 以创建一个新的 Timeline,如果你使用过 FCP 或者其他视频剪辑软件,这个界面你一定会觉得很熟悉:

你可以直接从右侧的 Actions 面板中将预设动作拖拽到左侧的时间线上。

添加完成后,选中该动作,然后在右侧的 Target 选项中绑定一个 Entity 对象。由于一个场景中可能包含多个 Entity 对象,这一步骤决定了效果将应用到哪个具体对象上:

添加完成后,点击「播放按钮」,即可预览动画效果:


使用 Timelines 创建交互式内容

预设 Actions

Reality Composer Pro 为 Timelines 模块内置了一些列预设的动作效果,可以直接拖拽添加到对象中:

  • Spin - 旋转
  • Orbit - 目标对象模型绕另一个对象旋转
  • Emphasize - 为对象添加内置的强调动画
  • TransformTo - 移动模型对象到指定位置
  • TransformBy - 移动模型对象到相对位置
  • Billboard - 旋转对象以面向用户
  • Notification - 发起自定义的消息通知,可在 Xcode 中监听
  • Disable Entity - 隐藏模型对象
  • Enable Entity - 激活并显示对象
  • Animation - 播放对象 AnimationLibraryComponent 中存储的动画资源
  • Play Audio - 播放对象 AudioLibraryComponent 中存储的音频资源

例如,我们可以通过添加 Orbit 和 TransformTo 动作,从而实现这样的动画效果:

Timeline 的嵌套

Timelines 功能非常灵活:

  • 一个 Scene 中可以创建多个不同的 Timeline
  • 每个 Timeline 可以添加多个 Action
  • 每个 Action 可以绑定不同的 Entity
  • Timeline 和 Timeline 之间可以嵌套调用

Timeline 类似于 Reality Composer Pro 中的 Scene。在这个框架下,一个 Timeline 可以嵌套到另一个 Timeline 中,可以更灵活地管理和组合内容。

例如,假设你想实现一个机器人🤖向目标地点移动,同时执行自身的身体动画。可以创建两个 Timeline:

  • RobotMove:用于管理机器人移动过程中旋转,可以使用 Animation Action 来实现。
  • MoveToTarget:用于移动机器人到目标位置,可以使用 TransformTo Action 或 TransformBy Action 来实现。

在 MoveToTarget 中,我们可以调用 RobotMove 来添加移动过程中的机器人旋转动画。可以通过右键 Timeline,然后选择 Insert Into Timeline 即可:

通过这种方式,我们可以:

  • 模块化设计:将不同的动画和动作分离到独立的 Timeline 中,便于管理和维护。
  • 可复用性:每个 Timeline 可以在不同的场景中复用,提高开发效率。
  • 灵活组合:通过嵌套和组合不同的 Timeline,实现复杂的交互效果和动画流程。

这种设计思路不仅提升了内容创建的效率,还大大增强了动画和交互设计的灵活性。

在 Xcode 中调用 Timelines 动画

在 Reality Composer Pro 的 Timelines 模块中创建好动画之后,要在 Xcode 中调用它,可以使用 Reality Composer Pro 新增的 Behaviors 组件。

认识 Behaviors 组件

Behaviors 组件可以在指定的 Entity 上添加 Trigger —— 即何时启动 Timeline 并开始播放。

选中目标 Entity -> 添加 Behaviors 组件:

例如当我点击这辆 Car 时触发动画,Car 就是目标 Entity,我们需要添加 Behaviors 组件到 Car 实体上。

Behaviors 的 4 种预设 Trigger

Behaviors 组件内置了 4 种 Trigger 类型(截止 2024 年 6 月):

  • On Tap - 点击时触发
  • On Collision - 碰撞时触发
  • On Added to Scene - 当实体添加到场景时触发
  • On Notification - 基于 Swift 代码发送的通知

假设你希望实现:当用户点击 Car 时触发 Timeline 动画(机器人走向车),可以使用 On Tap Trigger 来实现。

  1. 选中 Car 这个 Entity,添加一个 Behaviors 组件
  2. Behaviors 类型设置为 OnTap 类型
  3. 我们希望播放 MoveToCar 这个 Timeline,因此设置 Action 为对应的 Timeline 即可。

这样我们就完成了设置,当 Car 实体被用户点击时,即可播放 MoveToCar 动画。

RealityView 中添加点击手势

让应用能够按照逾期工作之前,我们还缺少一个关键步骤——告诉 RealityView 响应点击手势。这可以通过在 Xcode 中为 Entity 添加 Gesture 手势来实现。这样 Entity 才能检测到用户的 Tap(点击)行为,从而触发我们预设的动画。

在 Xcode 中,和加载其他 3D 内容一样,我们先使用 Entity() 方法加载我们在 Reality Composer Pro 中创建的内容,就像这样:

RealityView { content in
      if let carAndRobot = try? await Entity(named: "CarAndRobot", in: realityKitContentBundle) {
          content.add(carAndRobot)          
      }

加载模型后,点击 Car 不会有任何反应⬆。

添加以下 gesture() 手势代码:

RealityView { content in
      if let carAndRobot = try? await Entity(named: "CarAndRobot", in: realityKitContentBundle) {
          content.add(carAndRobot)          
      }
    .gesture(TapGesture().targetedToAnyEntity()
      .onEnded({ value in
          _ = value.entity.applyTapForBehaviors()
      })
)

此时点击 Car,即可成功触发在 Reality Composer Pro 中预设的动画🎉🎉🎉

💡
要测试 Tap Gesture,你必须在 visionOS 模拟器或 Vision Pro 设备中运行代码。在 Reality Composer Pro 中点击模型时, Tap Gesture 不会响应。

AnimationLibraryComponent

—— 实体可播放的动画集合。

💡
一个用来存储该 3D 模型可能使用到的动画集合的 Box。
  1. 将 AnimationLibraryComponent 添加到 Entity
  2. 将 AnimationResource 添加到 AnimationLibraryComponent

如果 USDZ 模型自带动画效果(通常使用 Blender/Maya 创建,并一并导出到 USDZ 文件中),则 Reality Composer Pro 会自动创建 Animation Library Component,并将默认动画添加到其中。

AudioLibraryComponent

和 AnimationLibraryComponent 工作原理相同,主要用于存储和关联音频资源。