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

头像
玲小叮当
     北京
    阅读 8 分钟

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

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

    一、定时器

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

    1.1 参数

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

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

    1.2 事件

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

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

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

    二、导航组件

    2.1 概述

    Tabs组件的基本用法如下

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

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

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

    2.2 导航栏样式

    2.2.1 导航栏位置

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

    verticalfalsefalsetruetrue
    barPositionStartEndStartEnd
    效果1235

    2.2.2 可滚动导航栏

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

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

    2.2.3 自定义导航栏

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

    @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.1
    在鸿蒙应用中，开发者可以为组件配置两类动画效果，一是组件的布局相关属性（如尺寸、位置等）发生变化时的布局更新动画，二是组件出现或消失时的组件转场动画，各自的效果如下图所示

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

    3.2 布局更新动画

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

    3.2.1 显式动画

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

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

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

    • 动画参数
      该参数用于设置动画时长、属性值变化曲线等等，其类型为AnimateParam，其包含的属性有
      |名称| 类型| 描述|
      |--|--|--|
      |duration| number | 动画持续时间，单位为毫秒，默认值为1000|
      |curve| Curve |动画曲线|
      |delay |number| 延迟播放，单位为毫秒，默认值为0|
      |iterations| number| 循环播放次数，默认值为1|
      |playMode| PlayMode|动画播放模式|
      |onFinish| () => void| 动效播放完成回调|

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

      @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()之前，例如

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

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

    @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()用于触发上述的组件转场动画效果，具体用法如下

    @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，其包含的属性有

    参数名称参数类型参数描述效果
    typeTransitionType用于声明动画效果用于组件出现还是消失，可选值有Insert、Delete和All
    opacitynumber用于设置透明度变化效果。为出现动画起点的透明度或消失动画终点的透明度。取值范围为[0, 1]，默认值为1。opacity
    translate1用于设置平移效果，为出现动画起点的偏移量和消失动画终点的偏移量。- x用于设置横向偏移量 - y用于设置纵向偏移量translate
    scale22用于设置缩放效果，为出现动画起点的缩放倍数和消失动画终点的缩放倍数。(x,y)用于设置横向和纵向的缩放倍数。(centerX,centerY)用于设置缩放中心点的坐标，坐标原点是组件的左上角。scale
    rotatesdd用于设置旋转效果。为出现动画起点的旋转角度和消失动画终点的旋转角度。(x,y,z)用于设置旋转轴方向，例如(1,0,0)表示沿x轴旋转，(0,1,0)表示沿y轴旋转，(0,0,1)表示沿z轴旋转。(centerX,centerY)用于设置旋转轴原点，默认值为(50% ,50%)，表示组件中心。angle用于设置旋转角度。rotate

    例子：

    @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%')
  }
}
    harmonyosharmonyos-nextharmonyos先行者
    玲小叮当
    86 声望12 粉丝

    一名前端人儿的笔记，欢迎来到这里，希望这里的文章对你有所帮助！

    « 上一篇
    五、鸿蒙开发-组件状态管理
    下一篇 »
    七、鸿蒙开发-页面路由、组件生命周期钩子函数

    引用和评论

    推荐阅读
    头像
    八、鸿蒙开发-网络请求、应用级状态管理

    玲小叮当阅读 315

    头像
    “一起学 HarmonyOS”第二弹来啦！

    SegmentFault思否赞 6阅读 30.7k评论 5

    头像
    HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

    申公豹赞 8阅读 2k评论 3

    头像
    API接口设计的未来趋势：探索技术方向与实践方案

    Swift社区赞 3阅读 1.1k

    头像
    HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

    Swift社区赞 3阅读 1k

    头像
    构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战

    Swift社区赞 3阅读 857

    头像
    如何构建安全可靠的 HarmonyOS 应用

    Swift社区赞 3阅读 845

    0 条评论
    得票最新