HarmonyOS应用《玄象》开发实战：@State fadeOpacity 淡入动画与 animation curve

阅读时长：约 19 分钟　|　难度：★★★★☆　|　篇章：第 2 篇 · 启动体验：Splash 与动画

对应源码：entry/src/main/ets/pages/SplashPage.ets

前言

动画是应用"活起来"的关键。玄象项目启动页通过 @State fadeOpacity 与 @State logoScale 双状态变量驱动"淡入 + 缩放"动画，营造太极图与标题优雅浮现的视觉效果。本篇将深入剖析玄象项目启动页动画的实现细节：从 @State 响应式状态、opacity 透明度属性、scale 缩放属性，到 animation 动画配置与 Curve 缓动曲线。掌握这套 ArkUI 动画方法论，您就能为任何 HarmonyOS 应用打造流畅自然的动画体验。

提示：ArkUI 动画系统的精髓在于"状态变更驱动动画"。开发者只需修改 @State 变量的值，ArkUI 自动计算并播放过渡动画。

一、动画状态变量定义

1.1 双状态变量

typescript 复制代码

@State fadeOpacity: number = 0;
@State logoScale: number = 0.8;

玄象项目用两个 @State 变量控制启动页动画：

状态变量	初始值	终态值	作用
`fadeOpacity`	0	1	透明度从 0 渐变到 1
`logoScale`	0.8	1	缩放从 0.8 渐变到 1

1.2 @State 装饰器的作用

@State 是 ArkUI 的响应式状态装饰器：

观察变化：当变量值改变时，ArkUI 自动检测。
触发渲染：引用该变量的 UI 组件自动重新渲染。
支持动画 ：配合 .animation() 修饰器，状态变更可触发动画过渡。

1.3 状态变更时机

typescript 复制代码

aboutToAppear(): void {
  this.fadeOpacity = 0;
  this.logoScale = 0.8;

  setTimeout(() => {
    this.fadeOpacity = 1;     // 触发淡入动画
    this.logoScale = 1;       // 触发缩放动画
  }, 100);
}

玄象项目在 aboutToAppear 中：

初始化状态 ：将 fadeOpacity 与 logoScale 重置为初始值。
延迟 100ms：等待组件首次渲染完成。
变更状态：将状态值改为终态，触发动画。

提示：延迟 100ms 是 ArkUI 动画的关键技巧。如果状态在组件渲染前就改变，动画可能丢失。

二、opacity 透明度属性

2.1 opacity 属性应用

typescript 复制代码

Column({ space: 20 }) {
  // 中央内容
}
.opacity(this.fadeOpacity)

opacity(value) 设置组件透明度：

值	视觉效果
0	完全透明（不可见）
0.5	半透明
1	完全不透明

2.2 透明度动画的视觉感受

text 复制代码

fadeOpacity = 0    →  透明（不可见）
       ↓
[100ms 延迟]
       ↓
fadeOpacity = 1    →  不透明（完全可见）
       ↓
[animation: 1000ms, curve: EaseOut]
       ↓
视觉过渡：从透明渐变到可见，先快后慢

2.3 opacity 的性能优势

opacity 动画的性能优势：

GPU 加速：opacity 是 GPU 友好属性，硬件加速渲染。
无需重排：opacity 变化不触发布局重排。
平滑过渡：60fps 流畅播放。

提示：玄象项目选择 opacity 而非 visibility，正是因为 opacity 支持动画过渡，而 visibility 只能切换状态。

三、scale 缩放属性

3.1 scale 属性应用

typescript 复制代码

Column({ space: 20 }) {
  // 中央内容
}
.scale({ x: this.logoScale, y: this.logoScale })

scale({ x, y }) 设置组件 X/Y 方向的缩放比例：

x/y 值	视觉效果
0	完全消失
0.5	缩小到 50%
1	原始大小
1.5	放大到 150%

3.2 缩放动画的视觉感受

