1# 组件内隐式共享元素转场 2 3geometryTransition用于组件内隐式共享元素转场，在组件显示切换过程中提供平滑过渡效果。通用transition机制提供了opacity、scale等转场动效，geometryTransition通过id绑定in/out组件(in指入场组件、out指出场组件)，使得组件原本独立的transition动画在空间位置上发生联系，从而将视觉焦点由出场组件位置引导到入场组件位置。 4 5> **说明：** 6> 7> 从API Version 7开始支持，从API Version 10开始生效。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 属性 10 11| 名称 | 参数 | 参数描述 | 12| ------------------ | -------- | ------------------------------------------------------------ | 13| geometryTransition | id: string | 设置geometryTransition的id，用于设置绑定关系，id置为空字符串""可清除绑定关系避免参与共享行为，id动态修改可重新建立绑定关系。同一个id只能有两个组件绑定且分别是in/out组件。 | 14 15> **说明：** 16> 17> [geometryTransition](ts-transition-animation-geometrytransition.md)必须配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线跟随[animateTo](ts-explicit-animation.md)中的配置，不支持[animation](ts-animatorproperty.md)隐式动画。 18 19## 示例 20 21```ts 22// xxx.ets 23@Entry 24@Component 25struct Index { 26 @State isShow: boolean = false 27 28 build() { 29 Stack({ alignContent: Alignment.Center }) { 30 if (this.isShow) { 31 Image($r('app.media.pic')) 32 .autoResize(false) 33 .clip(true) 34 .width(300) 35 .height(400) 36 .offset({ y: 100 }) 37 .geometryTransition("picture") 38 .transition(TransitionEffect.OPACITY) 39 } else { 40 // geometryTransition此处绑定的是容器，那么容器内的子组件需设为相对布局跟随父容器变化， 41 // 套多层容器为了说明相对布局约束传递 42 Column() { 43 Column() { 44 Image($r('app.media.icon')) 45 .width('100%').height('100%') 46 }.width('100%').height('100%') 47 } 48 .width(80) 49 .height(80) 50 // geometryTransition会同步圆角，但仅限于geometryTransition绑定处，此处绑定的是容器 51 // 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius 52 .borderRadius(20) 53 .clip(true) 54 .geometryTransition("picture") 55 // transition保证组件离场不被立即析构，可设置其他转场效果 56 .transition(TransitionEffect.OPACITY) 57 } 58 } 59 .onClick(() => { 60 animateTo({ duration: 1000 }, () => { 61 this.isShow = !this.isShow 62 }) 63 }) 64 } 65} 66``` 67 68 69 70
