uni-app中progress组件不支持多色动画，应改用view+linear-gradient+background-position实现；需设background-size为200%以上、用calc控制background-position-x滑动，并做数值归一化与节流防错。
uni-app里progress组件没法做多色动画，别白费劲
直接用<progress></progress>绑定percent，哪怕加了transition: width也无效——它不是靠width渲染的，而是原生控件内部绘制。iOS 和安卓 WebView 对它的 CSS 动画支持几乎为零，小程序端更彻底：连background都改不了，更别说分段渐变色。你看到的“动”，只是数值跳变；你写的“多色”，在 H5 端可能被浏览器忽略，在微信小程序里直接报错样式无效。
用view + linear-gradient + background-size实现多色进度条
核心是把进度“视觉化”成背景图的裁剪位移，而不是改宽度。这样既能分段配色，又能靠animation驱动平滑过渡。
-
background-image设为多色线性渐变，如linear-gradient(90deg, #ff2d55 0%, #ff9500 25%, #ffcc00 50%, #4cd964 75%, #5ac8fa 100%) -
background-size必须设为200% 100%（至少两倍宽度），否则无法通过background-position-x实现“拉动”效果 - 用
background-position-x控制“可视窗口”位置：calc((100 - percent) * 1%)，让颜色随进度向左“滑入” - H5 端加
will-change: background-position提升动画帧率；小程序端需用animation而非transition，因部分平台不支持background-position过渡
示例片段：
<view class="multi-color-progress" :style="{ 'background-position-x': calc((100 - percent) * 1%) }"></view><p>.multi-color-progress {
height: 8rpx;
background-image: linear-gradient(90deg, #ff2d55 0%, #ff9500 25%, #ffcc00 50%, #4cd964 75%, #5ac8fa 100%);
background-size: 200% 100%;
background-repeat: no-repeat;
will-change: background-position;
animation: slide 0.4s ease-out;
}</p><p>@keyframes slide {
from { background-position-x: 100%; }
to { background-position-x: calc((100 - var(--p)) * 1%); }
}
</p>
动态切换颜色要防NaN和负值，尤其在异步更新时
如果你的percent来自接口轮询或上传回调，容易出现中间态异常：比如后端返回null、字符串"--"、或计算中产生Infinity，导致background-position-x变成calc(NaN%)，整个进度条消失。
- 始终用
Math.max(0, Math.min(100, Number(val)))做归一化，不要只靠v-model拦截 - 避免在
watch里直接写this.percent = val，应封装为方法：updateProgress(val)，里面做校验+节流 - 多色逻辑若依赖区间判断（如 0–30% 蓝、30–70% 黄、70–100% 红），记得用
computed或watch监听percent变化后再重算activeColor，别在模板里写三元嵌套
小程序端animation API 比transition更可靠，但得手动控制帧
微信/支付宝小程序对background-position的transition支持极弱，常卡顿或直接不触发。必须改用uni.createAnimation + requestAnimationFrame驱动。
- 初始化动画对象时，
duration设为300，timingFunction选ease-out比linear更自然 - 不要每帧都调
animation.export()，只在最终帧调一次，否则性能爆炸 - 动画结束回调里务必清空
animationId，否则重复触发会导致percent叠加错乱 - 如果进度来自
uploadFile的onProgressUpdate，注意该回调频率高（毫秒级），需用throttle限制每 100ms 最多更新一次
真正容易被忽略的是：多色进度条在低端安卓机上，background-size: 200%可能导致内存溢出式卡顿。实测发现，把渐变色段数压到 3–4 段、总background-size不超过300%，能明显改善。
