文章目录功能概述核心属性1. 归属接口2. 属性定义3. 配置位置完整示例总结功能概述进度平滑动效是 Progress 组件从API 10支持的基础动效能力用于控制进度值变化时true进度条从当前值平滑渐变到目标值false进度条瞬间跳变到目标值核心属性1. 归属接口平滑动效属性enableSmoothEffect属于CommonProgressStyleOptions→ 被所有类型进度条的 StyleOptions 继承。2. 属性定义属性名类型默认值说明enableSmoothEffectbooleantrue开启/关闭进度平滑动效true开启平滑过渡false关闭平滑过渡直接跳变3. 配置位置在.style({ })中设置.style({strokeWidth:10,enableSmoothEffect:true})完整示例// xxx.ets Entry Component struct Index { State value: number 0; build() { Column({ space: 10 }) { Text(enableSmoothEffect: true) .fontSize(9) .fontColor(0xCCCCCC) .width(90%) .margin(5) .margin({ top: 20 }) Progress({ value: this.value, total: 100, type: ProgressType.Linear }) .style({ strokeWidth: 10, enableSmoothEffect: true }) Text(enableSmoothEffect: false).fontSize(9).fontColor(0xCCCCCC).width(90%).margin(5) Progress({ value: this.value, total: 100, type: ProgressType.Linear }) .style({ strokeWidth: 10, enableSmoothEffect: false }) Button(value 10).onClick(() { this.value 10; }) .width(75) .height(15) .fontSize(9) } .width(50%) .height(100%) .margin({ left: 20 }) } }运行效果如图总结状态变量State value: number 0保存当前进度变化时自动刷新 UI。两条进度条对比上方enableSmoothEffect: true→平滑渐变下方enableSmoothEffect: false→立即跳变交互控制点击按钮value 10触发进度更新直观对比两种动效差异。基础样式type: ProgressType.Linear线性进度条strokeWidth: 10进度条宽度默认开启不配置时默认enableSmoothEffect: true追求流畅体验可省略。性能建议列表/长列表大量进度条建议关闭false单条重点进度条建议开启true数值约束进度值会自动约束小于 0 → 置为 0大于 total → 置为 total不影响业务逻辑动效只改变视觉表现不改变value实际数值与进度计算。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力