三、实战教学：三步实现极致动效

1. 定义唯一 ID

首先，你需要为参与转场的两个组件指定相同的 ID。这个 ID 是系统识别“谁变到了谁”的关键凭证。

// 在组件A和组件B中定义同一个IDlet sharedId: string = "my_shared_element";

2. 绑定 geometryTransition 属性

在 ArkUI 中，我们直接使用 .geometryTransition(id) 方法。即使是跨页面的场景，只要 ID 一致，共享元素转场 就能生效。

// 页面A：缩略图Image($r('app.media.pic'))  .geometryTransition(sharedId)  .width(100)  .height(100)// 页面B：高清大图Image($r('app.media.pic'))  .geometryTransition(sharedId)  .width('100%')  .height(300)

3. 配合 animateTo 触发

动效的触发需要包裹在 animateTo 函数中，这样系统才会以动画的形式展现位置和尺寸的变化。

animateTo({ duration: 400, curve: Curve.Sharp }, () => {  this.isExpanded = !this.isExpanded; // 改变状态变量})

四、小白避坑指南

• 保持层级清晰： 尽量确保参与转场的组件在视觉上是连续的，避免被其他不透明容器遮挡。
• ID 唯一性： 在同一视图树中，不要为不相关的组件赋予相同的 geometryTransition ID。
• 性能优化： 转场过程中，尽量避免在组件内部进行复杂的重新渲染计算，以保证 ArkUI 动效 的帧率稳定。

五、总结

通过本文的教程，相信你已经对 HarmonyOS 5 的 GeometryTransition 有了初步的了解。共享元素转场不仅能提升应用的精致感，更能有效降低用户的认知负载。快去你的 ArkUI 项目中尝试一下，开启极致动效的大门吧！