阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 2 篇 · 启动体验Splash 与动画 对应源码entry/src/main/ets/pages/SplashPage.ets、entry/src/main/ets/pages/Index.ets前言启动页是用户对应用的第一印象。玄象项目作为一款中华传统文化主题应用启动页采用深邃星空 金色太极的视觉语言传递出“玄之又玄众妙之门“的东方美学。本篇将深入剖析玄象项目SplashPage的实现细节从State状态定义、Stack层叠布局、Canvas多实例管理到aboutToAppear生命周期与setTimeout跳转。掌握这些技术细节您就能为任何 HarmonyOS 应用打造令人印象深刻的启动体验。提示启动页的设计精髓在于“瞬间传达品牌调性“。玄象项目用 3 秒钟让用户感受到东方神秘主义与金色质感这一视觉锚点将贯穿整个应用。一、SplashPage 完整源码1.1 源码全貌import { Colors } from ../common/constants/Colors; import { router } from kit.ArkUI; Entry Component export struct SplashPage { State fadeOpacity: number 0; State logoScale: number 0.8; private timer: number -1; private settings: RenderingContextSettings new RenderingContextSettings(true); private starFieldContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); private starMapContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); private taijiContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); aboutToAppear(): void { this.fadeOpacity 0; this.logoScale 0.8; setTimeout(() { this.fadeOpacity 1; this.logoScale 1; }, 100); this.timer setTimeout(() { router.replaceUrl({ url: pages/HomePage }); }, 3000); } aboutToDisappear(): void { if (this.timer ! -1) { clearTimeout(this.timer); } } build() { Stack() { // 星空背景 Canvas(this.starFieldContext) .width(100%) .height(100%) .onReady(() { this.drawStarField(this.starFieldContext, this.starFieldContext.width, this.starFieldContext.height); }) // 底部星图装饰 Canvas(this.starMapContext) .width(100%) .height(40%) .align(Alignment.Bottom) .onReady(() { this.drawStarMap(this.starMapContext, this.starMapContext.width, this.starMapContext.height); }) // 中央内容 Column({ space: 20 }) { Canvas(this.taijiContext) .width(220) .height(220) .margin({ top: 100 }) .onReady(() { this.drawTaiji(this.taijiContext, this.taijiContext.width, this.taijiContext.height); }) Column({ space: 12 }) { Text(玄象) .fontSize(56) .fontWeight(FontWeight.Bold) .fontColor(Colors.PRIMARY_GOLD) .letterSpacing(8) Text(中华传统文化) .fontSize(20) .fontColor(Colors.LIGHT_GOLD) .letterSpacing(4) } } .width(100%) .height(100%) .opacity(this.fadeOpacity) .scale({ x: this.logoScale, y: this.logoScale }) .animation({ duration: 1000, curve: Curve.EaseOut }) } .width(100%) .height(100%) .backgroundColor(Colors.BG_DARK) } private drawStarField (canvas: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number) { // ... } private drawTaiji (canvas: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number) { // ... } private drawStarMap (canvas: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number) { // ... } }1.2 源码结构拆解玄象项目SplashPage.ets包含四大组成部分部分行数职责状态与上下文定义8 行State与CanvasRenderingContext2D生命周期回调18 行aboutToAppear/aboutToDisappearbuild渲染方法60 行Stack 3 个Canvas 中央文字Canvas 绘制函数100 行星空 / 太极 / 星图二、State 状态变量2.1 状态变量定义State fadeOpacity: number 0; State logoScale: number 0.8;玄象项目使用两个State变量控制启动页动画状态变量初始值作用fadeOpacity0中央内容的透明度logoScale0.8中央内容的缩放比例2.2 State 工作原理State是 ArkUI 的响应式状态装饰器当变量值改变时引用该变量的 UI 组件会自动重新渲染State fadeOpacity 0 ↓ [UI 渲染] opacity(0) ↓ [setTimeout 100ms 后] fadeOpacity 1 ↓ [ArkUI 监听到变化] ↓ [重新渲染] opacity(1) 动画过渡2.3 状态变量的初始化时机玄象项目的状态变量初始化发生在组件实例创建时State fadeOpacity: number 0; // 实例化时初始化为 0但在aboutToAppear中又重新赋值aboutToAppear(): void { this.fadeOpacity 0; // 重置为 0 this.logoScale 0.8; // 重置为 0.8 // ... }提示这种“双重保险“的写法确保每次进入启动页时状态都是从初始值开始的。即便应用被系统回收后重建动画也能正确播放。三、timer 与生命周期管理3.1 timer 变量定义private timer: number -1;玄象项目使用private timer保存setTimeout返回的 timer id初始值-1表示“无 timer“。3.2 aboutToAppear 中启动两个 timeraboutToAppear(): void { this.fadeOpacity 0; this.logoScale 0.8; // timer 1100ms 后开始淡入动画 setTimeout(() { this.fadeOpacity 1; this.logoScale 1; }, 100); // timer 23000ms 后跳转首页 this.timer setTimeout(() { router.replaceUrl({ url: pages/HomePage }); }, 3000); }玄象项目在aboutToAppear中启动两个定时器淡入动画定时器100ms 后将透明度从 0 改为 1触发淡入动画。跳转定时器3000ms 后调用router.replaceUrl跳转到首页。3.3 aboutToDisappear 中清理 timeraboutToDisappear(): void { if (this.timer ! -1) { clearTimeout(this.timer); } }玄象项目在aboutToDisappear中清理 timer避免组件销毁后定时器仍触发。3.4 两个 timer 的差异timer用途是否需要清理淡入动画 timer触发一次性状态变更不需要执行完自动销毁跳转 timer3 秒后跳转需要避免重复跳转提示玄象项目仅保存了第二个 timer 的 id因为只有这个 timer 在组件销毁时可能还未执行。第一个 timer 在 100ms 内必然执行完毕无需保存 id。四、Stack 层叠布局4.1 Stack 容器特性Stack是 ArkUI 提供的层叠布局容器子元素按顺序堆叠后声明的子元素在上方默认居中对齐可通过.align()修改对齐方式4.2 SplashPage 的 Stack 结构Stack() { // 第一层星空背景最底层占满全屏 Canvas(this.starFieldContext) .width(100%) .height(100%) // 第二层底部星图装饰中间层对齐底部占下方 40% Canvas(this.starMapContext) .width(100%) .height(40%) .align(Alignment.Bottom) // 第三层中央内容最上层太极图 文字 Column({ space: 20 }) { // ... } .width(100%) .height(100%) } .width(100%) .height(100%) .backgroundColor(Colors.BG_DARK)4.3 三层视觉关系图┌──────────────────────────────────────┐ │ │ │ [星空背景 Canvas] │ ← 第一层最底 │ [底部星图 Canvas] │ ← 第二层中间 │ │ │ [太极 Canvas] │ ← 第三层最上 │ [玄象 标题] │ │ [中华传统文化] │ │ │ └──────────────────────────────────────┘4.4 Stack 的关键配置玄象项目Stack的关键配置配置值作用width100%占满屏幕宽度height100%占满屏幕高度backgroundColorColors.BG_DARK深色背景避免首帧白屏提示.backgroundColor(Colors.BG_DARK)是玄象项目启动页的关键技巧。它确保即 Canvas 还未完成绘制用户看到的也是深色背景而非刺眼的白色。五、Canvas 多实例管理5.1 三个 CanvasRenderingContext2D 实例private settings: RenderingContextSettings new RenderingContextSettings(true); private starFieldContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); private starMapContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings); private taijiContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.settings);玄象项目创建了 3 个CanvasRenderingContext2D实例分别对应星空、星图、太极。5.2 共享 RenderingContextSettings三个 Context 共享同一个RenderingContextSettingsprivate settings: RenderingContextSettings new RenderingContextSettings(true);RenderingContextSettings(true)启用抗锯齿让 Canvas 绘制的圆形与曲线更平滑。5.3 为什么使用多个 Context玄象项目使用多个Canvas实例的原因隔离绘制状态每个 Context 独立管理fillStyle/strokeStyle等状态避免相互污染。独立尺寸控制星空背景占 100%星图占 40%太极占 220×220每个 Canvas 尺寸独立。独立对齐方式星图通过.align(Alignment.Bottom)对齐底部其他 Canvas 居中。5.4 Canvas onReady 时机Canvas(this.starFieldContext) .width(100%) .height(100%) .onReady(() { this.drawStarField(this.starFieldContext, this.starFieldContext.width, this.starFieldContext.height); })onReady在 Canvas 准备好绘制时触发此时starFieldContext.width与height已经是实际像素值可以安全绘制。提示玄象项目在onReady内立即调用绘制函数确保 Canvas 一准备好就开始绘制。如果在aboutToAppear中绘制Canvas 可能还未准备好导致绘制失败。六、中央内容布局6.1 Column 容器结构Column({ space: 20 }) { // 太极图 Canvas(this.taijiContext) .width(220) .height(220) .margin({ top: 100 }) // 标题列 Column({ space: 12 }) { Text(玄象) .fontSize(56) .fontWeight(FontWeight.Bold) .fontColor(Colors.PRIMARY_GOLD) .letterSpacing(8) Text(中华传统文化) .fontSize(20) .fontColor(Colors.LIGHT_GOLD) .letterSpacing(4) } } .width(100%) .height(100%) .opacity(this.fadeOpacity) .scale({ x: this.logoScale, y: this.logoScale }) .animation({ duration: 1000, curve: Curve.EaseOut })6.2 嵌套 Column 的设计考量玄象项目使用嵌套Column的设计Column (中央内容容器space20) ├── Canvas (太极图) └── Column (标题列space12) ├── Text 玄象 └── Text 中华传统文化为什么不直接使用单个 Column外层Column的space20控制太极图与标题列之间的间距。内层Column的space12控制主标题与副标题之间的间距。不同的间距通过嵌套实现独立控制。6.3 字体属性详解玄象项目主标题“玄象“的字体属性属性值作用fontSize56主标题字号fontWeightFontWeight.Bold加粗显示fontColorColors.PRIMARY_GOLD主金色letterSpacing8字间距 8vp副标题“中华传统文化“的字体属性属性值作用fontSize20副标题字号fontColorColors.LIGHT_GOLD浅金色letterSpacing4字间距 4vp提示letterSpacing是营造东方书法美感的关键属性。玄象项目通过字间距拉开让文字显得更“舒展“。七、淡入动画机制7.1 opacity 与 scale 双重动画.opacity(this.fadeOpacity) .scale({ x: this.logoScale, y: this.logoScale }) .animation({ duration: 1000, curve: Curve.EaseOut })玄象项目启动页中央内容有两层动画opacity 透明度动画从 0 渐变到 1营造“浮现“效果。scale 缩放动画从 0.8 渐变到 1营造“由小到大“效果。7.2 animation 关键参数.animation({ duration: 1000, curve: Curve.EaseOut })参数值作用duration1000ms动画时长curveCurve.EaseOut缓动曲线先快后慢7.3 EaseOut 曲线的视觉感受Curve.EaseOut的运动曲线速度 ↑ │ ╱────╲ │ ╱ ╲ │╱ ╲___ └─────────────→ 时间EaseOut的特点开始快动画一开始就有较大变化。结束慢接近终点时变化放缓。这种曲线特别适合“元素出现“的场景让用户感受到有力道的浮现。7.4 动画触发时机aboutToAppear(): void { this.fadeOpacity 0; this.logoScale 0.8; setTimeout(() { this.fadeOpacity 1; // 状态改变触发动画 this.logoScale 1; }, 100); }玄象项目刻意延迟 100ms 才改变状态目的确保组件已渲染等待 ArkUI 完成首次渲染。避免状态丢失如果状态在渲染前就改变可能导致动画丢失。提示这种“延迟 100ms 触发动画“是 ArkUI 中常见的最佳实践。也可以使用setTimeout(..., 0)让状态变更进入下一个事件循环。八、Stack 布局的进阶技巧8.1 使用 align 控制子元素位置Canvas(this.starMapContext) .width(100%) .height(40%) .align(Alignment.Bottom) // 对齐底部Stack的align属性控制子元素在 Stack 中的对齐方式对齐方式含义Alignment.TopStart左上角Alignment.Top顶部居中Alignment.Center居中默认Alignment.Bottom底部居中Alignment.BottomEnd右下角8.2 使用 position 精确定位玄象项目在首页“今日天地“卡片中使用position实现五行环绕.position(this.getFiveElementPosition(index, 180, 44))position接收一个Position对象{ x, y }精确控制子元素的左上角位置。8.3 使用 zIndex 控制层级如果需要手动控制子元素的堆叠层级可以使用zIndexCanvas(this.starFieldContext) .zIndex(1) // 最底层 Canvas(this.starMapContext) .zIndex(2) // 中间层 Column({ space: 20 }) { // 中央内容 } .zIndex(3) // 最上层提示玄象项目通过Stack中子元素的声明顺序控制层级后声明的在上层因此不需要显式使用zIndex。九、SplashPage 的扩展方向9.1 添加品牌 LOGO 图片玄象项目当前使用 Canvas 绘制太极图。如果引入 LOGO 图片Column({ space: 20 }) { Image($r(app.media.logo)) .width(220) .height(220) .objectFit(ImageFit.Contain) .margin({ top: 100 }) Column({ space: 12 }) { // 文字 } }9.2 添加加载进度条启动页常用于显示加载进度Column({ space: 20 }) { // 太极图 标题 // 加载进度条 Progress({ value: this.loadingProgress, total: 100, type: ProgressType.Linear }) .width(60%) .color(Colors.PRIMARY_GOLD) }9.3 添加版本号Column({ space: 20 }) { // 主内容 } .justifyContent(FlexAlign.Center) Text(v1.0.0) .fontSize(12) .fontColor(Colors.TEXT_DIM) .position({ x: 50%, y: 90% }) .translate({ x: -50% })总结本篇以玄象项目SplashPage为蓝本深入剖析了 HarmonyOS 应用启动页的实现细节从State响应式状态定义、Stack三层视觉堆叠、Canvas多实例管理到aboutToAppear生命周期、setTimeout双定时器机制、opacity scale双重动画再到backgroundColor预设避免首帧白屏的关键技巧。掌握这套启动页实现方法论您就能为任何 HarmonyOS 应用打造令人印象深刻的启动体验。下一篇《12 · Canvas 星空绘制arc / fillStyle / 随机散点算法》将带您深入玄象项目启动页的星空背景 Canvas 绘制细节。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档Stack 组件HarmonyOS 官方文档Canvas 组件HarmonyOS 官方文档CanvasRenderingContext2DHarmonyOS 官方文档animation 动画开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net
