文章目录环形进度条动画基础说明1. 适用类型2. 动画分类3. 配置方式动画1加载动画 (Loading Effect)1. 作用2. 核心属性3. 代码片段4. 效果说明动画2扫描动画 (Scan Effect)1. 作用2. 核心属性3. 代码片段4. 效果说明完整示例代码页面展示内容核心属性对比总结总结环形进度条动画基础说明1. 适用类型仅适用于ProgressType.Ring环形进度条。2. 动画分类加载动画Loading无限循环旋转用于未知时长的加载场景。扫描动画Scan Effect进度条头部光点扫描用于展示进度的动态效果。3. 配置方式均通过.style({ ... })属性进行配置。动画1加载动画 (Loading Effect)1. 作用使环形进度条无限循环旋转不显示具体进度值仅表示正在加载中的状态。2. 核心属性status: ProgressStatus.LOADING3. 代码片段Progress({value:0,total:100,type:ProgressType.Ring}).width(100).color(Color.Blue).style({strokeWidth:20,status:ProgressStatus.LOADING// 开启加载动画})4. 效果说明进度条会自动顺时针旋转。此时value属性失效不显示具体进度。适用于网络请求、数据加载、等待响应等场景。动画2扫描动画 (Scan Effect)1. 作用在进度条的末端生成一个光点扫描效果动态展示当前进度视觉效果更流畅。2. 核心属性enableScanEffect: true3. 代码片段Progress({value:30,total:100,type:ProgressType.Ring}).width(100).color(Color.Orange).style({strokeWidth:20,enableScanEffect:true// 开启扫描动画})4. 效果说明进度条头部有一个高亮光点随进度移动。会正常显示value设置的具体进度值30%。适用于下载进度、任务完成度、播放进度等场景。完整示例代码EntryComponentstruct ProgressExample{build(){Column({space:15}){// 1. 加载中动画Text(Loading Effect).fontSize(9).fontColor(0xCCCCCC).width(90%)Progress({value:0,total:100,type:ProgressType.Ring}).width(100).color(Color.Blue).style({strokeWidth:20,status:ProgressStatus.LOADING})// 2. 扫描动画Text(Scan Effect).fontSize(9).fontColor(0xCCCCCC).width(90%)Progress({value:30,total:100,type:ProgressType.Ring}).width(100).color(Color.Orange).style({strokeWidth:20,enableScanEffect:true})}.width(100%).padding({top:5})}}页面展示内容Loading Effect蓝色无限旋转加载环。Scan Effect橙色带光点扫描的进度环。运行效果如图核心属性对比总结动画名称配置属性进度显示适用场景加载动画status: ProgressStatus.LOADING不显示(忽略value)加载中、等待中扫描动画enableScanEffect: true显示(根据value)下载进度、任务进度总结专属类型这两个动画属性仅支持ProgressType.Ring应用于其他类型Linear, Capsule等无效果。互斥性加载动画Loading开启时扫描动画Scan Effect会失效建议只使用一种。状态区分使用Loading时建议将value设为 0。使用Scan Effect时必须设置有效的value值才能看到效果。status: ProgressStatus.LOADING实现无限循环加载动画。enableScanEffect: true实现头部光点扫描的动态进度动画。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力