共享元素转场


共享元素转场

设置页面间转场时共享元素的转场动效。

说明:

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称 参数 参数描述
sharedTransition id: string,
{
 duration?: number,
 curve?: Curve | string,
 delay?: number,
 motionPath?:
{
 path: string,
 form?: number,
 to?: number,
 rotatable?: boolean
},
zIndex?: number,
type?: SharedTransitionEffectType
}
两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。
- id:设置组件的id。
- duration:单位为毫秒,默认动画时长为1000毫秒。
- curve:默认曲线为Linear,有效值参见Curve说明。
- delay:单位为毫秒,默认不延时播放。
- motionPath:运动路径信息,详细说明请参考路径动画
- path:设置路径。
- from:设置起始值。
- to:设置终止值。
- rotatable:是否旋转。
- zIndex:设置Z轴。
- type:动画类型。

示例

示例代码为点击图片跳转页面时,显示共享元素图片的自定义转场动效。

// 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
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// PageB.ets
@Entry
@Component
struct pageBExample {
  build() {
    Stack() {
      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage')
    }.width('100%').height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10

shared