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

玲小叮当2024-11-10 14:24

提示：本文根据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%')
  }
}
相关推荐
Damon小智2 小时前
HarmonyOS NEXT 技术实践-基于基础视觉服务的多目标识别
华为·harmonyos
爱笑的眼睛1120 小时前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
K.P20 小时前
鸿蒙元服务从0到上架【第三篇】（第二招有捷径）
华为·harmonyos·鸿蒙系统
K.P21 小时前
鸿蒙元服务从0到上架【第二篇】
华为·harmonyos·鸿蒙系统
敲代码的小强1 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
程序猿会指北1 天前
纯血鸿蒙APP实战开发——Text实现部分文本高亮和超链接样式
移动开发·harmonyos·arkts·openharmony·arkui·组件化·鸿蒙开发
鸿蒙自习室1 天前
鸿蒙开发——关系型数据库的基本使用与跨设备同步
前端·数据库·华为·harmonyos·鸿蒙
SoraLuna2 天前
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
开发语言·macos·ui·华为·harmonyos
资讯分享周2 天前
鸿蒙风起，未来已来——云学堂鸿蒙应用认证开营啦！
华为·harmonyos
Lincode122 天前
HarmonyOS--鸿蒙三方库--lottie
华为·harmonyos
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07VSCode插件 —— Cody AI （免费AI助手！）08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）