HarmonyOS：动画 motionPath 、 animateToImmediately API自学指南 原创

在日常的鸿蒙应用开发工作中，我常常遇到需要为应用添加灵动、流畅动画效果的场景，从一个按钮的简单位移，到复杂组件的渐变展示，动画已然成为提升用户体验不可或缺的部分。然而，初涉鸿蒙开发的动画领域时，面对众多的 API 和繁杂的参数设置，我深感迷茫与困惑。为了帮助像曾经的我一样在这方面苦苦摸索的开发者，也为了自己能更好地梳理知识体系，便有了这篇技术博客。

今天，我想重点分享两个在鸿蒙开发中非常实用的动画相关 API：​​motionPath​​​ 和 ​​animateToImmediately​​。这两个 API 涵盖了从基础的位移动画路径设定，到进阶的显式动画立即下发功能，掌握它们，能让你的应用瞬间 “活” 起来。

一、​​motionPath​​ API 详解

从 API Version 7 开始支持，它允许我们精细地控制组件的运动路径，为用户带来别具一格的视觉体验。

1. 基本语法

​​motionPath(value: MotionPathOptions)​​​，这里的 ​​value​​ 是关键，它承载了所有关于运动路径的设置信息。

2. 参数剖析

• ​​value​​​：必填项，类型为 ​​MotionPathOptions​​，它就像是一个装满动画路径秘密的宝箱。

<!---->

• ​​MotionPathOptions​​ 自身又包含多个重要参数：

<!---->

• ​​path​​​：字符串类型，必填。这是定义组件运动轨迹的核心，使用 svg 路径字符串来描绘。例如 ​​'Mstart.x start.y L50 50 Lend.x end.y Z'​​​，这里巧妙地用 ​​start​​​ 和 ​​end​​ 替代了起点和终点坐标，让路径设定更灵活，参考绘制路径文档能解锁更多玩法。当设置为空字符串时，相当于关闭路径动画，组件就会乖乖待在原地啦。
• ​​from​​​：数字类型，非必填，默认值是 ​​0.0​​​，取值范围在 ​​[0, 1]​​​。它指定了运动路径的起点位置比例，若输入小于 0 或大于 1 的值，系统会智能地将其按默认值 ​​0​​ 处理。
• ​​to​​​：数字类型，非必填，默认值 ​​1.0​​​，取值范围同样是 ​​[0, 1]​​​。它代表运动路径的终点位置比例，要注意设置时需满足 ​​to​​​ 值 >= 异常值处理后的 ​​from​​ 值，否则可能得不到预期效果。
• ​​rotatable​​​：布尔类型，非必填，默认值为 ​​false​​​。当设为 ​​true​​ 时，组件会如同灵动的舞者，跟随路径旋转，增添动态美感。

3. 示例代码解读

以下是一个生动的示例，展示如何让按钮组件沿着设定好的路径欢快 “奔跑”：

// xxx.ets
@Entry
@Component
struct MotionPathExample {
  @State toggle: boolean = true

  build() {
    Column() {
      Button('click me').margin(50)
        // 执行动画：从起点移动到(300,200)，再到(300,500)，再到终点
       .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
       .onClick(() => {
          animateTo({ duration: 4000, curve: Curve.Linear }, () => {
            this.toggle =!this.toggle // 通过this.toggle变化组件的位置
          })
        })
    }.width('100%').height('100%').alignItems(this.toggle? HorizontalAlign.Start : HorizontalAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

在这段代码中，我们创建了一个按钮，点击它后，按钮会沿着 ​​'Mstart.x start.y L300 200 L300 500 Lend.x end.y'​​​ 的路径移动，从起点（默认 ​​0.0​​​ 比例处）稳步迈向终点（默认 ​​1.0​​​ 比例处），并且在移动过程中欢快旋转（因为 ​​rotatable​​​ 设为 ​​true​​​），同时借助 ​​animateTo​​ 控制动画时长为 4000 毫秒，曲线为线性，让整个动画流畅自然。

另外，从 API version 11 开始，该接口支持在元服务中使用，这无疑为元服务开发中的动画需求打开了新大门，让元服务界面也能拥有炫酷动感。

二、​​animateToImmediately​​ API 深度探索

从 API Version 12 开始闪亮登场，它为我们提供了显式动画立即下发的超能力。

1. 语法结构

​​animateToImmediately(value: AnimateParam, event: () => void): void​​，简洁的外表下蕴含强大功能。

2. 参数洞察

• ​​value​​​：必填，类型 ​​AnimateParam​​，负责调配动画效果的各种参数，如延迟时间、持续时长等，是动画节奏的指挥官。
• ​​event​​：必填，是一个返回值为空的函数类型，也就是闭包函数。在这个闭包函数里，组件状态的任何改变都会被系统敏锐捕捉，并自动插入过渡动画，让变化丝滑顺畅。

3. 示例实战

看看下面这段代码如何巧用该 API 实现复杂的动画序列：

// xxx.ets
@Entry
@Component
struct AnimateToImmediatelyExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State opacitySize: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Column()
     .width(this.widthSize)
     .height(this.heightSize)
     .backgroundColor(Color.Orange)
     .opacity(this.opacitySize)
      Button('change size')
       .margin(30)
       .onClick(() => {
          if (this.flag) {
            animateToImmediately({
              delay: 0,
              duration: 1000
            }, () => {
              this.opacitySize = 1
            })
            animateTo({
              delay: 1000,
              duration: 1000
            }, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          } else {
            animateToImmediately({
              delay: 0,
              duration: 1000
            }, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
            animateTo({
              delay: 1000,
              duration: 1000
            }, () => {
              this.opacitySize = 0
            })
          }
          this.flag =!this.flag
        })
    }.width('100%').margin({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

这里，点击按钮后，根据 ​​flag​​​ 的状态，首先利用 ​​animateToImmediately​​​ 立即触发透明度变化动画，让组件瞬间显现（设置延迟为 0，持续 1000 毫秒使透明度变为 1），随后通过 ​​animateTo​​​ 按顺序调整组件的宽度和高度，实现一套连贯又富有层次感的动画组合。而且，从 API version 12 起，它也在元服务中有了用武之地，配合元服务的系统能力 ​​SystemCapability.ArkUI.ArkUI.Full​​，为元服务的交互添彩。

最后如果这篇文章对你有帮助，希望您能关注，点赞，加收藏哦～～～～