1# 共享元素转场 2 3 设置页面间转场时共享元素的转场动效。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数 | 参数描述 | 13| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 14| sharedTransition | id: string,<br/>{<br/> duration?: number,<br/> curve?: Curve \| string,<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：单位为毫秒，默认动画时长为1000毫秒。<br/>- curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve) 说明。<br/>- delay：单位为毫秒，默认不延时播放。<br/>- motionPath：运动路径信息。<br/>- path：设置路径。<br/>- from：设置起始值。<br/>- to：设置终止值。<br/>- rotatable：是否旋转。<br/>- zIndex：设置Z轴。<br/>- type：动画类型。 | 15 16 17## 示例 18 19示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。 20 21```ts 22// xxx.ets 23@Entry 24@Component 25struct SharedTransitionExample { 26 @State active: boolean = false 27 28 build() { 29 List() { 30 ListItem() { 31 Row() { 32 Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) { 33 Image($r('app.media.ic_health_heart')).width(50).height(50) 34 .sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 }) 35 }.padding({ left: 10 }) 36 .onClick(() => { 37 this.active = true 38 }) 39 40 Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center) 41 } 42 } 43 } 44 } 45} 46``` 47 48``` 49// PageB 50@Entry 51@Component 52struct BExample { 53 build() { 54 Stack() { 55 Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1') 56 }.width('100%').height(400) 57 } 58} 59``` 60 61 62
