Shared Element Transition (sharedTransition)

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.

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Attributes

Name Type Mandatory Description
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.
options sharedTransitionOptions No Parameters of the shared element transition animation.

NOTE

motionPath is effective only when type is set to SharedTransitionEffectType.Exchange.

sharedTransitionOptions

Name Type Mandatory Description
duration number No Animation duration.
Default value: 1000
Unit: ms
curve Curve | string | ICurve10+ No Animation curve.
Default value: 1000
Unit: ms
delay number No Delay of animation playback.
Default value: 0
Unit: ms
motionPath MotionPathOptions No Motion path.
zIndex number No Z-axis.
type SharedTransitionEffectType No 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 {
  @State active: boolean = false

  build() {
    Column() {
      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
        Image($r('app.media.ic_health_heart')).width(50).height(50)
          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
      }.padding({ left: 20, top: 20 })
      .onClick(() => {
        this.active = true
      })
    }
  }
}

// PageB.ets
@Entry
@Component
struct pageBExample {
  build() {
    Stack() {
      Image($r('app.media.ic_health_heart')).width(150).height(150)
        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
    }.width('100%').height('100%')
  }
}

shared