快速上手 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 模型的动画可以分为模型自身的动画和模型在空间中移动的动画。
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 来实现。
- 选中 Car 这个 Entity,添加一个 Behaviors 组件
- Behaviors 类型设置为 OnTap 类型
- 我们希望播放 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 中预设的动画🎉🎉🎉
AnimationLibraryComponent
—— 实体可播放的动画集合。
- 将 AnimationLibraryComponent 添加到 Entity
- 将 AnimationResource 添加到 AnimationLibraryComponent
如果 USDZ 模型自带动画效果(通常使用 Blender/Maya 创建,并一并导出到 USDZ 文件中),则 Reality Composer Pro 会自动创建 Animation Library Component,并将默认动画添加到其中。
AudioLibraryComponent
和 AnimationLibraryComponent 工作原理相同,主要用于存储和关联音频资源。