六、鸿蒙开发-导航组件、定时器组件、动画

提示：本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程

一、定时器

计时器需要⽤到 TextTimer 组件，该组件的用法如下

1.1 参数

TextTimer 需要传⼊⼀个 controller 参数，⽤于控制计时器的启动、暂停和重置，具体用法如下

ts 复制代码

//controller声明
timerController: TextTimerController = new TextTimerController();
//组件声明
TextTimer({ controller: this.timerController })
//启动计时器
this.timerController.start()
//暂停计时器
this.timerController.pause()
//重置计时器
this.timerController.reset()

1.2 事件

TextTimer 的常⽤事件为 onTimer ，只要计时器发生变化，就会触发该事件，因此可用该事件记录⽤时。该方法接收的回调函数定义如下

ts 复制代码

(utc: number, elapsedTime: number) => void

其中 utc 表示当前的时间戳， elapsedTime 表示⾃计时器开始以来所经过时间，单位是毫秒。

二、导航组件

2.1 概述

Tabs组件的基本用法如下

ts 复制代码

Tabs() {
  TabContent() {
    Text('首页内容')
  }
  .tabBar('首页')

  TabContent() {
    Text('发现内容')
  }
  .tabBar('发现')
  
  TabContent() {
    Text('我的内容')
  }
  .tabBar("我的")
}

其中，TabContent() 组件表示每个标签页的内容，其属性tabBar表示其对应的页签。

2.2 导航栏样式

2.2.1 导航栏位置

导航栏的位置可通过vertical()和barPosition()进行设置。vertical()用于设置导航栏是否垂直排列，其参数为boolean类型，默认值为false。barPosition()用于设置导航栏的位置，参数为枚举类型BarPosition，可选的枚举值有BarPosition.Start和BarPosition.End。两个方法配合使用，可实现如下各种效果

vertical	false	false	true	true
barPosition	Start	End	Start	End
效果

2.2.2 可滚动导航栏

当标签页较多时，屏幕的宽度可能无法容纳所有的所有的页签，如下图所示

此时可以使用barMode()方法将导航栏设置为可滚动的。该方法的参数为枚举类型BarMode，可选的枚举值有BarMode.Scrollable和BarMode.Fixed。

2.2.3 自定义导航栏

默认的导航栏页签只有文字内容，如需更加复杂的页签，如下图所示：例子：

ts 复制代码

@Entry
@Component
struct BarCustomPage {
  @State currentIndex: number = 0;

  build() {
    Tabs() {
      TabContent() {
        Text('首页')
      }.tabBar(this.barBuilder(0, '主页', $r('app.media.icon_home'), $r('app.media.icon_home_selected')))

      TabContent() {
        Text('消息')
      }.tabBar(this.barBuilder(1, '消息', $r('app.media.icon_message'), $r('app.media.icon_message_selected')))

      TabContent() {
        Text('我的')
      }.tabBar(this.barBuilder(2, '我的', $r('app.media.icon_mine'), $r('app.media.icon_mine_selected')))
    }.barPosition(BarPosition.End)
    .onChange((index) => {
      this.currentIndex = index;
    })
  }

  @Builder barBuilder(index: number, title: string, icon: Resource, iconSelected: Resource) {
    Column() {
      Image(this.currentIndex === index ? iconSelected : icon)
        .width(25)
        .height(25)
      Text(title)
        .fontColor(this.currentIndex === index ? '#0491d1' : '#8a8a8a')
        .fontWeight(FontWeight.Medium)
    }
  }
}

三、动画

3.1 概述

动画可以在UI界面发生变化时，提供渐变过渡效果，提升用户体验。动画的实现原理是通过在一段时间内连续播放一系列静止画面（帧），从而产生流畅的视觉效果。在鸿蒙应用中，实现动画效果非常方便，我们只需明确组件的初始状态和结束状态，并配置一些动画相关的参数（动画时长），系统就会自动的生成中间的过度状态，并呈现出动画效果。在鸿蒙应用中，开发者可以为组件配置两类动画效果，一是组件的布局相关属性（如尺寸、位置等）发生变化时的布局更新动画，二是组件出现或消失时的组件转场动画，各自的效果如下图所示

布局更新动画	组件转场动画

3.2 布局更新动画

布局更新动画可通过两种方式实现，分别是显式动画和属性动画。

3.2.1 显式动画

animateTo()是一个全局的动画函数，该函数可用于触发动画效果，定义如下

ts 复制代码

animateTo(value: AnimateParam, event: () => void): void

该函数共有两个参数，分别是

动画参数该参数用于设置动画时长、属性值变化曲线等等，其类型为AnimateParam，其包含的属性有

名称	类型	描述
duration	number	动画持续时间，单位为毫秒，默认值为1000
curve	Curve	动画曲线
delay	number	延迟播放，单位为毫秒，默认值为0
iterations	number	循环播放次数，默认值为1
playMode	PlayMode	动画播放模式
onFinish	() => void	动效播放完成回调

匿名函数该函数用于修改组件的属性，由该函数导致的组件布局变化，都会产生动画效果。

