A 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.
This feature is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
sharedTransitionOptions
Parameters of the shared element transition animation.
motionPath is effective only when type is set to SharedTransitionEffectType.Exchange.
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.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| duration | number | No | Yes | Animation duration. Default value: 1000 Unit: ms Value range: [0, +∞) |
| curve | Curve | string | ICurve | No | Yes | Animation curve. You are advised to specify the curve using the Curve or ICurve type. For the string type, this parameter indicates an animation interpolation curve. For available values, see the curve parameter in AnimateParam. Default value: Curve.Linear |
| delay | number | No | Yes | Delay of animation playback. Default value: 0 Unit: ms |
| motionPath | MotionPathOptions | No | Yes | Motion path. |
| zIndex | number | No | Yes | Z-axis. Value range: (-∞, +∞) Default value: 0 |
| type | SharedTransitionEffectType | No | Yes | Animation type. Default value: SharedTransitionEffectType.Exchange |
Example
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.
// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
build() {
Column() {
// Replace $r('app.media.ic_health_heart') with the image resource file you use.
Image($r('app.media.ic_health_heart')).width(50).height(50).margin({ left: 20, top: 20 })
.sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
}.width('100%').height('100%').alignItems(HorizontalAlign.Start)
.onClick(() => {
this.getUIContext().getRouter().pushUrl({ url: 'pages/PageB' })
})
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
} // PageB.ets
@Entry
@Component
struct PageBExample {
build() {
Stack() {
// Replace $r('app.media.ic_health_heart') with the image resource file you use.
Image($r('app.media.ic_health_heart')).width(150).height(150)
.sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
}.width('100%').height('100%')
}
pageTransition() {
PageTransitionEnter({ type: RouteType.None, duration: 0 })
PageTransitionExit({ type: RouteType.None, duration: 0 })
}
} 