1# 共享元素转场 (sharedTransition)
2
3可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。sharedTransition仅发生在页面路由（router）跳转时。
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> type为SharedTransitionEffectType.Exchange时，效果为对匹配的共享元素产生位置、大小的过渡（可通过配置组件的border观察），不支持内容的过渡效果。例如，Text组件在两个页面上使用不同的fontSize属性值，即绘制内容有大小差异，在sharedTransition动画结束后的最后一帧，Text的fontSize效果会突变为跳转目标页fontSize的效果。
23
24
25## sharedTransitionOptions
26
27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
28
29| 名称              | 参数类型      | 是否必填       | 参数描述                                                      |
30| ----------------- | -------------|-------------- | --------------------------------------------------------------|
31| duration          |     number   |  否           | 描述共享元素转场动效播放时长。<br>默认值：1000。 <br>单位：毫秒。 |
32| curve             |      [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[ICurve](../js-apis-curve.md#icurve)<sup>10+</sup>  | 否 | 动画曲线。<br/>默认值：Curve.Linear |
33| delay          |     number   |  否           | 延迟播放时间。<br>默认值：0。 <br>单位：毫秒。 |
34| motionPath          | [MotionPathOptions](./ts-motion-path-animation.md)  |  否           | 运动路径信息。 |
35| zIndex          |     number   |  否              | 设置Z轴。 |
36| type           |     [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)   |  否   | 动画类型。<br>默认值：SharedTransitionEffectType.Exchange。 |
37
38
39## 示例
40
41  示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。
42
43```ts
44// xxx.ets
45@Entry
46@Component
47struct SharedTransitionExample {
48  @State active: boolean = false
49
50  build() {
51    Column() {
52      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
53        Image($r('app.media.ic_health_heart')).width(50).height(50)
54          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
55      }.padding({ left: 20, top: 20 })
56      .onClick(() => {
57        this.active = true
58      })
59    }
60  }
61}
62```
63
64```ts
65// PageB.ets
66@Entry
67@Component
68struct pageBExample {
69  build() {
70    Stack() {
71      Image($r('app.media.ic_health_heart')).width(150).height(150)
72        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
73    }.width('100%').height('100%')
74  }
75}
76```
77
78![shared](figures/shared.gif)