鸿蒙进阶-属性动画

hello大家好啊，这里是鸿蒙开天组，本日我们来学习鸿蒙中的动画属性。
先来说说动画~
属性值的变革，通常会引发 UI 的变革,结合动画可以让这个变革过程【更为流畅】，反之这个过程将在一瞬间完成，用户体验欠好，观感突兀。这就是动画的作用：链接
HarmonyOS 中的动画主要分为：

• 属性动画
  
• 转场动画
  
• 组件动画
  

这么三类，一些和动画相干的其他细节咱们接着往放学。
本日咱们主要来学习属性动画。
属性动画-animation

接下来看看怎样让咱们的应用动起来
组件的某些通用属性变革时，可以通过属性动画实现渐变过渡结果，提拔用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
基本使用

使用动画的核心步调如下：

• 声明相干状态变量
  
• 将状态变量设置到相干可动画属性方法上
  
• 通过属性动画接口开启属性动画（在属性动画上面的属性会应用动画）
  
• 通过状态变量改变UI界面
  

1. // 最核心写法，相关动画属性后续展开
2. 组件
3.   .属性1()
4.   .属性2()
5.   // .... animation 必须在需要动画的属性的后面
6.   .animation({})

复制代码

看完了概念，让我们来试一下~
基础模板

1. @Entry
2. @Component
3. struct Page01_animation {
4.   // 1. 声明相关状态变量
5.   @State translateY: number = 1
6.   @State bgColor: ResourceColor = Color.Pink
7.   @State fontColor: ResourceColor = '#0094ff'
8.   @State fontWeight: number = 100
10.   build() {
11.     Column() {
12.       Text('C')
13.         .width(100)
14.         .height(100)
15.         .opacity(1)
16.         .textAlign(TextAlign.Center)
17.          // 2.将状态变量设置到相关可动画属性接口
18.         .fontWeight(this.fontWeight)
19.         .backgroundColor(this.bgColor)
20.         .translate({ y: this.translateY })
21.       Button('修改状态变量')
22.         .onClick(() => {
23.           // 4. 通过状态变量改变UI界面
24.           this.bgColor = '#0094ff'
25.           this.translateY = 100
26.           this.fontColor = Color.Pink
27.           this.fontWeight = 900
28.         })
29.     }
30.     .width('100%')
31.     .height('100%')
32.     .justifyContent(FlexAlign.SpaceAround)
33.   }
34. }

复制代码

在上面的模板代码中，我们必要为容器添加动画，也就是给text的变量改变添加一个过渡。
为了方便明白，接下来的参考代码将变量改变的部门进行了函数封装，这样我们就可以得到这样一个结果 ：

1. @Entry
2. @Component
3. struct Page01_animation {
4.   // 1. 声明相关状态变量
5.   @State translateY: number = 1
6.   @State bgColor: ResourceColor = Color.Pink
7.   @State fontColor: ResourceColor = '#0094ff'
8.   @State fontWeight: number = 100
9.   @State isOrNot: boolean = false
11.   onclickEventEnd() {
12.     // 4. 通过状态变量改变UI界面
13.     this.bgColor = '#0094ff'
14.     this.translateY = 100
15.     this.fontColor = Color.Pink
16.     this.fontWeight = 900
17.   }
19.   onclickEventStart() {
20.     // 4. 通过状态变量改变UI界面
21.     this.bgColor = Color.Pink
22.     this.translateY = 1
23.     this.fontColor = Color.Pink
24.     this.fontWeight = 100
25.   }
27.   build() {
28.     Column() {
29.       Text('C')
30.         .width(100)
31.         .height(100)
32.         .opacity(1)// 2.将状态变量设置到相关可动画属性接口
33.         .fontWeight(this.fontWeight)
34.         .backgroundColor(this.bgColor)
35.         .textAlign(TextAlign.Center)
36.         .translate({ y: this.translateY })
37.       // 3.通过属性动画接口开启属性动画
38.         .animation({})
39.       Button('修改状态变量')
40.         .onClick(() => {
41.           if (this.isOrNot) {
42.             this.onclickEventStart()
43.             this.isOrNot = !this.isOrNot
44.           } else {
45.             this.onclickEventEnd()
46.             this.isOrNot = !this.isOrNot
47.           }
48.         })
49.     }
50.     .width('100%')
51.     .height('100%')
52.     .justifyContent(FlexAlign.SpaceAround)
53.   }
54. }

复制代码

常用属性

可以通过动画参数(以对象的形式通报)来定制动画结果

1. 组件
2.   .animation({ 动画参数 })

复制代码

名称	参数类型	必填	形貌
duration	number	否	动画时长，单位为毫秒。 默认值：1000
curve	string | Curve | ICurve	否	设置动画曲线。 默认值：Curve.EaseInOut
delay	number	否	动画耽误播放时间。单位为毫秒，默认不延时播放。 默认值：0 取值范围：(-∞, +∞)
iterations	number	否	动画播放次数。 默认值：1 取值范围：[-1, +∞) 说明： 设置为-1时表示无限次播放。设置为0时表示无动画结果。
playMode	PlayMode	否	动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal
onFinish	() => void	否	结束回调，动画播放完成时触发。 从API version 9开始，该接口支持在ArkTS卡片中使用。

动画曲线枚举值：

名称	形貌
Linear	表示动画从头至尾的速度都是雷同的。
Ease	表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn	表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut	表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut	表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn	标准曲线，CubicBezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn	减速曲线，CubicBezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn	加快曲线，CubicBezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration	急缓曲线，CubicBezier(0.0, 0.0, 0.0, 1.0)。
Sharp	锐利曲线，CubicBezier(0.33, 0.0, 0.67, 1.0)。
Rhythm	节奏曲线，CubicBezier(0.7, 0.0, 0.2, 1.0)。
Smooth	平滑曲线，CubicBezier(0.4, 0.0, 0.4, 1.0)。
Friction	阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

