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

Harmony 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
@Component
struct 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. 给按钮设置属性动画 animation
   
   
4. 点击按钮时，修改属性，动画自动生效
   
   最后需要注意的是：在animation之上的样式属性会有动画效果，在animation之下的样式属性不会有动画效果

Button("点我就生气")
    // 在animation之上的样式属性会有动画效果
    .scale({
      x: this.scaleXY,
      y: this.scaleXY
    })
    .animation({})// 
    // 在animation之下的样式属性不会有动画效果
    .backgroundColor(this.bgColor)

属性动画 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

1. A-B
2. A-B
3. A-B
4. A-B

2. Reverse

1. B-A
2. B-A
3. B-A
4. B-A

3. Alternate

1. A-B
2. B-A
3. A-B
4. B-A

4. AlternateReverse

1. B-A
2. A-B
3. B-A
4. A-B

初始代码

@Entry
@Component
struct 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（动画完成后的回调）

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