提示：本文根据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("我的")
}

其中，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 自定义导航栏

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

例子：

@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()是一个全局的动画函数，该函数可用于触发动画效果，定义如下

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

参数名称	参数类型	参数描述	效果
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用于设置旋转角度。

例子：

@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%')}
}