1# 组件内隐式共享元素转场 (geometryTransition)
2
3在视图切换过程中提供丝滑的上下文传承过渡。通用transition机制提供了opacity、scale等转场效果，geometryTransition通过安排绑定的in/out组件（in指新视图、out指旧视图）的frame、position使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。
4
5> **说明：**
6>
7> 从API Version 7开始支持，从API Version 10开始生效。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> [geometryTransition](ts-transition-animation-geometrytransition.md)必须配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线跟随[animateTo](ts-explicit-animation.md)中的配置，不支持[animation](ts-animatorproperty.md)隐式动画。
10
11## geometryTransition
12
13geometryTransition(id: string)
14
15组件内隐式共享元素转场。
16
17**系统能力：** SystemCapability.ArkUI.ArkUI.Full
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**参数：**
22
23| 参数名  | 参数类型                 | 必填 | 参数描述                                                     |
24| ------- | ------------------------ | ---- | ------------------------------------------------------------ |
25| id      | string                   | 是   | 用于设置绑定关系，id置空字符串清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。 |
26
27## geometryTransition<sup>11+</sup>
28
29geometryTransition(id: string, options?: GeometryTransitionOptions)
30
31组件内隐式共享元素转场。
32
33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
34
35**系统能力：** SystemCapability.ArkUI.ArkUI.Full
36
37**参数：**
38
39| 参数名  | 参数类型                 | 必填 | 参数描述                                                     |
40| ------- | ------------------------ | ---- | ------------------------------------------------------------ |
41| id      | string                   | 是   | 用于设置绑定关系，id置空字符串清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。 |
42| options | [GeometryTransitionOptions](#geometrytransitionoptions11) | 否   | 组件内共享元素转场动画参数。                                   |
43
44## GeometryTransitionOptions<sup>11+</sup>
45
46**系统能力：** SystemCapability.ArkUI.ArkUI.Full
47
48**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
49
50**参数：**
51
52| 参数名 | 参数类型 | 必填 | 参数描述                                                     |
53| ------ | -------- | ---- | ------------------------------------------------------------ |
54| follow | boolean  | 否   | 仅用于if范式下标记始终在组件树上的组件是否跟随做共享动画。<br/>默认值：false |
55
56## 示例
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct Index {
63  @State isShow: boolean = false
64
65  build() {
66    Stack({ alignContent: Alignment.Center }) {
67      if (this.isShow) {
68        Image($r('app.media.pic'))
69          .autoResize(false)
70          .clip(true)
71          .width(300)
72          .height(400)
73          .offset({ y: 100 })
74          .geometryTransition("picture", { follow: false })
75          .transition(TransitionEffect.OPACITY)
76      } else {
77        // geometryTransition此处绑定的是容器，那么容器内的子组件需设为相对布局跟随父容器变化，
78        // 套多层容器为了说明相对布局约束传递
79        Column() {
80          Column() {
81            Image($r('app.media.icon'))
82              .width('100%').height('100%')
83          }.width('100%').height('100%')
84        }
85        .width(80)
86        .height(80)
87        // geometryTransition会同步圆角，但仅限于geometryTransition绑定处，此处绑定的是容器
88        // 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius
89        .borderRadius(20)
90        .clip(true)
91        .geometryTransition("picture")
92        // transition保证组件离场不被立即析构，可设置其他转场效果
93        .transition(TransitionEffect.OPACITY)
94      }
95    }
96    .onClick(() => {
97      animateTo({ duration: 1000 }, () => {
98        this.isShow = !this.isShow
99      })
100    })
101  }
102}
103```
104
105![geometrytransition](figures/geometrytransition.gif)
106