文章目录前言效果展示布局方案代码详解状态变量进度条组件百分比数字控制按钮数字滚动动画进阶样式渐变色进度条条纹动画分段进度条常见问题写在最后前言进度条是 UI 里最常见的动画场景之一——下载进度、上传进度、表单填写完成度。ArkUI 里做进度条动画有个很巧的方式用width百分比配合animateTo框架自动在两个百分比之间做过渡动画。今天来实现一个带按钮控制的进度条把宽度动画和 Stack 布局结合起来。效果展示一个圆角进度条底部有 25%、50%、75%、100% 四个按钮。点击按钮后进度条平滑填充到对应比例中间显示百分比数字。布局方案进度条的布局用Stack叠放两层┌──────────────────────────────────┐ │ [底层] 灰色背景条100%宽 │ │ [顶层] 蓝色进度条N%宽 │ └──────────────────────────────────┘底层是固定宽度的灰色条顶层是动态宽度的彩色条。两层都用borderRadius(15)做圆角高度 30 的一半。代码详解状态变量EntryComponentstruct WidthProgressBar{StatebarWidth:number0StatetargetPercent:number0// ...}barWidth驱动进度条的宽度百分比targetPercent记录目标值用于显示数字。进度条组件Stack({alignContent:Alignment.Start}){// 底层灰色背景Column().width(100%).height(30).backgroundColor(#E8E8E8).borderRadius(15)// 顶层蓝色进度Column().width(${this.barWidth}%).height(30).backgroundColor(#4D96FF).borderRadius(15).animation({duration:800,curve:Curve.EaseInOut})}.width(100%)几个细节值得注意Alignment.StartStack 默认居中对齐但进度条需要从左边开始填充所以设为Start左对齐。宽度用百分比字符串${this.barWidth}%生成50%这样的字符串。ArkUI 的width支持百分比值会自动按父容器宽度计算。animation声明式动画barWidth变化时宽度自动做 800ms 的EaseInOut过渡。百分比数字Text(${this.targetPercent}%).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#4D96FF).margin({top:12}).textAlign(TextAlign.Center).width(100%)居中显示当前进度百分比。注意这个数字是瞬切的——targetPercent直接赋值没有做动画。如果想要数字也平滑变化需要额外的处理。控制按钮Row({space:8}){ForEach([25,50,75,100],(val:number){Button(${val}%).onClick((){this.targetPercentvalanimateTo({duration:800,curve:Curve.EaseInOut},(){this.barWidthval})})})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top:16})用ForEach遍历[25, 50, 75, 100]数组为每个值生成一个按钮。点击时同时更新targetPercent瞬切和barWidth带动画。数字滚动动画如果想让百分比数字也平滑变化从 25 滚动到 75可以用定时器模拟Button(50%).onClick((){consttarget50animateTo({duration:800,curve:Curve.EaseInOut},(){this.barWidthtarget})// 数字滚动constintervalsetInterval((){if(this.targetPercenttarget){this.targetPercent}elseif(this.targetPercenttarget){this.targetPercent--}else{clearInterval(interval)}},16)// 约 60fps})每 16ms 更新一次数字800ms 内从旧值滚动到新值。进阶样式渐变色进度条Column().width(${this.barWidth}%).height(30).linearGradient({angle:90,colors:[[#4D96FF,0],[#6BCB77,1]]}).borderRadius(15)进度条从左到右做蓝绿渐变比纯色更有设计感。条纹动画Column().width(${this.barWidth}%).height(30).backgroundColor(#4D96FF).backgroundImageSize({width:30,height:30}).borderRadius(15)配合backgroundImage和backgroundPosition的动画可以做出 iOS 风格的条纹进度条。分段进度条把进度条分成多段每段颜色不同范围颜色含义0~30%红色危险30~70%橙色警告70~100%绿色安全常见问题Q宽度用百分比和用数值有什么区别百分比值50%是相对于父容器宽度的数值100是绝对 vp 值。做进度条用百分比更方便因为不需要知道父容器的具体宽度。Q为什么进度条回退时也有动画animateTo不管是从大到小还是从小到大变化都会做过渡动画。如果不想回退有动画可以在回退时不调animateTo直接赋值。800ms 的进度条动画时长在大多数场景都合适。如果是实时进度比如下载进度不应该用animateTo而是直接更新值——因为进度值本身就在高频变化每次变化都触发 800ms 动画会导致严重的延迟。写在最后宽度动画配合百分比值是做进度条的最简方案。Stack叠放两层 .animation()声明式动画代码不到 20 行就能做出一个带过渡效果的进度条。关键是要用Alignment.Start让进度条从左开始填充不然默认居中对齐会变成中间向两边扩展的效果。