ts 复制代码

@Entry
@Component
struct AnimateToPage {
  @State length: number = 150;

  build() {
    Column() {
      Image($r('app.media.img_atguigu'))
        .width(this.length)
        .height(this.length)

      Blank()

      Row({ space: 50 }) {
        Button('缩小')
          .backgroundColor(Color.Orange)
          .onClick(() => {
            animateTo({duration:500},()=>{
              this.length = 150
            })
          })

        Button('放大')
          .backgroundColor(Color.Green)
          .onClick(() => {
            animateTo({duration:500},()=>{
              this.length = 300
            })
          })
      }

    }
    .padding({ top: 200, bottom: 200 })
    .width('100%')
    .height('100%')
  }
}

3.2.2 属性动画

animation()是一个组件的属性方法，该方法同样可用于实现动画效果。使用该方法实现动画效果时需要注意两点，第一点是该方法的参数，其类型为AnimateParam，用于配置动画时长、动画曲线等参数。第二点是该属性方法的位置，用于产生动画效果的属性方法必须位于animation()之前，例如

ts 复制代码

Image($r('app.media.img_atguigu'))
  .width(this.length)
  .height(this.length)
  .animation({ duration: 500})
  .margin({ left: this.marginLeft })

配置完animation()属性后，只要我们修改其之前的属性，就会产生相应的动画效果。

ts 复制代码

@Entry
@Component
struct AnimationPage {
  @State length: number = 150;

  build() {
    Column() {
      Image($r('app.media.img_atguigu'))
        .animation({duration:500})
        .width(this.length)
        .height(this.length)

      Blank()

      Row({ space: 50 }) {
        Button('缩小')
          .backgroundColor(Color.Orange)
          .onClick(() => {
            this.length = 150
          })

        Button('放大')
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.length = 300
          })
      }

    }
    .padding({ top: 200, bottom: 200 })
    .width('100%')
    .height('100%')
  }
}

3.3 组件转场动画

组件转场效果需要通过transition()属性和animateTo()方法来实现。其中transition()属性方法来设置组件的转场效果，支持的效果有平移、透明度、旋转、缩放等，animateTo()用于触发上述的组件转场动画效果，具体用法如下

ts 复制代码

@State flag:boolean = false; //状态变量，用于控制组件出现或消失

if(this.flag){
 Text('hello world')
   .transition(...) //transition()用于设置组件的转场效果
}

Button('出现')
 .onClick(() => {
   //animateTo()用于触发动画效果
   animateTo({ duration: 5000, curve: Curve.Linear, iterations: 1 }, () => {
     this.flag = true;
   })
})

transition()方法的参数类型为TransitionOptions，其包含的属性有

参数名称	参数类型	参数描述
type	TransitionType	用于声明动画效果用于组件出现还是消失，可选值有Insert、Delete和All
opacity	number	用于设置透明度变化效果。为出现动画起点的透明度或消失动画终点的透明度。取值范围为[0, 1]，默认值为1。

translate		用于设置平移效果，为出现动画起点的偏移量和消失动画终点的偏移量。- x用于设置横向偏移量 - y用于设置纵向偏移量
scale		用于设置缩放效果，为出现动画起点的缩放倍数和消失动画终点的缩放倍数。(x,y)用于设置横向和纵向的缩放倍数。(centerX,centerY)用于设置缩放中心点的坐标，坐标原点是组件的左上角。
rotate		用于设置旋转效果。为出现动画起点的旋转角度和消失动画终点的旋转角度。(x,y,z)用于设置旋转轴方向，例如(1,0,0)表示沿x轴旋转，(0,1,0)表示沿y轴旋转，(0,0,1)表示沿z轴旋转。(centerX,centerY)用于设置旋转轴原点，默认值为(50% ,50%)，表示组件中心。angle用于设置旋转角度。

例子：

ts 复制代码

@Entry
@Component
struct TransitionPage {
  @State flag: boolean = false;

  build() {
    Column() {
      if (this.flag) {
        Image($r('app.media.img_atguigu'))
          .width(150)
          .height(150)
        //透明度
        // .transition({ type: TransitionType.All, opacity: 0 })
        //平移
        // .transition({ type: TransitionType.All, translate: { x: 100 } })
        //缩放
        // .transition({ type: TransitionType.All, scale: { x: 0, y: 0 } })
        //旋转
        .transition({
          type: TransitionType.All,
          rotate: {
            x: 0,
            y: 0,
            z: 1,
            angle: 90,
            centerY: 0,
            centerX: 0
          },
          opacity: 0
        })
      }

      Blank()

      Row({ space: 50 }) {
        Button('消失')
          .backgroundColor(Color.Orange)
          .onClick(() => {
            animateTo({ duration: 500 }, () => {
              this.flag = false;
            })
          })

        Button('出现')
          .backgroundColor(Color.Green)
          .onClick(() => {
            animateTo({ duration: 500 }, () => {
              this.flag = true;
            })
          })
      }

    }
    .padding({ top: 200, bottom: 200 })
    .width('100%')
    .height('100%')
  }
}