1# 共享元素转场 (sharedTransition) 2 3当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 是否必填 | 参数描述 | 14| ---------------- | -----------------|------------------------------------------- | ------------------------------------------------------------ | 15| id | string | 是 | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。| 16| options | [sharedTransitionOptions](#sharedtransitionoptions) | 否 | 共享元素转场动画参数。 | 17 18> **说明：** 19> 20> type为SharedTransitionEffectType.Exchange时motionPath才会生效。 21 22## sharedTransitionOptions 23 24| 名称 | 参数类型 | 是否必填 | 参数描述 | 25| ----------------- | -------------|-------------- | --------------------------------------------------------------| 26| duration | number | 否 | 描述共享元素转场动效播放时长。<br>默认值：1000。 <br>单位：毫秒。 | 27| curve | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve)<sup>10+</sup> | 否 | 描述共享元素转场动效播放时长。<br>默认值：1000。 <br>单位：毫秒。| 28| delay | number | 否 | 延迟播放时间。<br>默认值：0。 <br>单位：毫秒。 | 29| motionPath | [MotionPathOptions](./ts-motion-path-animation.md) | 否 | 运动路径信息。 | 30| zIndex | number | 否 | 设置Z轴。 | 31| type | [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype) | 否 | 动画类型。<br>默认值：SharedTransitionEffectType.Exchange。 | 32 33 34## 示例 35 36 示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。 37 38```ts 39// xxx.ets 40@Entry 41@Component 42struct SharedTransitionExample { 43 @State active: boolean = false 44 45 build() { 46 Column() { 47 Navigator({ target: 'pages/PageB', type: NavigationType.Push }) { 48 Image($r('app.media.ic_health_heart')).width(50).height(50) 49 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 50 }.padding({ left: 20, top: 20 }) 51 .onClick(() => { 52 this.active = true 53 }) 54 } 55 } 56} 57``` 58 59```ts 60// PageB.ets 61@Entry 62@Component 63struct pageBExample { 64 build() { 65 Stack() { 66 Image($r('app.media.ic_health_heart')).width(150).height(150) 67 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 68 }.width('100%').height('100%') 69 } 70} 71``` 72 73
