鸿蒙0基础学习【组件内隐式共享元素转场 (geometryTransition)】ArkUI

摘要：geometryTransition是ArkUI框架提供的共享元素转场动画接口，通过绑定相同ID实现视图切换时的平滑过渡效果。该功能支持在原子化服务中使用，从API 11开始提供更多参数配置（如GeometryTransitionOptions），允许控制组件是否跟随动画。示例展示了图片缩放的转场应用，通过animateTo实现流畅的视图切换动画，其中geometryTransition会同

是秃子总会反光

360人浏览 · 2025-06-09 20:38:00

是秃子总会反光 · 2025-06-09 20:38:00 发布

在视图切换过程中提供丝滑的上下文传承过渡。通用transition机制提供了opacity、scale等转场效果，geometryTransition通过安排绑定的in/out组件（in指新视图、out指旧视图）的frame、position使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。

geometryTransition

geometryTransition(id: string)

组件内隐式共享元素转场。

系统能力： SystemCapability.ArkUI.ArkUI.Full

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

参数名	参数类型	必填	参数描述
id	string	是	用于设置绑定关系，id置空字符串清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。

geometryTransition11+

geometryTransition(id: string, options?: GeometryTransitionOptions)

组件内隐式共享元素转场。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	参数类型	必填	参数描述
id	string	是	用于设置绑定关系，id置空字符串清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。
options	[GeometryTransitionOptions]	否	组件内共享元素转场动画参数。

GeometryTransitionOptions11+

系统能力： SystemCapability.ArkUI.ArkUI.Full

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

参数名	参数类型	必填	参数描述
follow	boolean	否	仅用于if范式下标记始终在组件树上的组件是否跟随做共享动画。true代表跟随做共享动画，false代表不跟随做共享动画。默认值：false

示例

// xxx.ets
@Entry
@Component
struct Index {
  @State isShow: boolean = false

  build() {
    Stack({ alignContent: Alignment.Center }) {
      if (this.isShow) {
        Image($r('app.media.pic'))
          .autoResize(false)
          .clip(true)
          .width(300)
          .height(400)
          .offset({ y: 100 })
          .geometryTransition("picture", { follow: false })
          .transition(TransitionEffect.OPACITY)
      } else {
        // geometryTransition此处绑定的是容器，那么容器内的子组件需设为相对布局跟随父容器变化，
        // 套多层容器为了说明相对布局约束传递
        Column() {
          Column() {
            Image($r('app.media.icon'))
              .width('100%').height('100%')
          }.width('100%').height('100%')
        }
        .width(80)
        .height(80)
        // geometryTransition会同步圆角，但仅限于geometryTransition绑定处，此处绑定的是容器
        // 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius
        .borderRadius(20)
        .clip(true)
        .geometryTransition("picture")
        // transition保证组件离场不被立即析构，可设置其他转场效果
        .transition(TransitionEffect.OPACITY)
      }
    }
    .onClick(() => {
      animateTo({ duration: 1000 }, () => {
        this.isShow = !this.isShow
      })
    })
  }
}
ts

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传