text 复制代码

logoScale = 0.8    →  80% 大小
       ↓
[100ms 延迟]
       ↓
logoScale = 1      →  100% 大小
       ↓
[animation: 1000ms, curve: EaseOut]
       ↓
视觉过渡：从 80% 渐变到 100%，先快后慢

3.3 双轴缩放 vs 单一缩放

玄象项目使用双轴缩放：

typescript 复制代码

.scale({ x: this.logoScale, y: this.logoScale })

也可使用单一 scale：

typescript 复制代码

.scale(this.logoScale)

双轴缩放的优势：

可分别控制：X 轴和 Y 轴可设置不同缩放比例。
更精细动画：可实现"压扁回弹"等非均匀缩放动画。

四、animation 动画配置

4.1 animation 修饰器

typescript 复制代码

Column({ space: 20 }) {
  // ...
}
.opacity(this.fadeOpacity)
.scale({ x: this.logoScale, y: this.logoScale })
.animation({ duration: 1000, curve: Curve.EaseOut })

animation(config) 修饰器配置动画：

参数	类型	作用
`duration`	number	动画时长（毫秒）
`curve`	Curve	缓动曲线
`delay`	number	延迟启动（毫秒）
`iterations`	number	重复次数
`playMode`	PlayMode	播放模式

4.2 玄象项目动画配置

typescript 复制代码

.animation({ duration: 1000, curve: Curve.EaseOut })

duration: 1000ms：动画时长 1 秒，既不太快也不太慢。
curve: Curve.EaseOut：缓动曲线，先快后慢。

4.3 animation 的作用范围

animation 修饰器作用于其前面的属性变化：

typescript 复制代码

Column()
  .opacity(this.fadeOpacity)        // ← 动画作用于此
  .scale({ x: this.logoScale, y: this.logoScale })  // ← 动画作用于此
  .animation({ duration: 1000, curve: Curve.EaseOut })

opacity 与 scale 的变化都会以 1000ms 的 EaseOut 曲线过渡。

五、Curve 缓动曲线详解

5.1 Curve 枚举

ArkUI 提供多种内置缓动曲线：

Curve 值	曲线形状	适用场景
`Linear`	匀速	进度条、机械运动
`Ease`	通用缓动	默认动画
`EaseIn`	先慢后快	元素消失
`EaseOut`	先快后慢	元素出现
`EaseInOut`	两端慢中间快	状态切换
`FastOutSlowIn`	Material 风格	UI 过渡
`LinearOutSlowIn`	入场动画	元素入场
`FastOutLinearIn`	出场动画	元素出场

5.2 玄象项目的曲线选择

玄象项目启动页选择 Curve.EaseOut：

typescript 复制代码

.animation({ duration: 1000, curve: Curve.EaseOut })

理由：

元素出现场景：启动页中央内容"出现"，EaseOut 是首选。
有力道的浮现：先快后慢，让元素以"势如破竹"的方式浮现。
自然的视觉停留：动画结束前的减速让用户视觉自然停留。

5.3 自定义贝塞尔曲线

typescript 复制代码

.animation({
  duration: 1000,
  curve: curves.cubicBezierCurve(0.4, 0.0, 0.2, 1.0)
})

玄象项目若需要 Material Design 风格的过渡，可使用自定义贝塞尔曲线。

5.4 弹簧曲线

typescript 复制代码

.animation({
  duration: 1000,
  curve: curves.springCurve(0.5, 0.8, 0.4, 0.6)
})

弹簧曲线适用于"回弹"动画，如按钮按下回弹。

六、动画的进阶技巧

6.1 多属性异步动画

玄象项目 opacity 与 scale 同步动画。若要异步：

typescript 复制代码

Column()
  .opacity(this.fadeOpacity)
  .animation({ duration: 800, curve: Curve.EaseOut })
  .scale({ x: this.logoScale, y: this.logoScale })
  .animation({ duration: 1200, curve: Curve.EaseInOut })

