1# 共享元素转场 (sharedTransition) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。sharedTransition仅发生在页面路由（router）跳转时。 10 11> **说明：** 12> 13> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## sharedTransition 16 17sharedTransition(id: string, options?: sharedTransitionOptions): T 18 19设置共享元素转场动效。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------ | ------ | ---- | ------------------------------------------------------------ | 29| id | string | 是 | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。| 30| options | [sharedTransitionOptions](#sharedtransitionoptions) | 否 | 共享元素转场动画参数。 | 31 32**返回值：** 33 34| 类型 | 说明 | 35| --- | --- | 36| T | 返回当前组件。 | 37 38> **说明：** 39> 40> type为SharedTransitionEffectType.Exchange时motionPath才会生效。 41> 42> type为SharedTransitionEffectType.Exchange时，效果为对匹配的共享元素产生位置、大小的过渡（可通过配置组件的border观察），不支持内容的过渡效果。例如，Text组件在两个页面上使用不同的fontSize属性值，即绘制内容有大小差异，在sharedTransition动画结束后的最后一帧，Text的fontSize效果会突变为跳转目标页fontSize的效果。 43 44## sharedTransitionOptions 45 46**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50| 名称 | 类型 | 只读 | 可选 | 说明 | 51| ----------------- | -------------|------- | ------- | --------------------------------------------------------------| 52| duration | number | 否 | 是 | 描述共享元素转场动效播放时长。<br>默认值：1000。 <br>单位：毫秒。<br/>取值范围：[0, +∞)。 | 53| curve | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9) | 否 | 是 | 动画曲线。<br/>推荐以Curve或ICurve形式指定。<br/>当类型为string时，为动画插值曲线，取值参考[AnimateParam](./ts-explicit-animation.md#animateparam对象说明)的curve参数。<br/>默认值：Curve.Linear | 54| delay | number | 否 | 是 | 延迟播放时间。<br>默认值：0。 <br>单位：毫秒。 | 55| motionPath | [MotionPathOptions](./ts-motion-path-animation.md) | 否 | 是 | 运动路径信息。 | 56| zIndex | number | 否 | 是 | 设置Z轴。<br/>取值范围：(-∞, +∞)。 | 57| type | [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype) | 否 | 是 | 动画类型。<br>默认值：SharedTransitionEffectType.Exchange。 | 58 59 60## 示例 61 62 示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct SharedTransitionExample { 69 70 build() { 71 Column() { 72 // $r('app.media.ic_health_heart')需要替换为开发者所需的图像资源文件。 73 Image($r('app.media.ic_health_heart')).width(50).height(50).margin({ left: 20, top: 20 }) 74 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 75 }.width('100%').height('100%').alignItems(HorizontalAlign.Start) 76 .onClick(() => { 77 this.getUIContext().getRouter().pushUrl({ url: 'pages/PageB' }) 78 }) 79 } 80} 81``` 82 83```ts 84// PageB.ets 85@Entry 86@Component 87struct pageBExample { 88 build() { 89 Stack() { 90 // $r('app.media.ic_health_heart')需要替换为开发者所需的图像资源文件。 91 Image($r('app.media.ic_health_heart')).width(150).height(150) 92 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 93 }.width('100%').height('100%') 94 } 95} 96``` 97 98
