页面间共享元素转场 sharedTransition

共享元素转场 sharedTransition

• 共享元素转场仅发生在页面路由router跳转时
• 设置sharedTransition属性将该元素标记为共享元素并设置对应的共享元素转场动效
• 两个页面中id值相同且不为空字符串的组件即为共享元素
• 共享元素通常为同一系统组件，如果非相同元素会在动画最后一帧变换

// PageA
import { router } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct SharedTransitionPageA {
    @State message: string = 'Hello World';

    build() {
        Column() {
            Image($r('app.media.app_icon'))
                .width(20)
                .height(20)
                // 两个页面中id值相同且不为空
                .sharedTransition('sharedIcon', {
                    duration: 1000,
                    curve: Curve.Linear,
                    delay: 0
                })
                .onClick(() => {
                    router.pushUrl({
                        url: "pages/animation/SharedTransitionPageB"
                    })
                })
        }
        .height('100%')
        .width('100%')
    }
}


// PageB
import { router } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct SharedTransitionPageB {
    @State message: string = 'Hello World';

    build() {
        RelativeContainer() {
            Text('Hello World')
                .width(40)
                .height(40)
                .fontSize(28)
                // 两个页面中id值相同且不为空
                .sharedTransition('sharedIcon', {
                    duration: 1000,
                    curve: Curve.Linear,
                    delay: 0
                })
                .onClick(() => {
                    router.back()
                })
        }
        .height('100%')
        .width('100%')
    }
}