opacity 800ms EaseOut
scale 1200ms EaseInOut

6.2 延迟动画

typescript 复制代码

.animation({ duration: 1000, delay: 500, curve: Curve.EaseOut })

延迟 500ms 后开始动画，适用于"先 A 后 B"的级联动画。

6.3 重复动画

typescript 复制代码

.animation({ duration: 2000, iterations: -1, curve: Curve.Linear })

iterations: -1 表示无限重复，适用于"太极图旋转"等持续动画。

七、玄象项目动画体系规划

7.1 启动页动画

淡入 + 缩放：1 秒，EaseOut
3 秒后跳转

7.2 首页"今日天地"卡片动画

typescript 复制代码

@State cardScale: number = 0.95;

aboutToAppear() {
  setTimeout(() => {
    this.cardScale = 1;
  }, 200);
}

build() {
  Column()
    .scale({ x: this.cardScale, y: this.cardScale })
    .animation({ duration: 600, curve: Curve.FastOutSlowIn })
}

7.3 卦象大轮盘旋转动画

typescript 复制代码

@State rotation: number = 0;

build() {
  Image($r('app.media.great_wheel'))
    .rotate({ angle: this.rotation })
    .animation({ duration: 30000, iterations: -1, curve: Curve.Linear })
}

aboutToAppear() {
  this.rotation = 360;
}

提示：玄象项目若实现"太极图持续旋转"，需要在 aboutToAppear 中持续改变 rotation 状态，配合无限重复动画。

八、动画性能优化

8.1 优先使用 transform 属性

ArkUI 动画属性的性能排序（从高到低）：

opacity：GPU 加速，性能最佳
transform（scale/rotate/translate）：GPU 加速
width/height：触发重排，性能较差
margin/padding：触发重排

8.2 避免大组件动画

动画作用于大组件时，性能开销大。玄象项目启动页中央内容仅包含太极图与文字，组件树较小，动画性能无忧。

8.3 使用 animateTo 替代 animation

animateTo 提供更精确的动画控制：

typescript 复制代码

animateTo({ duration: 1000, curve: Curve.EaseOut }, () => {
  this.fadeOpacity = 1;
  this.logoScale = 1;
});

提示：玄象项目当前使用 animation 修饰器方案。若需要"动画完成回调"等高级功能，可切换到 animateTo。

九、玄象项目动画设计原则

9.1 时长规范

动画类型	推荐时长	玄象项目应用
微动画（按钮按下）	100-200ms	暂未实现
短动画（卡片淡入）	300-600ms	首页卡片
中动画（启动页淡入）	800-1200ms	启动页
长动画（轮盘旋转）	5000-30000ms	卦象大轮盘

9.2 曲线规范

场景	推荐曲线
元素出现	EaseOut
元素消失	EaseIn
状态切换	EaseInOut
持续旋转	Linear

9.3 动画一致性

玄象项目所有页面动画遵循统一规范：

同类动画使用相同 duration 与 curve
避免页面间动画风格不一致

总结

本篇以玄象项目启动页 fadeOpacity 与 logoScale 动画为蓝本，深入剖析了 HarmonyOS ArkUI 动画系统：从 @State 响应式状态、opacity 透明度、scale 缩放，到 animation 修饰器配置与 Curve 缓动曲线，再到动画进阶技巧（异步、延迟、重复）与性能优化。掌握这套动画方法论，您就能为任何 HarmonyOS 应用打造流畅自然的动画体验。

下一篇：《16 · setTimeout + router.replaceUrl 的 3 秒跳转约定》，将带您深入玄象项目启动页跳转首页的核心机制。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

HarmonyOS 官方文档：animation 动画
HarmonyOS 官方文档：Curve 缓动曲线
HarmonyOS 官方文档：animateTo
Material Design 动画规范：material.io/design/motion
开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net