大家好，我是[晚风依旧似温柔]，新人一枚，欢迎大家关注~

✨ 前言

坦白说，第一次看到 ArkUI 动画系统的时候，我心里嘀咕了一句：“哎呦，这玩意儿比我上学时喜欢的人还难懂。”但当我真正深入下去后，我发现它不仅不难，而且挺香，香得像夜宵摊老板刚起锅的铁板烧。
  动画这东西啊，看似“华而不实”，其实是产品体验里的灵魂补丁。没有动画的 UI，就像没有灵魂的木偶，能用但乏味；有动画，又不能乱加，不然四不像。
  今天，我就带你从原理到实战，从属性动画到手势联动，从组合到案例，来一趟鸿蒙 ArkUI 动画完整深度游。
准备好了吗？别眨眼，动画开始播放了～

---

✨ 一、动画类型全解析：属性、关键帧、转场

鸿蒙 ArkUI 动画体系大体可以分成三大类：属性动画（Property Animation）、关键帧动画（Keyframe Animation）、转场动画（Transition / Motion）。
它们就像三兄弟：大哥稳（控制属性）、二哥野（关键帧）、三弟优雅（转场）。

---

1. 属性动画（AnimatedProperty）

用于数值、透明度、大小、位置等属性的平滑过渡，最常用也最实用。

示例：透明度从 0 变到 1

import { animateTo } from '@kit.ArkUI';

@State opacityValue: number = 0;

Button("点我淡入")
  .opacity(this.opacityValue)
  .onClick(() => {
    animateTo({ duration: 500 }, () => {
      this.opacityValue = 1;
    })
  })

一句话总结：属性动画用来“让东西从 A 变到 B”。

---

2. 关键帧动画（Keyframes）

当你想让对象经历多个中间状态，比如：小 → 大 → 小 → 超大，那就得靠关键帧动画。

示例：缩放循环动画

import { KeyframeAnimate } from '@kit.ArkUI';

KeyframeAnimate({
  duration: 2000,
  iterations: Infinity,
  keyframes: [
    { percent: 0,   transform: "scale(1)" },
    { percent: 50,  transform: "scale(1.3)" },
    { percent: 100, transform: "scale(1)" }
  ]
})

一句话总结：关键帧动画是“从 A → B → C → D”这种的高手。

---

3. 转场动画（Transition）

当组件进入、退出、切换状态时的动画，比如页面、列表、容器。

Transition 的核心是声明式 —— 不用具体写怎么动，只需要定义 “进入什么样、退出什么样”。

示例：组件显示/隐藏，加上转场

@State show: boolean = false;

Column() {
  if (this.show) {
    Text("弹出来啦")
      .transition({ type: TransitionType.Slide, direction: "bottom" })
  }
}

Button("切换").onClick(() => {
  this.show = !this.show
})

一句话总结：转场是一种“自动动画”，组件出现消失会自己动。

---

🎮 二、AnimatedProperty 和动画控制器

想做复杂动画？必须认识这两个核心基石：

• AnimatedProperty：可动画属性（类似可绑定变量，但带动画能力）
• AnimationController：动画的导演、计时器、操控器

---

1. AnimatedProperty：像能“跳舞的变量”

import { AnimatedProperty } from '@kit.ArkUI';

@State opacity: AnimatedProperty<number> = new AnimatedProperty(1)

这个 opacity 可以通过动画控制器播放，而不是立即赋值。

---

2. AnimationController：控制播放、暂停、逆序等

实战：按钮点击后播放“缩放弹跳”动画

@State scaleController = new AnimationController({
  duration: 300,
  easing: 'ease-out'
})

@State scaleValue: AnimatedProperty<number> = new AnimatedProperty(1);

Button("弹跳一下")
  .scale({ x: this.scaleValue.value, y: this.scaleValue.value })
  .onClick(() => {
    this.scaleController.playTo({ target: this.scaleValue, value: 1.2 });
    setTimeout(() => {
      this.scaleController.playTo({ target: this.scaleValue, value: 1 });
    }, 160);
  })

控制器可以：

✔ play
✔ playTo
✔ pause
✔ reverse
✔ stop

一句话总结：AnimatedProperty = 动画变量；AnimationController = 动画遥控器。

---

🧩 三、组合动画：让多个动画一起飞

现实中我们很少只让一个属性动，比如按钮放大时同时变亮、移动时同时旋转，这就需要组合动画。

ArkUI 组合动画通常有两种方式：

✔ animateTo 里写多个属性

animateTo({ duration: 500 }, () => {
  this.opacity = 1;
  this.scale = 1.2;
  this.rotate = 45;
})

✔ 多控制器并行

this.opacityController.play()
this.scaleController.play()
this.rotateController.play()

更灵活、更强大。

一句话总结：组合动画是“多线程的 UI 舞蹈”。

---

👉 四、手势联动动画：拖动就能动的 UI 才叫灵魂

要让用户觉得 UI “有手感”，就必须使用手势联动动画：拖到哪里动到哪里、滑多少缩多少。

例如典型的卡片上滑收起、下滑展开。

---

示例：跟随手势的缩放 + 透明度动画

@State offsetY: number = 0;

Gesture(
  GestureGroup(GesturePriority.High)
    .Pan({
      onUpdate: event => {
        this.offsetY += event.offsetY
      },
      onEnd: () => {
        animateTo({ duration: 300 }, () => {
          this.offsetY = 0
        })
      }
    })
)
.apply()

Column()
  .offset({ y: this.offsetY })
  .opacity(1 - Math.min(1, Math.abs(this.offsetY) / 300))
  .scale(1 - Math.min(0.2, Math.abs(this.offsetY) / 1000))

一句话总结：手势联动 = 动画实时驱动，而不是“触发后才开始”。

---

🎬 五、常见 UI 动效案例

这部分最实用，我给你几个常见效果：

---

1. 弹性 Button（点击缩放 + 恢复）

✔ 提升用户手感
✔ ArkUI 官方都推荐这种效果

@State scale: number = 1;

Button("弹我一下")
  .scale({ x: this.scale, y: this.scale })
  .onClick(() => {
    animateTo({ duration: 100 }, () => this.scale = 0.9)
    setTimeout(() => {
      animateTo({ duration: 150 }, () => this.scale = 1)
    }, 100)
  })

---

2. 页面加载骨架透明渐入

@State opacity: number = 0;

onPageShown() {
  animateTo({ duration: 600, easing: 'ease-out' }, () => {
    this.opacity = 1;
  })
}

---

3. 卡片上滑收起

@State position: number = 300;

animateTo({ duration: 400 }, () => {
  this.position = 0;
})

---

4. Tab 切换时下划线滑动

@State underlineX = new AnimatedProperty(0)

（可用 playTo 精确移动）

---

🏁 结语：动画不是“花里胡哨”，而是“灵魂调味料”

现在的 App，你不做动画，就是逆天改命地让用户觉得你“粗糙”。
  但动画究竟怎么做？什么时候用属性动画、什么时候用关键帧、什么时候用转场、什么时候跟手势绑定？
这些你现在已经有答案了。
  记住一句话：动画不是为了好看，而是为了让用户感觉“对”。
而鸿蒙 ArkUI 动画系统，就是你打造这种“感觉对”的终极武器。

如果觉得有帮助，别忘了点个赞+关注支持一下~
喜欢记得关注，别让好内容被埋没～