设计与实现)
鸿蒙原生开发手记徒步迹 - 启动页(Splash)设计与实现打造优雅的 App 启动体验实现开屏动画一、前言启动页Splash Screen是用户打开 App 时首先看到的页面承载着品牌展示、初始化加载等任务。一个好的启动页设计能给用户留下良好的第一印象。本文将详解“徒步迹“启动页的实现过程包括动画效果、自动跳转、状态管理等内容。二、设计思路徒步迹启动页的设计目标品牌展示展示 App 名称和 Logo加载动画渐入和缩放动画提升启动体验自动跳转2.5秒后自动跳转到首页状态检查检查登录状态决定跳转目标三、完整代码实现// pages/SplashPage.ets Entry Component struct SplashPage { // 控制动画的状态变量 State private opacityValue: number 0; State private scaleValue: number 0.5; // 页面显示前启动动画 aboutToAppear(): void { // 使用 animateTo 创建入场动画 animateTo({ duration: 1000, curve: Curve.Friction }, () { this.opacityValue 1; // 透明度从 0 → 1 this.scaleValue 1; // 缩放从 0.5 → 1 }); // 2.5秒后自动跳转 setTimeout(() { this.navigateToNext(); }, 2500); } build() { Column() { // 应用图标 - 带动画效果 Image($r(app.media.app_icon)) .width(100) .height(100) .borderRadius(20) // 圆角 .opacity(this.opacityValue) .scale({ x: this.scaleValue, y: this.scaleValue }); // 应用名称 Text(徒步迹) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor($r(app.color.primary_color)) .margin({ top: 20 }) .opacity(this.opacityValue); // 标语 Text(记录每一步的精彩) .fontSize(16) .fontColor($r(app.color.text_secondary)) .margin({ top: 8 }) .opacity(this.opacityValue); } .width(100%) .height(100%) .backgroundColor(Color.White) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center); } // 跳转到登录页或首页 navigateToNext(): void { // 检查登录状态 let isLogged AppStorage.getboolean(isLogged); if (isLogged) { // 已登录 → 首页 router.replaceUrl({ url: pages/HomePage }); } else { // 未登录 → 登录页 router.replaceUrl({ url: pages/LoginPage }); } } }四、动画效果解析4.1 animateTo 函数animateTo({ duration: 1000, // 动画时长 1000ms curve: Curve.Friction, // 缓动曲线摩擦效果 delay: 0, // 延迟时间 iterations: 1, // 播放次数 }, () { // 闭包中的状态变化驱动动画 this.opacityValue 1; this.scaleValue 1; });4.2 可选动画曲线曲线效果适用场景Curve.Linear匀速简单移动Curve.Ease慢→快→慢通用动画Curve.EaseIn慢→快进入动画Curve.EaseOut快→慢退出动画Curve.Friction带摩擦效果自然停止Curve.Spring弹簧效果弹性动画五、连接 AppStorage 登录检查在 EntryAbility 中初始化登录状态// EntryAbility.ets onCreate(want, launchParam) { // 初始化登录状态默认为 false AppStorage.setOrCreate(isLogged, false); // 如果有已保存的 token可以尝试自动登录 let savedToken this.context.preferences.get(token, ); if (savedToken) { // 自动登录... AppStorage.setOrCreate(isLogged, true); } }六、常见优化6.1 防止白屏配置启动窗口背景色避免白屏// module.json5 { abilities: [{ name: EntryAbility, startWindowBackground: $color:start_window_background, startWindowIcon: $media:app_icon, }] }6.2 预加载数据在启动页展示期间预加载首页数据aboutToAppear(): void { // 入场动画 animateTo({ ... }, () { ... }); // 同时预加载数据 this.preloadHomeData(); // 2.5秒后跳转 setTimeout(() this.navigateToNext(), 2500); } async preloadHomeData(): Promisevoid { try { // 预先加载首页所需数据 const routes await apiService.getRoutes(1, 10); AppStorage.setOrCreate(cachedRoutes, routes); } catch (e) { console.error(预加载失败, e); } }七、总结启动页是 App 的门面通过恰当的动画和预加载策略可以显著提升用户体验。徒步迹的启动页采用渐入缩放动画自动判断登录状态并跳转实现流畅的启动流程。下一篇文章将实现登录注册页面包括表单校验和交互设计。下一篇预告鸿蒙原生开发手记徒步迹 - 登录注册页面与表单校验
鸿蒙原生开发手记徒步迹 - 启动页(Splash)设计与实现打造优雅的 App 启动体验实现开屏动画一、前言启动页Splash Screen是用户打开 App 时首先看到的页面承载着品牌展示、初始化加载等任务。一个好的启动页设计能给用户留下良好的第一印象。本文将详解“徒步迹“启动页的实现过程包括动画效果、自动跳转、状态管理等内容。二、设计思路徒步迹启动页的设计目标品牌展示展示 App 名称和 Logo加载动画渐入和缩放动画提升启动体验自动跳转2.5秒后自动跳转到首页状态检查检查登录状态决定跳转目标三、完整代码实现// pages/SplashPage.ets Entry Component struct SplashPage { // 控制动画的状态变量 State private opacityValue: number 0; State private scaleValue: number 0.5; // 页面显示前启动动画 aboutToAppear(): void { // 使用 animateTo 创建入场动画 animateTo({ duration: 1000, curve: Curve.Friction }, () { this.opacityValue 1; // 透明度从 0 → 1 this.scaleValue 1; // 缩放从 0.5 → 1 }); // 2.5秒后自动跳转 setTimeout(() { this.navigateToNext(); }, 2500); } build() { Column() { // 应用图标 - 带动画效果 Image($r(app.media.app_icon)) .width(100) .height(100) .borderRadius(20) // 圆角 .opacity(this.opacityValue) .scale({ x: this.scaleValue, y: this.scaleValue }); // 应用名称 Text(徒步迹) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor($r(app.color.primary_color)) .margin({ top: 20 }) .opacity(this.opacityValue); // 标语 Text(记录每一步的精彩) .fontSize(16) .fontColor($r(app.color.text_secondary)) .margin({ top: 8 }) .opacity(this.opacityValue); } .width(100%) .height(100%) .backgroundColor(Color.White) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center); } // 跳转到登录页或首页 navigateToNext(): void { // 检查登录状态 let isLogged AppStorage.getboolean(isLogged); if (isLogged) { // 已登录 → 首页 router.replaceUrl({ url: pages/HomePage }); } else { // 未登录 → 登录页 router.replaceUrl({ url: pages/LoginPage }); } } }四、动画效果解析4.1 animateTo 函数animateTo({ duration: 1000, // 动画时长 1000ms curve: Curve.Friction, // 缓动曲线摩擦效果 delay: 0, // 延迟时间 iterations: 1, // 播放次数 }, () { // 闭包中的状态变化驱动动画 this.opacityValue 1; this.scaleValue 1; });4.2 可选动画曲线曲线效果适用场景Curve.Linear匀速简单移动Curve.Ease慢→快→慢通用动画Curve.EaseIn慢→快进入动画Curve.EaseOut快→慢退出动画Curve.Friction带摩擦效果自然停止Curve.Spring弹簧效果弹性动画五、连接 AppStorage 登录检查在 EntryAbility 中初始化登录状态// EntryAbility.ets onCreate(want, launchParam) { // 初始化登录状态默认为 false AppStorage.setOrCreate(isLogged, false); // 如果有已保存的 token可以尝试自动登录 let savedToken this.context.preferences.get(token, ); if (savedToken) { // 自动登录... AppStorage.setOrCreate(isLogged, true); } }六、常见优化6.1 防止白屏配置启动窗口背景色避免白屏// module.json5 { abilities: [{ name: EntryAbility, startWindowBackground: $color:start_window_background, startWindowIcon: $media:app_icon, }] }6.2 预加载数据在启动页展示期间预加载首页数据aboutToAppear(): void { // 入场动画 animateTo({ ... }, () { ... }); // 同时预加载数据 this.preloadHomeData(); // 2.5秒后跳转 setTimeout(() this.navigateToNext(), 2500); } async preloadHomeData(): Promisevoid { try { // 预先加载首页所需数据 const routes await apiService.getRoutes(1, 10); AppStorage.setOrCreate(cachedRoutes, routes); } catch (e) { console.error(预加载失败, e); } }七、总结启动页是 App 的门面通过恰当的动画和预加载策略可以显著提升用户体验。徒步迹的启动页采用渐入缩放动画自动判断登录状态并跳转实现流畅的启动流程。下一篇文章将实现登录注册页面包括表单校验和交互设计。下一篇预告鸿蒙原生开发手记徒步迹 - 登录注册页面与表单校验
![[Bug已解决] ncclUnhandledCudaError: Call to CUDA function failed 通用排查手册（含健康自检脚本）解决方案](http://pic.xiahunao.cn/yaotu/[Bug已解决] ncclUnhandledCudaError: Call to CUDA function failed 通用排查手册（含健康自检脚本）解决方案)
