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