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