共享元素转场
当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。
从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 单位：毫秒 取值范围：[0, +∞) - curve：默认曲线为Linear，有效值参见Curve说明。 - delay：单位为毫秒，默认不延时播放。 默认值：0 单位：毫秒 取值范围：[0, +∞) 设置小于0的值时，按值为0处理。 - motionPath：运动路径信息，详细说明请参考路径动画。 - path：设置路径。 - from：设置起始值。 - to：设置终止值。 - rotatable：是否旋转。 默认值：false - zIndex：设置Z轴。 默认值：0 - type：动画类型。 默认值：SharedTransitionEffectType.Exchange |
type为SharedTransitionEffectType.Exchange时motionPath才会生效。
示例
示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。
- // 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%')
- }
- }
更多建议：