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**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ------- | ------------------------ | ---- | ------------------------------------------------------------ | 23| id | string | 是 | 用于设置绑定关系，id置""清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。 | 24 25## geometryTransition<sup>11+<sup> 26 27geometryTransition(id: string, options?: GeometryTransitionOptions) 28 29组件内隐式共享元素转场。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 参数类型 | 必填 | 参数描述 | 36| ------- | ------------------------ | ---- | ------------------------------------------------------------ | 37| id | string | 是 | 用于设置绑定关系，id置""清除绑定关系避免参与共享行为，id可更换重新建立绑定关系。同一个id只能有两个组件绑定且是in/out不同类型角色，不能多个组件绑定同一个id。 | 38| options | [GeometryTransitionOptions](#geometrytransitionoptions11) | 否 | 组件内共享元素转场动画参数。 | 39 40## GeometryTransitionOptions<sup>11+<sup> 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44**参数：** 45 46| 参数名 | 参数类型 | 必填 | 参数描述 | 47| ------ | -------- | ---- | ------------------------------------------------------------ | 48| follow | boolean | 否 | 仅用于if范式下标记始终在组件树上的组件是否跟随做共享动画，默认值：false。 | 49 50## 示例 51 52```ts 53// xxx.ets 54@Entry 55@Component 56struct Index { 57 @State isShow: boolean = false 58 59 build() { 60 Stack({ alignContent: Alignment.Center }) { 61 if (this.isShow) { 62 Image($r('app.media.pic')) 63 .autoResize(false) 64 .clip(true) 65 .width(300) 66 .height(400) 67 .offset({ y: 100 }) 68 .geometryTransition("picture") 69 .transition(TransitionEffect.OPACITY) 70 } else { 71 // geometryTransition此处绑定的是容器，那么容器内的子组件需设为相对布局跟随父容器变化， 72 // 套多层容器为了说明相对布局约束传递 73 Column() { 74 Column() { 75 Image($r('app.media.icon')) 76 .width('100%').height('100%') 77 }.width('100%').height('100%') 78 } 79 .width(80) 80 .height(80) 81 // geometryTransition会同步圆角，但仅限于geometryTransition绑定处，此处绑定的是容器 82 // 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius 83 .borderRadius(20) 84 .clip(true) 85 .geometryTransition("picture") 86 // transition保证组件离场不被立即析构，可设置其他转场效果 87 .transition(TransitionEffect.OPACITY) 88 } 89 } 90 .onClick(() => { 91 animateTo({ duration: 1000 }, () => { 92 this.isShow = !this.isShow 93 }) 94 }) 95 } 96} 97``` 98 99 100
