HarmonyOS/OpenHarmony应用开发-转场动画共享元素转场

鸿蒙时代
发布于 2023-1-4 17:18
浏览
0收藏

设置页面间转场时共享元素的转场动效。
说明:从API Version 7开始支持。开发语言ets.

属性:
HarmonyOS/OpenHarmony应用开发-转场动画共享元素转场-鸿蒙开发者社区
示例代码:
transitionAnimation_share01.ets

@Entry
@Component
struct TransitionAnimation_share01 {
  @State active: boolean = false

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

transitionAnimation_share02.ets

@Entry
@Component
struct TransitionAnimation_share02 {
  build() {
    Stack() {
      Image($r('app.media.icon')).width(300).height(300).sharedTransition('sharedImage')
    }.width('100%').height('100%')
  }
}

示例效果:

HarmonyOS/OpenHarmony应用开发-转场动画共享元素转场-鸿蒙开发者社区

参考地址:
https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-transition-animation-shared-elements-0000001380600894-V3

标签
HarmonyOSOpenHarmony应用开发-转场动画共.docx 105.94K 7次下载
收藏
回复
举报
回复
    相关推荐