HarmonyOS应用开发-ets页面间转场

发布于 2022-2-21 09:57
浏览
1收藏

HarmonyOS应用开发-ets页面间转场-开源基础软件社区
说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

一、页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
HarmonyOS应用开发-ets页面间转场-开源基础软件社区
PageTransitionEnter和PageTransitionExit组件支持的属性
HarmonyOS应用开发-ets页面间转场-开源基础软件社区
PageTransitionEnter和PageTransitionExit组件支持的事件:
HarmonyOS应用开发-ets页面间转场-开源基础软件社区
二、示例
效果展示:
HarmonyOS应用开发-ets页面间转场-开源基础软件社区
示例代码:
index.ets

@Entry
@Component
struct PageTransitionExample1 {
  @State scale: number = 1
  @State opacity: number = 1
  @State active: boolean = false
  build() {
    Column() {
      Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
        Image($rawfile("fss.jpg")).width("100%").height("100%")
      }
      .onClick(() => {
        this.active = true
      })
    }.scale({ x: this.scale }).opacity(this.opacity)
  }
// 自定义方式1:完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale = 1
        this.opacity = progress
      }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale = 1 - progress
        this.opacity = 1
      }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
  }
}

page1.ets

// page1.ets
@Entry
@Component
struct AExample {
  @State scale: number = 1
  @State opacity: number = 1
  @State active: boolean = false
  build() {
    Column() {
      Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
        Image($rawfile("gz.jpg")).width("100%").height("100%")
      }
    }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
  }
// 自定义方式1:完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale = 1
        this.opacity = progress
      }) // 进场过程中会逐帧触发onEnter回调,入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale = 1 - progress
        this.opacity = 1
      }) // 退场过程中会逐帧触发onExit回调,入参为动效的归一化进度(0% -- 100%)
  }
}

完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/PageTransitionAnimation

标签
HarmonyOS应用开发-ets页面间转场.docx 257.06K 4次下载
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