共享元素转场
设置页面间转场时共享元素的转场动效。
说明：
从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() {
List() {
ListItem() {
Row() {
Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) {
Image($r('app.media.ic_health_heart')).width(50).height(50)
.sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 })
}.padding({ left: 10 })
.onClick(() => {
this.active = true
})
Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center)
}
}
}
}
}
// PageB
@Entry
@Component
struct BExample {
build() {
Stack() {
Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')
}.width('100%').height(400)
}
}
