HarmonyOS Next 动画大全 01-属性动画

介绍

动画，指的是我们应用中的元素，在发生位置、大小、颜色、形状等属性变化时，可以产出一个缓慢变化的效果。让用户的焦点一直跟随

在应用的行动中，增加用户使用的体验和让用户知道当前的行动进度。

如下图的就是有无动画的效果对比：(图片来自华为鸿蒙应用开发文档)

另外，我们在使用手机应用这么多年中，动画的效果比比皆是。

网易云音乐

酷我音乐

酷狗音乐

动画分类

在 Harmony Next 中，动画的分类主要有以下几种

那么我们今天主要讲解前面的两种： 属性动画和帧动画。

属性动画又分为 属性动画 animation 和 显式动画 animateTo， 帧动画就是 @ohos.animator (动画)

这篇文章只讲解属性动画 animation。后续的其他动画会陆续发表。

那为什么将他们归类到一起呢，因为他们核心思想都是利用常见的样式属性，指定开始状态和结束状态，从而实现动画效果。

下面我们就直接开始吧。

可以实现动画的属性

首先我们需要理解具体那些样式属性可以出现动画效果。参考官网给出的定义：

以上的这些属性都可以简单总结为一个原则： 存在中间状态的属性可以有动画属性。那什么又是中间状态呢：

比如人的高度发展是存在中间状态的 ： 小万的身高由 100cm 长到 146cm，那么中间的状态有 101cm、102cm、。。146cm 等。

所以上面表格中的 宽度、坐标、边距、缩放、背景颜色(rgb(0,0,0) ->rgb(255,255,255)) 等就都存在中间状态

同理 人的性别 或者 人的生死是不存在中间状态的：小万男生变成女生？？？ 小万生变到死？？？

所以可见性-visibility、优先级-zIndex 都是不存在中间状态的 因此就没有办法实现动画效果

属性动画 animation

属性动画 animation 是我们最简单实现动画的技术了。直接上效果

代码

@Entry@Componentstruct Index {  // 缩放倍数  @State  scaleXY: number = 1  // 背景颜色  @State  bgColor: string = "#0094ff"
  build() {    Column() {      Button("点我就生气")        .scale({          x: this.scaleXY,          y: this.scaleXY        })        .backgroundColor(this.bgColor)          // ️️ ❤️❤️❤️ 属性动画        .animation({})        .onClick(() => {          // 点击修改属性          this.scaleXY = 2          this.bgColor = "#f00"        })    }    .width("100%")    .padding(30)  }}

代码解释

1. 设置样式 初始属性

2. 
   
   

3. 给按钮元素添加上样式属性

4. 
   
   

5. 给按钮设置属性动画 animation
   

6. 
   
   

7. 点击按钮时，修改属性，动画自动生效

8. 
   
   

9. 最后需要注意的是：在 animation 之上的样式属性会有动画效果，在 animation 之下的样式属性不会有动画效果

10. 
    
    

属性动画 animation 参数

属性动画接收传入配置参数实现调整动画的执行过程。如动画执行时间、次数等等。

animation(配置参数)

duration

动画执行时间比较好理解，根据你传入的时间来决定整个动画多长时间执行完

.animation({  // 500毫秒执行完毕  duration: 500,})

tempo

执行速度、默认是 1。最小值是 0。如果

1. duration 为 1 ，tempo 为 1，那么动画 1s 执行完毕

2. duration 为 1 ，tempo 为 0.1，那么动画 10s 执行完毕

curve

动画曲线，在动画执行时间一定的情况下，执行动画的速度可以快可慢，举个不恰当的例子：

假设小万要在公司花 1 分钟走到厕所：

1. 小万可以匀速的走完

2. 小万一开始不着急，慢慢走，中途突然来状况了，后半段路就要走快一点 先慢后快

3. 小万一开始很着急，跑着去，中途忍不住了，也干脆放弃了，后半段路就走慢一点 先快后慢

可选值参考：

再配上一张图参考

delay

延迟时间，默认为 0，当你设置了之后，执行动画时会先延迟，然后再开始执行

iterations

动画执行次数，默认为 1 次，-1 为无限

playMode

动画播放模式，提供 4 个选项

理解为类似开车一样，从出发地 A 然后开到终点 B 如果 一次路途看成是执行一次动画的话，那么执行 4 次动画时：

1. Normal

2. A-B

3. A-B

4. A-B

5. A-B

6. Reverse

7. B-A

8. B-A

9. B-A

10. B-A

11. Alternate

12. A-B

13. B-A

14. A-B

15. B-A

16. AlternateReverse

17. B-A

18. A-B

19. B-A

20. A-B

初始代码

@Entry@Componentstruct Index {  @State  translateX: number = 0
  build() {    Column() {      Button("点我就移动")        .translate({ x: this.translateX })        .animation({          iterations: 4,          playMode: PlayMode.Normal        })        .onClick(() => {          this.translateX = 240        })    }    .width("100%")    .padding({      top: 30    })    .alignItems(HorizontalAlign.Start)  }}

Normal

.animation({  iterations: 4,  playMode: PlayMode.Normal})

1. A-B

2. A-B

3. A-B

4. A-B

Reverse

.animation({  iterations: 4,  playMode: PlayMode.Reverse})

1. B-A

2. B-A

3. B-A

4. B-A

Alternate

.animation({  iterations: 4,  playMode: PlayMode.Alternate})

1. A-B

2. B-A

3. A-B

4. B-A

AlternateReverse

1. B-A

2. A-B

3. B-A

4. A-B

.animation({  iterations: 4,  playMode: PlayMode.AlternateReverse})

onFinish

动画执行完成后回调函数

.animation({  onFinish() {    AlertDialog.show({ message: "奥运落幕啦" })  }})

总结

动画能够提升用户体验并使应用程序更加生动有趣。通过使用动画，开发者可以平滑地展示 UI 元素的变化，例如位置、大小、颜色或形状的变化。本文档将重点介绍 Harmony Next 中的属性动画，并提供一些基本概念和示例代码。

可以实现动画的属性

可以实现动画效果的属性包括但不限于：

• 布局属性（位置、大小等）

• 仿射变换（平移、旋转等）

• 背景（颜色、模糊等）

• 内容（文字大小、颜色等）

• 前景（颜色等）

• Overlay 属性

• 外观（透明度、圆角等）

这些属性之所以能实现动画，是因为它们存在中间状态。

属性动画 animation

属性动画是最简单的动画实现方式之一。它通过改变 UI 元素的属性值来实现动画效果。

注意事项

• 在animation之上的样式属性会有动画效果。

• 在animation之下的样式属性不会有动画效果。

属性动画 animation 参数

属性动画可以通过不同的参数来调整动画的执行过程，包括：

• duration（动画持续时间）

• tempo（动画速度）

• curve（动画曲线）

• delay（延迟时间）

• iterations（动画重复次数）

• playMode（动画播放模式）

• onFinish（动画完成后的回调）

每个参数都有具体的含义和用途，可以根据需要灵活调整动画效果。