playMode 播放模式枚举值

名称	形貌
Normal	动画正向播放。
Reverse	动画反向播放。
Alternate	先正向播放，再反向播放。
AlternateReverse	先反向播放，后正向播放。

非常多的属性值，这里就不逐个尝试啦~有兴趣的可以自己尝试一下。
案例-扣头信息

接下来咱们来写一个小小的案例

需求：
   动画结果:
  

• 元素大小切换
  
• 动画次数无限，元素【加载之后】开启动画
  

  点击按钮触发

咱们先考虑怎样实现点击开启动画，元素加载之后涉及到一个还未学习的知识点
   核心步调：有结构，有逻辑
  1.结构：用 Text 方便调整实现结构
  2.动画：animation
          a.次数无限次
          b.动画线性：匀速
          c.改变的是缩放
                   i.宽高，界说在@State
  3.怎样触发：
          a.点击触发
  模板代码

1. @Entry
2. @Component
3. struct Page02_animationDemo1 {
4.   build() {
5.     Column({ space: 50 }) {
6.       Text('全场低至一分购')
7.         .fontSize(30)
8.         .fontWeight(900)
9.         .fontColor(Color.Red)
10.         .backgroundColor('#e8b66d')
11.         .padding(10)
12.         .borderRadius(20)
13.     }
14.     .width('100%')
15.     .height('100%')
16.     .padding(20)
18.   }
20.   @Styles
21.   fullSize() {
22.     .width('100%')
23.     .height('100%')
24.   }
25. }

复制代码

参考代码

1. @Entry
2. @Component
3. struct Page02_animationDemo1 {
4.   // 1. 声明相关状态变量
5.   @State scaleX: number = 1
6.   @State scaleY: number = 1
8.   build() {
9.     Column({ space: 50 }) {
10.       Text('全场低至一分购')
11.         .fontSize(30)
12.         .fontWeight(900)
13.         .fontColor(Color.Red)
14.         .backgroundColor('#e8b66d')
15.         .padding(10)
16.         .borderRadius(20)
17.         // 2.将状态变量设置到相关可动画属性接口
18.         .scale({
19.           x: this.scaleX,
20.           y: this.scaleY
21.         })
22.         // 3. 通过属性动画接口开启属性动画
23.         .animation({
24.           duration: 1000,
25.           curve: Curve.Ease,
26.           playMode: PlayMode.Alternate,
27.           iterations: -1
28.         })
29.         .onClick(() => {
30.           // 4.通过状态变量改变UI界面
31.           this.scaleX = 1.3
32.           this.scaleY = 1.3
33.         })
34.     }
35.     .width('100%')
36.     .height('100%')
37.     .padding(20)
39.   }
41.   @Styles
42.   fullSize() {
43.     .width('100%')
44.     .height('100%')
45.   }
46. }

复制代码

组件加载自动触发变乱

如果要实现元素加载的时候就开始动画，可以使用挂载变乱来实现，这是一个通用变乱
链接

名称	功能形貌
onAppear(event: () => void)	组件挂载表现时触发此回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。
onDisAppear(event: () => void)	组件卸载消散时触发此回调。 从API version 9开始，该接口支持在ArkTS卡片中使用。

怎样明白软件开辟中的变乱： 框架提供给开辟者，在特定时机注册自界说逻辑的一种机制
接下来进行一个测试~

1. @Entry
2. @Component
3. struct Page03_appearAnddisAppear {
4.   @State isShow: boolean = false
6.   build() {
7.     Column({ space: 50 }) {
8.       Button('切换显示')
9.         .onClick(() => {
10.           this.isShow = !this.isShow
11.         })
13.       if (this.isShow) {
14.         Text('我是文本')
15.           .width('100%')
16.           .onAppear(() => {
17.             console.log('加载了')
18.           })
19.           .onDisAppear(() => {
20.             console.log('卸载了')
21.           })
22.       }
24.     }
25.     .width('100%')
26.     .height('100%')
27.     .padding(20)
28.   }
29. }

复制代码

案例调整后的结果

1. @Entry
2. @Component
3. struct Page04_animationDemo1_event {
4.   // 1. 声明相关状态变量
5.   @State scaleX: number = 1
6.   @State scaleY: number = 1
8.   build() {
9.     Column({ space: 50 }) {
10.       Text('全场低至一分购')
11.         .fontSize(30)
12.         .fontWeight(900)
13.         .fontColor(Color.Red)
14.         .backgroundColor('#e8b66d')
15.         .padding(10)
16.         .borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
17.         .scale({
18.           x: this.scaleX,
19.           y: this.scaleY
20.         })// 3. 通过属性动画接口开启属性动画
21.         .animation({
22.           duration: 1000,
23.           curve: Curve.EaseInOut,
24.           playMode: PlayMode.Alternate,
25.           iterations: -1
26.         })
27.         .onAppear(() => {
28.           // 4.通过状态变量改变UI界面
29.           this.scaleX = 1.3
30.           this.scaleY = 1.3
31.         })
32.     }
33.     .width('100%')
34.     .height('100%')
35.     .padding(20)
37.   }
39.   @Styles
40.   fullSize() {
41.     .width('100%')
42.     .height('100%')
43.   }
44. }

复制代码

本日的文章就到这里啦！这里是鸿蒙开天组，感谢大家的关注,咱们下篇文章再见！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。