问题背景在HarmonyOS应用开发中进度条是展示任务进度、加载状态的重要组件。传统的线性进度条虽然实用但在某些场景下显得单调乏味。比如在健身应用、计时工具、系统监控等场景中我们常常需要更直观、更美观的进度展示方式。典型应用场景健身应用中展示运动进度环计时工具中的倒计时显示系统监控中的CPU/内存使用率环形图文件传输进度可视化游戏中的技能冷却时间显示设计需求实现360度圆形刻度盘类似传统钟表在圆周上添加可旋转的指针虚线样式指针旋转角度与进度值同步支持平滑的动画过渡效果保持代码简洁且易于维护效果预览在深入技术实现之前先来看看最终效果![时钟样式进度条效果图]这个时钟样式进度条包含以下视觉元素黑色圆形背景模拟表盘20个白色刻度均匀分布在圆周上一根白色虚线指针从中心点向外延伸指针随着进度值从0°旋转到360°平滑的旋转动画效果背景知识Progress组件基础特性Progress是HarmonyOS中的进度条显示组件用于展示任务或操作的当前进度。它支持多种样式进度条类型描述适用场景Linear线性进度条文件下载、加载进度Ring环形进度条系统资源占用Eclipse椭圆形进度条不确定进度ScaleRing刻度环形进度条时钟样式进度条Capsule胶囊形进度条电池电量ScaleRing类型详解ScaleRing是Progress组件的一种特殊类型专门用于创建带有刻度的环形进度条Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) .style({ scaleCount: 20, // 刻度数量 scaleWidth: 5 // 刻度宽度 })关键参数value: 当前进度值total: 总进度值scaleCount: 刻度数量scaleWidth: 刻度宽度像素旋转动画原理在HarmonyOS中我们可以使用rotate属性实现组件的旋转效果.rotate({ centerX: 50%, // 旋转中心X坐标 centerY: 50%, // 旋转中心Y坐标 angle: 45 // 旋转角度 })结合animateTo方法可以实现平滑的旋转动画animateTo({ duration: 1000, // 动画持续时间 curve: Curve.Ease, // 动画曲线 iterations: 1 // 重复次数 }, () { // 在动画中更新状态 })完整解决方案方案设计思路要实现时钟样式的进度条我们需要解决几个关键问题刻度盘创建使用Progress组件的ScaleRing类型指针实现使用Divider组件模拟指针旋转控制根据进度值计算旋转角度动画同步确保指针旋转与进度变化同步视觉对齐精确控制指针的旋转中心具体实现步骤步骤1创建基础刻度盘首先我们创建一个基本的刻度环形进度条import { Progress, ProgressType } from ohos.arkui.progress; Component struct ClockProgress { State currentProgress: number 20; State totalProgress: number 150; build() { Column() { // 刻度环形进度条 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(#000000) // 黑色背景模拟表盘 .style({ scaleCount: 60, // 60个刻度模拟钟表 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White, // 白色刻度 strokeWidth: 8, // 环形宽度 strokeColor: #333333 // 环形颜色 }) } } }步骤2添加时钟指针使用Divider组件创建指针并通过margin和rotate属性精确定位import { Divider } from ohos.arkui.advanced; Component struct ClockProgress { State rotateAngle: number 0; State currentProgress: number 20; State totalProgress: number 150; build() { Column() { Stack() { // 刻度盘 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(Color.Black) .style({ scaleCount: 60, scaleWidth: 2 }) // 时钟指针 Divider() .height(80) // 指针长度 .width(0) // 宽度为0使用borderWidth .borderWidth(2) // 指针粗细 .borderColor(Color.White) // 白色指针 .borderStyle(BorderStyle.Dashed) // 虚线样式 .margin({ top: -140 }) // 向上偏移使指针从中心伸出 .rotate({ centerX: 100%, // 旋转中心X右侧中心 centerY: 100%, // 旋转中心Y底部中心 angle: this.rotateAngle // 当前旋转角度 }) } .width(200) .height(200) } } }步骤3实现旋转动画通过animateTo方法实现平滑的旋转动画import { UIContext } from ohos.arkui.UIContext; Component struct ClockProgress { State rotateAngle: number 0; State currentProgress: number 0; State totalProgress: number 100; private uiContext: UIContext | undefined undefined; aboutToAppear() { // 获取UI上下文 this.uiContext this.getUIContext(); } build() { Column() { Stack() { // 刻度盘 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(Color.Black) .style({ scaleCount: 60, scaleWidth: 2 }) // 时钟指针 Divider() .height(80) .width(0) .borderWidth(2) .borderColor(Color.White) .borderStyle(BorderStyle.Dashed) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .onAppear(() { // 组件出现时开始动画 this.startRotationAnimation(); }) } .width(200) .height(200) // 控制面板 Row({ space: 20 }) { Button(开始) .onClick(() { this.startRotationAnimation(); }) Button(暂停) .onClick(() { this.pauseAnimation(); }) Button(重置) .onClick(() { this.resetAnimation(); }) } .margin({ top: 20 }) // 进度控制 Slider({ value: this.currentProgress, min: 0, max: this.totalProgress, step: 1, style: SliderStyle.OutSet }) .width(80%) .onChange((value: number) { this.updateProgress(value); }) .margin({ top: 20 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } // 开始旋转动画 private startRotationAnimation(): void { if (!this.uiContext) { console.warn(UI上下文未初始化); return; } this.uiContext.animateTo({ duration: 3000, // 3秒完成一圈 curve: Curve.Linear, // 线性动画 iterations: -1, // 无限循环 onFinish: () { console.info(动画完成); } }, () { // 计算旋转角度进度百分比 × 360度 this.rotateAngle 360 * this.currentProgress / this.totalProgress; }); } // 暂停动画 private pauseAnimation(): void { // 实际开发中需要保存动画控制器 console.info(动画暂停); } // 重置动画 private resetAnimation(): void { this.uiContext?.animateTo({ duration: 500, curve: Curve.EaseOut }, () { this.currentProgress 0; this.rotateAngle 0; }); } // 更新进度 private updateProgress(value: number): void { this.uiContext?.animateTo({ duration: 300, curve: Curve.EaseInOut }, () { this.currentProgress value; this.rotateAngle 360 * value / this.totalProgress; }); } }步骤4完整实现代码整合以上所有功能创建一个完整的时钟样式进度条组件// ClockProgress.ets - 完整实现 Entry Component struct ClockProgressExample { State currentProgress: number 45; // 当前进度值 State totalProgress: number 100; // 总进度值 State rotateAngle: number 0; // 指针旋转角度 State isAnimating: boolean false; // 动画状态 State animationDuration: number 3000; // 动画持续时间 private uiContext: UIContext | undefined undefined; private animationController: animation.AnimatorResult | undefined undefined; aboutToAppear() { // 获取UI上下文 this.uiContext this.getUIContext(); // 初始化指针角度 this.rotateAngle 360 * this.currentProgress / this.totalProgress; } build() { Column({ space: 20 }) { // 标题 Text(时钟样式进度条) .fontSize(24) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .margin({ top: 40, bottom: 10 }); // 进度条容器 Stack() { // 背景圆形 Circle({ width: 220, height: 220 }) .fill(Color.Black) .shadow({ radius: 10, color: #00000040, offsetX: 0, offsetY: 4 }) // 刻度环形进度条 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(#1A1A1A) .style({ scaleCount: 60, // 60个刻度 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White, // 白色刻度 strokeWidth: 12, // 环形宽度 strokeColor: #333333, // 环形颜色 backgroundStrokeWidth: 8, // 背景环形宽度 backgroundStrokeColor: #444444 // 背景环形颜色 }) // 中心圆点 Circle({ width: 16, height: 16 }) .fill(Color.White) .shadow({ radius: 2, color: Color.White, offsetX: 0, offsetY: 0 }) // 时钟指针虚线 Divider() .height(90) // 指针长度 .width(0) // 宽度为0使用border .borderWidth(3) // 指针粗细 .borderColor(#FFFFFF) // 白色指针 .borderStyle(BorderStyle.Dashed) // 虚线样式 .margin({ top: -155 }) // 精确定位 .rotate({ centerX: 100%, // 旋转中心右侧中心 centerY: 100%, // 旋转中心底部中心 angle: this.rotateAngle // 当前角度 }) // 进度文本显示 Text(${this.currentProgress}%) .fontSize(20) .fontWeight(FontWeight.Medium) .fontColor(Color.White) .margin({ top: 160 }) } .width(220) .height(220) .margin({ top: 20, bottom: 30 }) // 控制面板 Column({ space: 15 }) { // 进度控制 Row({ space: 10 }) { Text(进度控制:) .fontSize(16) .fontColor(#666666) .width(80) Slider({ value: this.currentProgress, min: 0, max: this.totalProgress, step: 1, style: SliderStyle.OutSet }) .width(60%) .onChange((value: number) { this.updateProgress(value); }) Text(${this.currentProgress}/${this.totalProgress}) .fontSize(14) .fontColor(#999999) .width(60) } .width(90%) .justifyContent(FlexAlign.SpaceBetween) // 动画控制 Row({ space: 10 }) { Button(this.isAnimating ? 暂停动画 : 开始动画) .fontSize(14) .backgroundColor(this.isAnimating ? #FF6B6B : #4CAF50) .fontColor(Color.White) .borderRadius(20) .padding({ left: 20, right: 20, top: 10, bottom: 10 }) .onClick(() { this.toggleAnimation(); }) Button(重置) .fontSize(14) .backgroundColor(#2196F3) .fontColor(Color.White) .borderRadius(20) .padding({ left: 20, right: 20, top: 10, bottom: 10 }) .onClick(() { this.resetProgress(); }) } .margin({ top: 10 }) // 动画速度控制 Row({ space: 10 }) { Text(动画速度:) .fontSize(16) .fontColor(#666666) .width(80) Slider({ value: this.animationDuration, min: 500, max: 5000, step: 100, style: SliderStyle.OutSet }) .width(60%) .onChange((value: number) { this.animationDuration value; if (this.isAnimating) { this.restartAnimation(); } }) Text(${this.animationDuration}ms) .fontSize(14) .fontColor(#999999) .width(80) } .width(90%) .margin({ top: 15 }) } .width(90%) .padding(20) .backgroundColor(#F8F9FA) .borderRadius(12) .shadow({ radius: 4, color: #00000010, offsetX: 0, offsetY: 2 }) } .width(100%) .height(100%) .backgroundColor(#FFFFFF) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Center) } // 切换动画状态 private toggleAnimation(): void { if (!this.uiContext) { console.warn(UI上下文未初始化); return; } this.isAnimating !this.isAnimating; if (this.isAnimating) { this.startRotationAnimation(); } else { this.pauseAnimation(); } } // 开始旋转动画 private startRotationAnimation(): void { if (!this.uiContext) return; // 停止之前的动画 if (this.animationController) { this.animationController.finish(); } // 计算目标角度完整一圈 const targetAngle this.rotateAngle 360; this.animationController this.uiContext.animateTo({ duration: this.animationDuration, curve: Curve.Linear, iterations: -1, // 无限循环 onFinish: () { console.info(动画完成); this.isAnimating false; } }, () { // 更新旋转角度 this.rotateAngle targetAngle % 360; }); } // 暂停动画 private pauseAnimation(): void { if (this.animationController) { this.animationController.pause(); } } // 重启动画 private restartAnimation(): void { this.pauseAnimation(); this.startRotationAnimation(); } // 更新进度值 private updateProgress(value: number): void { if (!this.uiContext) return; this.uiContext.animateTo({ duration: 300, curve: Curve.EaseInOut }, () { this.currentProgress value; this.rotateAngle 360 * value / this.totalProgress; }); } // 重置进度 private resetProgress(): void { if (!this.uiContext) return; this.uiContext.animateTo({ duration: 500, curve: Curve.EaseOut }, () { this.currentProgress 0; this.rotateAngle 0; this.isAnimating false; if (this.animationController) { this.animationController.finish(); this.animationController undefined; } }); } // 组件销毁时清理资源 aboutToDisappear() { if (this.animationController) { this.animationController.finish(); this.animationController undefined; } } }关键点分析1. 旋转中心的精确定位时钟指针的旋转中心是关键难点。通过以下配置实现精确控制.rotate({ centerX: 100%, // 旋转中心X组件右侧中心 centerY: 100%, // 旋转中心Y组件底部中心 angle: this.rotateAngle }) .margin({ top: -140 }) // 向上偏移使指针从中心点伸出原理分析centerX: 100%和centerY: 100%将旋转中心设置在Divider的右下角margin({ top: -140 })将Divider向上移动使其底部中心与表盘中心对齐这样旋转时指针会围绕表盘中心点旋转2. 进度与角度的同步计算进度值与旋转角度的转换公式// 基本公式角度 (当前进度 / 总进度) × 360° this.rotateAngle 360 * this.currentProgress / this.totalProgress; // 实际应用中的优化 const progressPercentage this.currentProgress / this.totalProgress; this.rotateAngle progressPercentage * 360; // 支持反向旋转逆时针 if (this.reverseDirection) { this.rotateAngle -progressPercentage * 360; }3. 动画性能优化对于需要频繁更新的动画性能优化至关重要// 使用requestAnimationFrame优化连续动画 private animationFrameId: number 0; private startSmoothAnimation(): void { const animate () { if (!this.isAnimating) return; // 计算下一帧的角度 const now Date.now(); const deltaTime now - this.lastAnimationTime; this.lastAnimationTime now; const angleIncrement (360 / this.animationDuration) * deltaTime; this.rotateAngle (this.rotateAngle angleIncrement) % 360; // 请求下一帧 this.animationFrameId requestAnimationFrame(animate); }; this.lastAnimationTime Date.now(); this.animationFrameId requestAnimationFrame(animate); } // 清理动画帧 private stopSmoothAnimation(): void { if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId 0; } }4. 多指针支持实际时钟通常有多个指针时针、分针、秒针我们可以扩展实现Component struct MultiHandClock { State hourAngle: number 0; // 时针角度 State minuteAngle: number 0; // 分针角度 State secondAngle: number 0; // 秒针角度 build() { Stack() { // 表盘 Progress({ /* ... */ }) // 时针 Divider() .height(60) .width(0) .borderWidth(4) .borderColor(#333333) .margin({ top: -110 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.hourAngle }) // 分针 Divider() .height(80) .width(0) .borderWidth(3) .borderColor(#666666) .margin({ top: -130 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.minuteAngle }) // 秒针 Divider() .height(90) .width(0) .borderWidth(2) .borderColor(#FF0000) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.secondAngle }) } } // 更新时间 private updateTime(): void { const now new Date(); const hours now.getHours() % 12; const minutes now.getMinutes(); const seconds now.getSeconds(); // 计算角度考虑平滑移动 this.hourAngle (hours * 30) (minutes * 0.5); // 每小时30°每分钟0.5° this.minuteAngle (minutes * 6) (seconds * 0.1); // 每分钟6°每秒0.1° this.secondAngle seconds * 6; // 每秒6° } }扩展应用场景一健身进度环在健身应用中可以使用时钟样式进度条展示运动完成情况Component struct FitnessProgress { State caloriesBurned: number 450; State calorieGoal: number 600; State progressPercentage: number 0; build() { Column() { Stack() { // 背景环 Progress({ value: 100, total: 100, type: ProgressType.Ring }) .width(200) .height(200) .style({ strokeWidth: 12, strokeColor: #E0E0E0 // 灰色背景 }) // 进度环 Progress({ value: this.caloriesBurned, total: this.calorieGoal, type: ProgressType.ScaleRing }) .width(200) .height(200) .style({ scaleCount: 0, // 无刻度 strokeWidth: 12, strokeColor: this.getProgressColor() }) // 进度文本 Column() { Text(${this.caloriesBurned}) .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) Text(/ ${this.calorieGoal} 卡路里) .fontSize(14) .fontColor(#666666) .margin({ top: 5 }) } } } } // 根据进度改变颜色 private getProgressColor(): string { const percentage this.caloriesBurned / this.calorieGoal; if (percentage 0.3) return #FF6B6B; // 红色 if (percentage 0.7) return #FFA726; // 橙色 return #4CAF50; // 绿色 } }场景二倒计时计时器实现一个带有动画效果的倒计时器Component struct CountdownTimer { State remainingTime: number 60; // 剩余秒数 State totalTime: number 60; // 总时间 State isRunning: boolean false; State rotateAngle: number 0; private timerId: number 0; private uiContext: UIContext | undefined undefined; build() { Column() { Stack() { // 倒计时环 Progress({ value: this.remainingTime, total: this.totalTime, type: ProgressType.ScaleRing }) .width(200) .height(200) .style({ scaleCount: 60, scaleWidth: 2, strokeWidth: 10, strokeColor: this.getTimeColor() }) // 指针 Divider() .height(90) .width(0) .borderWidth(3) .borderColor(#FFFFFF) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) // 时间显示 Text(this.formatTime(this.remainingTime)) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(Color.White) } // 控制按钮 Button(this.isRunning ? 暂停 : 开始) .onClick(() { this.toggleTimer(); }) .margin({ top: 20 }) } } // 切换计时器状态 private toggleTimer(): void { this.isRunning !this.isRunning; if (this.isRunning) { this.startTimer(); } else { this.stopTimer(); } } // 开始计时 private startTimer(): void { this.timerId setInterval(() { if (this.remainingTime 0) { this.remainingTime--; // 更新指针角度 this.uiContext?.animateTo({ duration: 1000, curve: Curve.Linear }, () { this.rotateAngle 360 * (this.totalTime - this.remainingTime) / this.totalTime; }); } else { this.stopTimer(); // 计时结束处理 this.onTimerComplete(); } }, 1000); } // 停止计时 private stopTimer(): void { if (this.timerId) { clearInterval(this.timerId); this.timerId 0; } this.isRunning false; } // 格式化时间显示 private formatTime(seconds: number): string { const mins Math.floor(seconds / 60); const secs seconds % 60; return ${mins.toString().padStart(2, 0)}:${secs.toString().padStart(2, 0)}; } // 根据剩余时间改变颜色 private getTimeColor(): string { const percentage this.remainingTime / this.totalTime; if (percentage 0.5) return #4CAF50; // 绿色 if (percentage 0.2) return #FFA726; // 橙色 return #FF5252; // 红色 } // 计时完成回调 private onTimerComplete(): void { // 播放完成动画 this.uiContext?.animateTo({ duration: 1000, curve: Curve.EaseInOut, iterations: 3 }, () { this.rotateAngle this.rotateAngle 360; }); } }场景三系统资源监控展示CPU、内存等系统资源使用情况Component struct SystemMonitor { State cpuUsage: number 45; // CPU使用率 State memoryUsage: number 68; // 内存使用率 State diskUsage: number 82; // 磁盘使用率 build() { Grid() { GridItem() { this.createMonitorRing(CPU, this.cpuUsage, #FF6B6B) } GridItem() { this.createMonitorRing(内存, this.memoryUsage, #4CAF50) } GridItem() { this.createMonitorRing(磁盘, this.diskUsage, #2196F3) } } .columnsTemplate(1fr 1fr 1fr) .rowsTemplate(1fr) .height(150) .margin(20) } Builder createMonitorRing(title: string, usage: number, color: string) { Column({ space: 5 }) { Stack() { // 背景环 Progress({ value: 100, total: 100, type: ProgressType.Ring }) .width(100) .height(100) .style({ strokeWidth: 8, strokeColor: #E0E0E0 }) // 使用率环 Progress({ value: usage, total: 100, type: ProgressType.ScaleRing }) .width(100) .height(100) .style({ scaleCount: 20, scaleWidth: 2, strokeWidth: 8, strokeColor: color }) // 指针 Divider() .height(45) .width(0) .borderWidth(2) .borderColor(color) .margin({ top: -70 }) .rotate({ centerX: 100%, centerY: 100%, angle: 360 * usage / 100 }) // 使用率文本 Text(${usage}%) .fontSize(16) .fontWeight(FontWeight.Medium) .fontColor(#1A1A1A) } Text(title) .fontSize(12) .fontColor(#666666) } .alignItems(HorizontalAlign.Center) } }常见问题与解决方案Q1: 指针旋转中心不准确问题现象指针没有围绕表盘中心旋转或者旋转轨迹偏移。解决方案// 正确配置旋转中心和margin Divider() .height(90) // 指针长度 .width(0) // 宽度为0 .borderWidth(3) // 使用border作为指针 .margin({ top: -140 }) // 关键向上偏移偏移量 表盘半径 指针长度/2 .rotate({ centerX: 100%, // 旋转中心在右侧 centerY: 100%, // 旋转中心在底部 angle: this.rotateAngle }) // 计算偏移量的公式 // marginTop -(表盘半径 指针长度/2) // 例如表盘半径100px指针长度90px // marginTop -(100 45) -145pxQ2: 动画卡顿或不流畅优化策略// 1. 使用硬件加速 .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .backdropBlur(0) // 启用硬件加速 // 2. 优化动画曲线 animateTo({ duration: 300, curve: Curve.EaseInOut, // 使用合适的缓动曲线 iterations: 1 }) // 3. 减少重绘区域 .clip(true) // 裁剪超出部分 .opacity(1) // 避免透明度变化 // 4. 使用requestAnimationFrame优化连续动画 private animationFrameId: number 0; private startSmoothAnimation(): void { const animate () { if (!this.isAnimating) return; // 使用时间差计算角度增量避免帧率影响速度 const now Date.now(); const deltaTime now - this.lastFrameTime; this.lastFrameTime now; const anglePerSecond 360 / (this.animationDuration / 1000); const angleIncrement anglePerSecond * (deltaTime / 1000); this.rotateAngle (this.rotateAngle angleIncrement) % 360; this.animationFrameId requestAnimationFrame(animate); }; this.lastFrameTime Date.now(); this.animationFrameId requestAnimationFrame(animate); }Q3: 多指针重叠时层级问题解决方案Stack() { // 底层表盘 Progress({ /* ... */ }) // 中层时针最粗 Divider() .height(60) .borderWidth(4) .zIndex(1) // 设置层级 // 上层分针 Divider() .height(80) .borderWidth(3) .zIndex(2) // 最上层秒针最细 Divider() .height(90) .borderWidth(2) .zIndex(3) // 顶层中心圆点 Circle({ width: 16, height: 16 }) .fill(Color.White) .zIndex(4) }Q4: 进度条刻度显示不正常排查步骤// 1. 检查scaleCount设置 .style({ scaleCount: 60, // 刻度数量 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White // 刻度颜色 }) // 2. 确保Progress尺寸足够大 .width(200) // 宽度至少200px .height(200) // 高度至少200px // 3. 检查背景色和前景色对比度 .backgroundColor(Color.Black) // 深色背景 .style({ strokeColor: Color.White, // 白色前景 scaleColor: Color.White // 白色刻度 }) // 4. 调整strokeWidth .style({ strokeWidth: 12, // 环形宽度 backgroundStrokeWidth: 8 // 背景环形宽度 })Q5: 如何实现双向旋转顺时针/逆时针实现方法State rotateAngle: number 0; State isClockwise: boolean true; // 旋转方向 private updateRotation(): void { const angleIncrement this.isClockwise ? 1 : -1; this.uiContext?.animateTo({ duration: 16, // 约60fps curve: Curve.Linear }, () { this.rotateAngle (this.rotateAngle angleIncrement) % 360; }); } // 切换旋转方向 private toggleDirection(): void { this.isClockwise !this.isClockwise; }性能优化建议1. 动画性能优化// 使用will-change提示浏览器优化 .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .willChange(transform) // 提示浏览器该元素将发生变化 // 减少复合图层 .opacity(1) // 避免透明度动画 .backfaceVisibility(hidden) // 隐藏背面 // 使用transform代替top/left // ❌ 避免使用 .margin({ top: this.animatedTop }) // ✅ 推荐使用 .transform({ translate: { y: this.animatedTop } })2. 内存管理优化Component struct OptimizedClockProgress { private animationController: animation.AnimatorResult | undefined; private timerId: number 0; // 组件销毁时清理资源 aboutToDisappear() { this.cleanupResources(); } private cleanupResources(): void { // 停止动画 if (this.animationController) { this.animationController.finish(); this.animationController undefined; } // 清除定时器 if (this.timerId) { clearInterval(this.timerId); this.timerId 0; } // 清理事件监听器 this.removeEventListeners(); } // 使用弱引用避免内存泄漏 private weakRefs: WeakRefany[] []; private trackObject(obj: any): void { this.weakRefs.push(new WeakRef(obj)); } }3. 渲染性能优化// 使用shouldComponentUpdate避免不必要的重渲染 shouldComponentUpdate(params: Recordstring, unknown): boolean { // 只有进度值变化时才重渲染 return params.progress ! this.currentProgress; } // 使用memoization缓存计算结果 private cachedAngle: number 0; private cachedProgress: number 0; private getRotateAngle(progress: number): number { // 如果进度值未变化返回缓存的角度 if (progress this.cachedProgress) { return this.cachedAngle; } // 计算新角度并缓存 const angle 360 * progress / this.totalProgress; this.cachedProgress progress; this.cachedAngle angle; return angle; }总结与最佳实践核心要点总结旋转中心计算通过centerX: 100%和centerY: 100%配合margin实现精确的旋转中心控制进度同步使用公式角度 (当前进度 / 总进度) × 360°确保指针与进度同步动画优化使用animateTo实现平滑动画合理设置duration和curve参数性能考虑对于连续动画使用requestAnimationFrame优化性能代码规范建议// ✅ 推荐写法 Component struct ClockProgress { // 明确的命名 State private currentProgress: number 0; State private rotateAngle: number 0; // 单一职责的方法 private calculateAngle(progress: number, total: number): number { return 360 * progress / total; } // 清晰的组件结构 Builder createClockHand(length: number, color: string) { Divider() .height(length) .width(0) .borderWidth(2) .borderColor(color) .margin({ top: - (100 length / 2) }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) } } // ❌ 不推荐写法 Component struct BadExample { State a: number 0; // 命名不清晰 State b: number 0; // 方法职责不单一 // 组件结构混乱 }实际应用建议应用场景推荐配置注意事项健身应用粗指针 彩色进度环考虑色盲用户提供颜色模式选项计时器细指针 精确刻度优化电池消耗减少动画频率系统监控多指针 实时更新控制更新频率避免性能问题游戏界面特效指针 粒子效果注意性能影响提供简化模式测试要点在实现时钟样式进度条后需要进行全面测试功能测试指针旋转角度与进度值同步动画流畅无卡顿旋转方向正确顺时针/逆时针进度值边界处理0%和100%性能测试连续旋转时的CPU/内存占用动画帧率稳定在60fps长时间运行无内存泄漏多实例同时运行性能兼容性测试不同设备尺寸适配横竖屏切换正常深色/浅色主题适配不同HarmonyOS版本兼容用户体验测试动画自然流畅视觉层次清晰交互反馈及时无障碍功能支持通过本文的详细介绍相信你已经掌握了在HarmonyOS 6中使用Progress组件实现时钟样式进度条的完整方案。无论是简单的进度展示还是复杂的多指针时钟都可以基于这个方案进行扩展和优化。在实际开发中建议先实现基础功能再根据具体业务需求添加高级特性。同时不要忘记性能优化和用户体验的细节这些都是打造高质量应用的关键。
HarmonyOS 6实战：Progress组件实现时钟样式进度条
发布时间：2026/6/23 19:26:49
问题背景在HarmonyOS应用开发中进度条是展示任务进度、加载状态的重要组件。传统的线性进度条虽然实用但在某些场景下显得单调乏味。比如在健身应用、计时工具、系统监控等场景中我们常常需要更直观、更美观的进度展示方式。典型应用场景健身应用中展示运动进度环计时工具中的倒计时显示系统监控中的CPU/内存使用率环形图文件传输进度可视化游戏中的技能冷却时间显示设计需求实现360度圆形刻度盘类似传统钟表在圆周上添加可旋转的指针虚线样式指针旋转角度与进度值同步支持平滑的动画过渡效果保持代码简洁且易于维护效果预览在深入技术实现之前先来看看最终效果![时钟样式进度条效果图]这个时钟样式进度条包含以下视觉元素黑色圆形背景模拟表盘20个白色刻度均匀分布在圆周上一根白色虚线指针从中心点向外延伸指针随着进度值从0°旋转到360°平滑的旋转动画效果背景知识Progress组件基础特性Progress是HarmonyOS中的进度条显示组件用于展示任务或操作的当前进度。它支持多种样式进度条类型描述适用场景Linear线性进度条文件下载、加载进度Ring环形进度条系统资源占用Eclipse椭圆形进度条不确定进度ScaleRing刻度环形进度条时钟样式进度条Capsule胶囊形进度条电池电量ScaleRing类型详解ScaleRing是Progress组件的一种特殊类型专门用于创建带有刻度的环形进度条Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) .style({ scaleCount: 20, // 刻度数量 scaleWidth: 5 // 刻度宽度 })关键参数value: 当前进度值total: 总进度值scaleCount: 刻度数量scaleWidth: 刻度宽度像素旋转动画原理在HarmonyOS中我们可以使用rotate属性实现组件的旋转效果.rotate({ centerX: 50%, // 旋转中心X坐标 centerY: 50%, // 旋转中心Y坐标 angle: 45 // 旋转角度 })结合animateTo方法可以实现平滑的旋转动画animateTo({ duration: 1000, // 动画持续时间 curve: Curve.Ease, // 动画曲线 iterations: 1 // 重复次数 }, () { // 在动画中更新状态 })完整解决方案方案设计思路要实现时钟样式的进度条我们需要解决几个关键问题刻度盘创建使用Progress组件的ScaleRing类型指针实现使用Divider组件模拟指针旋转控制根据进度值计算旋转角度动画同步确保指针旋转与进度变化同步视觉对齐精确控制指针的旋转中心具体实现步骤步骤1创建基础刻度盘首先我们创建一个基本的刻度环形进度条import { Progress, ProgressType } from ohos.arkui.progress; Component struct ClockProgress { State currentProgress: number 20; State totalProgress: number 150; build() { Column() { // 刻度环形进度条 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(#000000) // 黑色背景模拟表盘 .style({ scaleCount: 60, // 60个刻度模拟钟表 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White, // 白色刻度 strokeWidth: 8, // 环形宽度 strokeColor: #333333 // 环形颜色 }) } } }步骤2添加时钟指针使用Divider组件创建指针并通过margin和rotate属性精确定位import { Divider } from ohos.arkui.advanced; Component struct ClockProgress { State rotateAngle: number 0; State currentProgress: number 20; State totalProgress: number 150; build() { Column() { Stack() { // 刻度盘 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(Color.Black) .style({ scaleCount: 60, scaleWidth: 2 }) // 时钟指针 Divider() .height(80) // 指针长度 .width(0) // 宽度为0使用borderWidth .borderWidth(2) // 指针粗细 .borderColor(Color.White) // 白色指针 .borderStyle(BorderStyle.Dashed) // 虚线样式 .margin({ top: -140 }) // 向上偏移使指针从中心伸出 .rotate({ centerX: 100%, // 旋转中心X右侧中心 centerY: 100%, // 旋转中心Y底部中心 angle: this.rotateAngle // 当前旋转角度 }) } .width(200) .height(200) } } }步骤3实现旋转动画通过animateTo方法实现平滑的旋转动画import { UIContext } from ohos.arkui.UIContext; Component struct ClockProgress { State rotateAngle: number 0; State currentProgress: number 0; State totalProgress: number 100; private uiContext: UIContext | undefined undefined; aboutToAppear() { // 获取UI上下文 this.uiContext this.getUIContext(); } build() { Column() { Stack() { // 刻度盘 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(Color.Black) .style({ scaleCount: 60, scaleWidth: 2 }) // 时钟指针 Divider() .height(80) .width(0) .borderWidth(2) .borderColor(Color.White) .borderStyle(BorderStyle.Dashed) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .onAppear(() { // 组件出现时开始动画 this.startRotationAnimation(); }) } .width(200) .height(200) // 控制面板 Row({ space: 20 }) { Button(开始) .onClick(() { this.startRotationAnimation(); }) Button(暂停) .onClick(() { this.pauseAnimation(); }) Button(重置) .onClick(() { this.resetAnimation(); }) } .margin({ top: 20 }) // 进度控制 Slider({ value: this.currentProgress, min: 0, max: this.totalProgress, step: 1, style: SliderStyle.OutSet }) .width(80%) .onChange((value: number) { this.updateProgress(value); }) .margin({ top: 20 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } // 开始旋转动画 private startRotationAnimation(): void { if (!this.uiContext) { console.warn(UI上下文未初始化); return; } this.uiContext.animateTo({ duration: 3000, // 3秒完成一圈 curve: Curve.Linear, // 线性动画 iterations: -1, // 无限循环 onFinish: () { console.info(动画完成); } }, () { // 计算旋转角度进度百分比 × 360度 this.rotateAngle 360 * this.currentProgress / this.totalProgress; }); } // 暂停动画 private pauseAnimation(): void { // 实际开发中需要保存动画控制器 console.info(动画暂停); } // 重置动画 private resetAnimation(): void { this.uiContext?.animateTo({ duration: 500, curve: Curve.EaseOut }, () { this.currentProgress 0; this.rotateAngle 0; }); } // 更新进度 private updateProgress(value: number): void { this.uiContext?.animateTo({ duration: 300, curve: Curve.EaseInOut }, () { this.currentProgress value; this.rotateAngle 360 * value / this.totalProgress; }); } }步骤4完整实现代码整合以上所有功能创建一个完整的时钟样式进度条组件// ClockProgress.ets - 完整实现 Entry Component struct ClockProgressExample { State currentProgress: number 45; // 当前进度值 State totalProgress: number 100; // 总进度值 State rotateAngle: number 0; // 指针旋转角度 State isAnimating: boolean false; // 动画状态 State animationDuration: number 3000; // 动画持续时间 private uiContext: UIContext | undefined undefined; private animationController: animation.AnimatorResult | undefined undefined; aboutToAppear() { // 获取UI上下文 this.uiContext this.getUIContext(); // 初始化指针角度 this.rotateAngle 360 * this.currentProgress / this.totalProgress; } build() { Column({ space: 20 }) { // 标题 Text(时钟样式进度条) .fontSize(24) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .margin({ top: 40, bottom: 10 }); // 进度条容器 Stack() { // 背景圆形 Circle({ width: 220, height: 220 }) .fill(Color.Black) .shadow({ radius: 10, color: #00000040, offsetX: 0, offsetY: 4 }) // 刻度环形进度条 Progress({ value: this.currentProgress, total: this.totalProgress, type: ProgressType.ScaleRing }) .width(200) .height(200) .backgroundColor(#1A1A1A) .style({ scaleCount: 60, // 60个刻度 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White, // 白色刻度 strokeWidth: 12, // 环形宽度 strokeColor: #333333, // 环形颜色 backgroundStrokeWidth: 8, // 背景环形宽度 backgroundStrokeColor: #444444 // 背景环形颜色 }) // 中心圆点 Circle({ width: 16, height: 16 }) .fill(Color.White) .shadow({ radius: 2, color: Color.White, offsetX: 0, offsetY: 0 }) // 时钟指针虚线 Divider() .height(90) // 指针长度 .width(0) // 宽度为0使用border .borderWidth(3) // 指针粗细 .borderColor(#FFFFFF) // 白色指针 .borderStyle(BorderStyle.Dashed) // 虚线样式 .margin({ top: -155 }) // 精确定位 .rotate({ centerX: 100%, // 旋转中心右侧中心 centerY: 100%, // 旋转中心底部中心 angle: this.rotateAngle // 当前角度 }) // 进度文本显示 Text(${this.currentProgress}%) .fontSize(20) .fontWeight(FontWeight.Medium) .fontColor(Color.White) .margin({ top: 160 }) } .width(220) .height(220) .margin({ top: 20, bottom: 30 }) // 控制面板 Column({ space: 15 }) { // 进度控制 Row({ space: 10 }) { Text(进度控制:) .fontSize(16) .fontColor(#666666) .width(80) Slider({ value: this.currentProgress, min: 0, max: this.totalProgress, step: 1, style: SliderStyle.OutSet }) .width(60%) .onChange((value: number) { this.updateProgress(value); }) Text(${this.currentProgress}/${this.totalProgress}) .fontSize(14) .fontColor(#999999) .width(60) } .width(90%) .justifyContent(FlexAlign.SpaceBetween) // 动画控制 Row({ space: 10 }) { Button(this.isAnimating ? 暂停动画 : 开始动画) .fontSize(14) .backgroundColor(this.isAnimating ? #FF6B6B : #4CAF50) .fontColor(Color.White) .borderRadius(20) .padding({ left: 20, right: 20, top: 10, bottom: 10 }) .onClick(() { this.toggleAnimation(); }) Button(重置) .fontSize(14) .backgroundColor(#2196F3) .fontColor(Color.White) .borderRadius(20) .padding({ left: 20, right: 20, top: 10, bottom: 10 }) .onClick(() { this.resetProgress(); }) } .margin({ top: 10 }) // 动画速度控制 Row({ space: 10 }) { Text(动画速度:) .fontSize(16) .fontColor(#666666) .width(80) Slider({ value: this.animationDuration, min: 500, max: 5000, step: 100, style: SliderStyle.OutSet }) .width(60%) .onChange((value: number) { this.animationDuration value; if (this.isAnimating) { this.restartAnimation(); } }) Text(${this.animationDuration}ms) .fontSize(14) .fontColor(#999999) .width(80) } .width(90%) .margin({ top: 15 }) } .width(90%) .padding(20) .backgroundColor(#F8F9FA) .borderRadius(12) .shadow({ radius: 4, color: #00000010, offsetX: 0, offsetY: 2 }) } .width(100%) .height(100%) .backgroundColor(#FFFFFF) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Center) } // 切换动画状态 private toggleAnimation(): void { if (!this.uiContext) { console.warn(UI上下文未初始化); return; } this.isAnimating !this.isAnimating; if (this.isAnimating) { this.startRotationAnimation(); } else { this.pauseAnimation(); } } // 开始旋转动画 private startRotationAnimation(): void { if (!this.uiContext) return; // 停止之前的动画 if (this.animationController) { this.animationController.finish(); } // 计算目标角度完整一圈 const targetAngle this.rotateAngle 360; this.animationController this.uiContext.animateTo({ duration: this.animationDuration, curve: Curve.Linear, iterations: -1, // 无限循环 onFinish: () { console.info(动画完成); this.isAnimating false; } }, () { // 更新旋转角度 this.rotateAngle targetAngle % 360; }); } // 暂停动画 private pauseAnimation(): void { if (this.animationController) { this.animationController.pause(); } } // 重启动画 private restartAnimation(): void { this.pauseAnimation(); this.startRotationAnimation(); } // 更新进度值 private updateProgress(value: number): void { if (!this.uiContext) return; this.uiContext.animateTo({ duration: 300, curve: Curve.EaseInOut }, () { this.currentProgress value; this.rotateAngle 360 * value / this.totalProgress; }); } // 重置进度 private resetProgress(): void { if (!this.uiContext) return; this.uiContext.animateTo({ duration: 500, curve: Curve.EaseOut }, () { this.currentProgress 0; this.rotateAngle 0; this.isAnimating false; if (this.animationController) { this.animationController.finish(); this.animationController undefined; } }); } // 组件销毁时清理资源 aboutToDisappear() { if (this.animationController) { this.animationController.finish(); this.animationController undefined; } } }关键点分析1. 旋转中心的精确定位时钟指针的旋转中心是关键难点。通过以下配置实现精确控制.rotate({ centerX: 100%, // 旋转中心X组件右侧中心 centerY: 100%, // 旋转中心Y组件底部中心 angle: this.rotateAngle }) .margin({ top: -140 }) // 向上偏移使指针从中心点伸出原理分析centerX: 100%和centerY: 100%将旋转中心设置在Divider的右下角margin({ top: -140 })将Divider向上移动使其底部中心与表盘中心对齐这样旋转时指针会围绕表盘中心点旋转2. 进度与角度的同步计算进度值与旋转角度的转换公式// 基本公式角度 (当前进度 / 总进度) × 360° this.rotateAngle 360 * this.currentProgress / this.totalProgress; // 实际应用中的优化 const progressPercentage this.currentProgress / this.totalProgress; this.rotateAngle progressPercentage * 360; // 支持反向旋转逆时针 if (this.reverseDirection) { this.rotateAngle -progressPercentage * 360; }3. 动画性能优化对于需要频繁更新的动画性能优化至关重要// 使用requestAnimationFrame优化连续动画 private animationFrameId: number 0; private startSmoothAnimation(): void { const animate () { if (!this.isAnimating) return; // 计算下一帧的角度 const now Date.now(); const deltaTime now - this.lastAnimationTime; this.lastAnimationTime now; const angleIncrement (360 / this.animationDuration) * deltaTime; this.rotateAngle (this.rotateAngle angleIncrement) % 360; // 请求下一帧 this.animationFrameId requestAnimationFrame(animate); }; this.lastAnimationTime Date.now(); this.animationFrameId requestAnimationFrame(animate); } // 清理动画帧 private stopSmoothAnimation(): void { if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId 0; } }4. 多指针支持实际时钟通常有多个指针时针、分针、秒针我们可以扩展实现Component struct MultiHandClock { State hourAngle: number 0; // 时针角度 State minuteAngle: number 0; // 分针角度 State secondAngle: number 0; // 秒针角度 build() { Stack() { // 表盘 Progress({ /* ... */ }) // 时针 Divider() .height(60) .width(0) .borderWidth(4) .borderColor(#333333) .margin({ top: -110 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.hourAngle }) // 分针 Divider() .height(80) .width(0) .borderWidth(3) .borderColor(#666666) .margin({ top: -130 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.minuteAngle }) // 秒针 Divider() .height(90) .width(0) .borderWidth(2) .borderColor(#FF0000) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.secondAngle }) } } // 更新时间 private updateTime(): void { const now new Date(); const hours now.getHours() % 12; const minutes now.getMinutes(); const seconds now.getSeconds(); // 计算角度考虑平滑移动 this.hourAngle (hours * 30) (minutes * 0.5); // 每小时30°每分钟0.5° this.minuteAngle (minutes * 6) (seconds * 0.1); // 每分钟6°每秒0.1° this.secondAngle seconds * 6; // 每秒6° } }扩展应用场景一健身进度环在健身应用中可以使用时钟样式进度条展示运动完成情况Component struct FitnessProgress { State caloriesBurned: number 450; State calorieGoal: number 600; State progressPercentage: number 0; build() { Column() { Stack() { // 背景环 Progress({ value: 100, total: 100, type: ProgressType.Ring }) .width(200) .height(200) .style({ strokeWidth: 12, strokeColor: #E0E0E0 // 灰色背景 }) // 进度环 Progress({ value: this.caloriesBurned, total: this.calorieGoal, type: ProgressType.ScaleRing }) .width(200) .height(200) .style({ scaleCount: 0, // 无刻度 strokeWidth: 12, strokeColor: this.getProgressColor() }) // 进度文本 Column() { Text(${this.caloriesBurned}) .fontSize(32) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) Text(/ ${this.calorieGoal} 卡路里) .fontSize(14) .fontColor(#666666) .margin({ top: 5 }) } } } } // 根据进度改变颜色 private getProgressColor(): string { const percentage this.caloriesBurned / this.calorieGoal; if (percentage 0.3) return #FF6B6B; // 红色 if (percentage 0.7) return #FFA726; // 橙色 return #4CAF50; // 绿色 } }场景二倒计时计时器实现一个带有动画效果的倒计时器Component struct CountdownTimer { State remainingTime: number 60; // 剩余秒数 State totalTime: number 60; // 总时间 State isRunning: boolean false; State rotateAngle: number 0; private timerId: number 0; private uiContext: UIContext | undefined undefined; build() { Column() { Stack() { // 倒计时环 Progress({ value: this.remainingTime, total: this.totalTime, type: ProgressType.ScaleRing }) .width(200) .height(200) .style({ scaleCount: 60, scaleWidth: 2, strokeWidth: 10, strokeColor: this.getTimeColor() }) // 指针 Divider() .height(90) .width(0) .borderWidth(3) .borderColor(#FFFFFF) .margin({ top: -140 }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) // 时间显示 Text(this.formatTime(this.remainingTime)) .fontSize(36) .fontWeight(FontWeight.Bold) .fontColor(Color.White) } // 控制按钮 Button(this.isRunning ? 暂停 : 开始) .onClick(() { this.toggleTimer(); }) .margin({ top: 20 }) } } // 切换计时器状态 private toggleTimer(): void { this.isRunning !this.isRunning; if (this.isRunning) { this.startTimer(); } else { this.stopTimer(); } } // 开始计时 private startTimer(): void { this.timerId setInterval(() { if (this.remainingTime 0) { this.remainingTime--; // 更新指针角度 this.uiContext?.animateTo({ duration: 1000, curve: Curve.Linear }, () { this.rotateAngle 360 * (this.totalTime - this.remainingTime) / this.totalTime; }); } else { this.stopTimer(); // 计时结束处理 this.onTimerComplete(); } }, 1000); } // 停止计时 private stopTimer(): void { if (this.timerId) { clearInterval(this.timerId); this.timerId 0; } this.isRunning false; } // 格式化时间显示 private formatTime(seconds: number): string { const mins Math.floor(seconds / 60); const secs seconds % 60; return ${mins.toString().padStart(2, 0)}:${secs.toString().padStart(2, 0)}; } // 根据剩余时间改变颜色 private getTimeColor(): string { const percentage this.remainingTime / this.totalTime; if (percentage 0.5) return #4CAF50; // 绿色 if (percentage 0.2) return #FFA726; // 橙色 return #FF5252; // 红色 } // 计时完成回调 private onTimerComplete(): void { // 播放完成动画 this.uiContext?.animateTo({ duration: 1000, curve: Curve.EaseInOut, iterations: 3 }, () { this.rotateAngle this.rotateAngle 360; }); } }场景三系统资源监控展示CPU、内存等系统资源使用情况Component struct SystemMonitor { State cpuUsage: number 45; // CPU使用率 State memoryUsage: number 68; // 内存使用率 State diskUsage: number 82; // 磁盘使用率 build() { Grid() { GridItem() { this.createMonitorRing(CPU, this.cpuUsage, #FF6B6B) } GridItem() { this.createMonitorRing(内存, this.memoryUsage, #4CAF50) } GridItem() { this.createMonitorRing(磁盘, this.diskUsage, #2196F3) } } .columnsTemplate(1fr 1fr 1fr) .rowsTemplate(1fr) .height(150) .margin(20) } Builder createMonitorRing(title: string, usage: number, color: string) { Column({ space: 5 }) { Stack() { // 背景环 Progress({ value: 100, total: 100, type: ProgressType.Ring }) .width(100) .height(100) .style({ strokeWidth: 8, strokeColor: #E0E0E0 }) // 使用率环 Progress({ value: usage, total: 100, type: ProgressType.ScaleRing }) .width(100) .height(100) .style({ scaleCount: 20, scaleWidth: 2, strokeWidth: 8, strokeColor: color }) // 指针 Divider() .height(45) .width(0) .borderWidth(2) .borderColor(color) .margin({ top: -70 }) .rotate({ centerX: 100%, centerY: 100%, angle: 360 * usage / 100 }) // 使用率文本 Text(${usage}%) .fontSize(16) .fontWeight(FontWeight.Medium) .fontColor(#1A1A1A) } Text(title) .fontSize(12) .fontColor(#666666) } .alignItems(HorizontalAlign.Center) } }常见问题与解决方案Q1: 指针旋转中心不准确问题现象指针没有围绕表盘中心旋转或者旋转轨迹偏移。解决方案// 正确配置旋转中心和margin Divider() .height(90) // 指针长度 .width(0) // 宽度为0 .borderWidth(3) // 使用border作为指针 .margin({ top: -140 }) // 关键向上偏移偏移量 表盘半径 指针长度/2 .rotate({ centerX: 100%, // 旋转中心在右侧 centerY: 100%, // 旋转中心在底部 angle: this.rotateAngle }) // 计算偏移量的公式 // marginTop -(表盘半径 指针长度/2) // 例如表盘半径100px指针长度90px // marginTop -(100 45) -145pxQ2: 动画卡顿或不流畅优化策略// 1. 使用硬件加速 .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .backdropBlur(0) // 启用硬件加速 // 2. 优化动画曲线 animateTo({ duration: 300, curve: Curve.EaseInOut, // 使用合适的缓动曲线 iterations: 1 }) // 3. 减少重绘区域 .clip(true) // 裁剪超出部分 .opacity(1) // 避免透明度变化 // 4. 使用requestAnimationFrame优化连续动画 private animationFrameId: number 0; private startSmoothAnimation(): void { const animate () { if (!this.isAnimating) return; // 使用时间差计算角度增量避免帧率影响速度 const now Date.now(); const deltaTime now - this.lastFrameTime; this.lastFrameTime now; const anglePerSecond 360 / (this.animationDuration / 1000); const angleIncrement anglePerSecond * (deltaTime / 1000); this.rotateAngle (this.rotateAngle angleIncrement) % 360; this.animationFrameId requestAnimationFrame(animate); }; this.lastFrameTime Date.now(); this.animationFrameId requestAnimationFrame(animate); }Q3: 多指针重叠时层级问题解决方案Stack() { // 底层表盘 Progress({ /* ... */ }) // 中层时针最粗 Divider() .height(60) .borderWidth(4) .zIndex(1) // 设置层级 // 上层分针 Divider() .height(80) .borderWidth(3) .zIndex(2) // 最上层秒针最细 Divider() .height(90) .borderWidth(2) .zIndex(3) // 顶层中心圆点 Circle({ width: 16, height: 16 }) .fill(Color.White) .zIndex(4) }Q4: 进度条刻度显示不正常排查步骤// 1. 检查scaleCount设置 .style({ scaleCount: 60, // 刻度数量 scaleWidth: 2, // 刻度宽度 scaleColor: Color.White // 刻度颜色 }) // 2. 确保Progress尺寸足够大 .width(200) // 宽度至少200px .height(200) // 高度至少200px // 3. 检查背景色和前景色对比度 .backgroundColor(Color.Black) // 深色背景 .style({ strokeColor: Color.White, // 白色前景 scaleColor: Color.White // 白色刻度 }) // 4. 调整strokeWidth .style({ strokeWidth: 12, // 环形宽度 backgroundStrokeWidth: 8 // 背景环形宽度 })Q5: 如何实现双向旋转顺时针/逆时针实现方法State rotateAngle: number 0; State isClockwise: boolean true; // 旋转方向 private updateRotation(): void { const angleIncrement this.isClockwise ? 1 : -1; this.uiContext?.animateTo({ duration: 16, // 约60fps curve: Curve.Linear }, () { this.rotateAngle (this.rotateAngle angleIncrement) % 360; }); } // 切换旋转方向 private toggleDirection(): void { this.isClockwise !this.isClockwise; }性能优化建议1. 动画性能优化// 使用will-change提示浏览器优化 .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) .willChange(transform) // 提示浏览器该元素将发生变化 // 减少复合图层 .opacity(1) // 避免透明度动画 .backfaceVisibility(hidden) // 隐藏背面 // 使用transform代替top/left // ❌ 避免使用 .margin({ top: this.animatedTop }) // ✅ 推荐使用 .transform({ translate: { y: this.animatedTop } })2. 内存管理优化Component struct OptimizedClockProgress { private animationController: animation.AnimatorResult | undefined; private timerId: number 0; // 组件销毁时清理资源 aboutToDisappear() { this.cleanupResources(); } private cleanupResources(): void { // 停止动画 if (this.animationController) { this.animationController.finish(); this.animationController undefined; } // 清除定时器 if (this.timerId) { clearInterval(this.timerId); this.timerId 0; } // 清理事件监听器 this.removeEventListeners(); } // 使用弱引用避免内存泄漏 private weakRefs: WeakRefany[] []; private trackObject(obj: any): void { this.weakRefs.push(new WeakRef(obj)); } }3. 渲染性能优化// 使用shouldComponentUpdate避免不必要的重渲染 shouldComponentUpdate(params: Recordstring, unknown): boolean { // 只有进度值变化时才重渲染 return params.progress ! this.currentProgress; } // 使用memoization缓存计算结果 private cachedAngle: number 0; private cachedProgress: number 0; private getRotateAngle(progress: number): number { // 如果进度值未变化返回缓存的角度 if (progress this.cachedProgress) { return this.cachedAngle; } // 计算新角度并缓存 const angle 360 * progress / this.totalProgress; this.cachedProgress progress; this.cachedAngle angle; return angle; }总结与最佳实践核心要点总结旋转中心计算通过centerX: 100%和centerY: 100%配合margin实现精确的旋转中心控制进度同步使用公式角度 (当前进度 / 总进度) × 360°确保指针与进度同步动画优化使用animateTo实现平滑动画合理设置duration和curve参数性能考虑对于连续动画使用requestAnimationFrame优化性能代码规范建议// ✅ 推荐写法 Component struct ClockProgress { // 明确的命名 State private currentProgress: number 0; State private rotateAngle: number 0; // 单一职责的方法 private calculateAngle(progress: number, total: number): number { return 360 * progress / total; } // 清晰的组件结构 Builder createClockHand(length: number, color: string) { Divider() .height(length) .width(0) .borderWidth(2) .borderColor(color) .margin({ top: - (100 length / 2) }) .rotate({ centerX: 100%, centerY: 100%, angle: this.rotateAngle }) } } // ❌ 不推荐写法 Component struct BadExample { State a: number 0; // 命名不清晰 State b: number 0; // 方法职责不单一 // 组件结构混乱 }实际应用建议应用场景推荐配置注意事项健身应用粗指针 彩色进度环考虑色盲用户提供颜色模式选项计时器细指针 精确刻度优化电池消耗减少动画频率系统监控多指针 实时更新控制更新频率避免性能问题游戏界面特效指针 粒子效果注意性能影响提供简化模式测试要点在实现时钟样式进度条后需要进行全面测试功能测试指针旋转角度与进度值同步动画流畅无卡顿旋转方向正确顺时针/逆时针进度值边界处理0%和100%性能测试连续旋转时的CPU/内存占用动画帧率稳定在60fps长时间运行无内存泄漏多实例同时运行性能兼容性测试不同设备尺寸适配横竖屏切换正常深色/浅色主题适配不同HarmonyOS版本兼容用户体验测试动画自然流畅视觉层次清晰交互反馈及时无障碍功能支持通过本文的详细介绍相信你已经掌握了在HarmonyOS 6中使用Progress组件实现时钟样式进度条的完整方案。无论是简单的进度展示还是复杂的多指针时钟都可以基于这个方案进行扩展和优化。在实际开发中建议先实现基础功能再根据具体业务需求添加高级特性。同时不要忘记性能优化和用户体验的细节这些都是打造高质量应用的关键。
