HarmonyOS 动画二：如何丝滑衔接页面HarmonyOS 动画二：如何丝滑衔接页面 本文概述 技术背景：优化用户体

HarmonyOS 动画二：如何丝滑衔接页面

本文概述

• 技术背景：优化用户体验是移动端开发中老生常谈的话题，合理的动画植入可改善软件页面衔接间的顿感。
• 文章大纲：页面跳转动画：基本跳转动画、跳转进阶(使用系统内置属性)、跳转进阶(共享动画逻辑)
• 本文代码链接
• 动画完整代码链接

页面跳转动画基础版

跳转动画概述

• 基本使用：

  • 在页面跳转中，我们可以借助pageTransition()，在其中对页面进/退场设置动画，其包括但不限于平移、缩放、透明度

• 进阶使用：

  • 在多页面之间，可通过sharedTransition()，在其中指定id，从而达到多页面复用同一动画逻辑

跳转动画使用步骤

• 确定动画触发逻辑：一般是配合Navigator，写在页面的跳转中的
• 确定进/退场动画：设置持续时间，动画播放速率
• 确定附件元素：页面缩放程度，图片透明度等

跳转动画使用示例

跳转动画使用示例一

• 实现效果：

  • 页面入场动画：淡入
  • 页面退场动画：缩小

• 实际效果：

  

• 工程结构

  

• 代码展示：

  • page1：

    /*页面的跳转动画：
        入场动画：淡入
        退场动画：缩小*/
    @Entry
    @Component
    struct Page1 {
      @State scale1: number = 1//缩放
      @State opacity1:number = 1//透明度
    ​
      build() {
        Column() {
          Navigator({ target: "pages/PageJumpAnimationBasic/Page2", type: NavigationType.Push }) {
            Image($r("app.media.page1")).width('100%').height('100%')//让这张图片充满整个页面
          }
        }.scale({x: this.scale1}).opacity(this.opacity1)
      }
    ​
      // 自定义 转场的动画效果
      pageTransition() {
        PageTransitionEnter({duration: 2000, curve: Curve.Friction})//设置此页面的入场动画,展示此页面时调用
          .onEnter((type: RouteType, value: number) => {
            this.scale1 = 1 // 当前Page1页面的进场 缩放就是 1
            this.opacity1 = value // 当前Page1页面的进场 透明度 从不显示 到 慢慢的完全显示
          }) // 进场过程中触发此方法， value(0 ~ 100)
    ​
        PageTransitionExit({duration: 2000, curve: Curve.Friction})//设置页面的退场动画，退出此页面时展示
          .onExit((type: RouteType, value: number) => {
            this.scale1 = 1 - value
            this.opacity1 = 1
          }) // 进场过程中触发此方法， value(0 ~ 100)
      }
    }
    // 入场动画为淡入，退场动画为缩小
    

  • page2：

    @Entry
    @Component
    struct Page2 {
      @State scale1: number = 1
      @State opacity1:number = 1
    ​
      build() {
        Column() {
          Navigator({ target: "pages/PageJumpAnimationBasic/Page1", type: NavigationType.Push }) {
            Image($r('app.media.page2')).width('100%').height('100%')
          }
        }.scale({x: this.scale1}).opacity(this.opacity1)
      }
    ​
      // 自定义 转场的动画效果
      pageTransition() {
        PageTransitionEnter({duration: 2000, curve: Curve.Friction})
          .onEnter((type: RouteType, value: number) => {
            this.scale1 = 1 // 当前Page1页面的进场 缩放就是 1
            this.opacity1 = value // 当前Page1页面的进场 透明度 从不显示 到 慢慢的完全显示
          }) // 进场过程中触发此方法， value(0 ~ 100)
    ​
        PageTransitionExit({duration: 2000, curve: Curve.Friction})
          .onExit((type: RouteType, value: number) => {
            this.scale1 = 1 - value
            this.opacity1 = 1
          }) // 进场过程中触发此方法， value(0 ~ 100)
      }
    }
    

页面跳转动画示例二

• 概述：

  • 在自定义动画属性中，我们可以利用系统提供的属性，对页面进行平移、缩放、透明度渐变等

• 实际效果：

  

• 工程结构：

  

• 代码展示：

  • Page1UI：

    /*页面的跳转动画*/
    @Entry
    @Component
    struct Page1UI {
      @State scale1: number = 1
      @State opacity1:number = 1
    ​
      build() {
        Column() {
          Navigator({ target: "pages/PageJumpAnimationUseSystemProperty/Page2UI", type: NavigationType.Push }) {
            Image($r("app.media.page1")).width('100%').height('100%')
          }
        }.scale({x: this.scale1}).opacity(this.opacity1)
      }
    ​
      // 自定义 转场的动画效果，使用系统提供的多种默认效果（平移，缩放，透明度）
      pageTransition() {
        PageTransitionEnter({duration: 2000, curve: Curve.Friction})
          .slide(SlideEffect.Left)
    ​
        PageTransitionExit({duration: 2000, curve: Curve.Linear})
          .translate({x: 100.0, y:100.0}) // 0/0 到 100/100
          .opacity(0) // 从显示 到 不显示
      }
    }
    // 入场动画为淡入，退场动画为缩小
    

  • Page2UI：

    @Entry
    @Component
    struct Page2UI {
      @State scale1: number = 1
      @State opacity1:number = 1
    ​
      build() {
        Column() {
          Navigator({ target: "pages/PageJumpAnimationUseSystemProperty/Page1UI", type: NavigationType.Push }) {
            Image($r('app.media.page2')).width('100%').height('100%')
          }
        }.scale({x: this.scale1}).opacity(this.opacity1)
      }
    ​
      // 自定义 转场的动画效果，使用系统提供的多种默认效果（平移，缩放，透明度）
      pageTransition() {
        PageTransitionEnter({duration: 2000, curve: Curve.Friction})
          .slide(SlideEffect.Left)
    ​
        PageTransitionExit({duration: 2000, curve: Curve.Linear})
          .translate({x: 100.0, y:100.0}) // 0/0 到 100/100
          .opacity(0) // 从显示 到 不显示
      }
    }
    

页面跳转动画示例三

• 概述：

  • 使两个页面的组件共享通过动画id 共享同一套动画逻辑

• 实际效果：

  

• 工程结构：

  

• 代码展示

  • Home1UI：

    @Entry
    @Component
    struct Home1UI {
      @State scale1: number = 1
      @State opacity1:number = 1
    ​
      build() {
        Column() {
          Navigator({ target: "pages/pages3/Home2UI", type: NavigationType.Push }) {
            Column({space: 10}) {
              Image($r("app.media.icon")).width(50).height(50)
                .sharedTransition('com.derry.shared.img', {duration: 2000, curve: Curve.Friction})
    ​
              Text('我是界面一')
                .sharedTransition('com.derry.shared.img_text', {duration: 2000, curve: Curve.Friction})
            }
          }.padding({left: 20, top: 20})
        }.scale({x: this.scale1}).opacity(this.opacity1)
      }
    }
    

  • Home2UI：

    @Entry
    @Component
    struct Home2UI {
      @State scale1: number = 1
      @State opacity1:number = 1
    ​
      build() {
        Stack() {
         Column({space: 10}) {
           Image($r('app.media.icon')).width(150).height(150)
             .sharedTransition('com.derry.shared.img', {duration: 2000, curve: Curve.Friction})
    ​
           Text('我是界面二')
             .sharedTransition('com.derry.shared.img_text', {duration: 2000, curve: Curve.Friction})
         }
        }.width('100%').height('100%')
      }
    ​
    }