1# Shared Element Transition (sharedTransition) 2 3A shared element transition is a transition animation applied to a component that is present on two pages. This component is called the shared element and can be set in the **sharedTransition** attribute, which is effective only during page routing transitions. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12**System capability**: SystemCapability.ArkUI.ArkUI.Full 13 14| Name | Type | Mandatory | Description | 15| ---------------- | -----------------|------------------------------------------- | ------------------------------------------------------------ | 16| id | string | Yes | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.| 17| options | [sharedTransitionOptions](#sharedtransitionoptions) | No | Parameters of the shared element transition animation.| 18 19> **NOTE** 20> 21> **motionPath** is effective only when **type** is set to **SharedTransitionEffectType.Exchange**. 22> 23> When **type** is set to **SharedTransitionEffectType.Exchange**, the effect focuses on smooth transition of the position and size of matching shared elements, which can be visually observed through the component's border. The transition, however, does not involve content properties, which will abruptly change to the target page's values at the end of the animation. For example, if a **Text** component has different **fontSize** values on two pages, the font size will snap to the target page's value once the shared transition animation completes. 24 25 26## sharedTransitionOptions 27 28**Atomic service API**: This API can be used in atomic services since API version 11. 29 30**System capability**: SystemCapability.ArkUI.ArkUI.Full 31 32| Name | Type | Mandatory | Description | 33| ----------------- | -------------|-------------- | --------------------------------------------------------------| 34| duration | number | No | Animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)| 35| curve | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve9)<sup>10+</sup> | No| Animation curve.<br>You are advised to specify the curve using the **Curve** or **ICurve** type.<br>For the string type, this parameter indicates an animation interpolation curve. For available values, see the **curve** parameter in [AnimateParam](./ts-explicit-animation.md#animateparam).<br>Default value: **Curve.Linear**| 36| delay | number | No | Delay of animation playback.<br>Default value: **0**<br>Unit: ms| 37| motionPath | [MotionPathOptions](./ts-motion-path-animation.md) | No | Motion path.| 38| zIndex | number | No | Z-axis.<br>Value range: (-∞, +∞)| 39| type | [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype) | No | Animation type.<br>Default value: **SharedTransitionEffectType.Exchange**| 40 41 42## Example 43 44 This example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. 45 46```ts 47// xxx.ets 48@Entry 49@Component 50struct SharedTransitionExample { 51 52 build() { 53 Column() { 54 Image($r('app.media.ic_health_heart')).width(50).height(50).margin({ left: 20, top: 20 }) 55 .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 }) 56 }.width('100%').height('100%').alignItems(HorizontalAlign.Start) 57 .onClick(() => { 58 this.getUIContext().getRouter().pushUrl({ url: 'pages/PageB' }) 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 79
