微信小程序 progress 进度条如何更自然流畅

微信小程序的 progress 组件有四个关键属性：

• percent：进度条完成百分比；
• active：为 true 时进度条才会动；
• duration：进度增加 1% 所需毫秒数
• active-mode：backwards 表示动画从头播，forwards 表示动画从上次结束点接着播；

假设进度条现在是 0%，通过 setData 把 percent 值设置为 10%，进度条不会突然显示为 10%，而是在 duration * 10 的时间内，从 0% 前进到 10%。duration 默认为 30ms，可以降低这个值，让进度条更快地跑到 10%。

虽然从 0% 跑到 10% 从动画来看需要一点时间，但进度条已经记住了自己目前的进度是 10%。

如果动画只跑到 10% 的一半即 5% 时，突然被 setData 为 50%，会怎样？这取决于 active-mode 的值是什么：

• backwards：动画会从 0% 开始出现往前跑，一段时间之后跑到 50% 就停下来；
• forwards：进度条会突然跳跃到 10%，然后动画会从 10% 开始跑到 50%；

由此可见，在一个根据上传或下载进度来显示 progress 的情况下，我们应该使用 forwards 值。

比如上传 4 个文件，刚开始上传时，不妨直接把 percent 值设置为 20%，这时候动画从一开始就会往前跑。第一个文件上传完成后，把 percent 通过 setData 设置为 40%，如果这时候动画才跑到比如 15%，那动画会突然跳到 40% 开始跑，如果在第一个文件上传完成之前，动画就已经跑到 20%，那动画会停住，直到 percent 被设置为 40% 再开始跑。

第 2 个文件上传完成后，percent 设置为 60%，第 3 个上传后设置为 80%，第 4 个上传后不要设置为 100%，可以设置为 95%，此时动画会从 95% 开始跑，接着把 duration 从默认的 30 改为 5，再把 percent 设为 100%，于是你会看到动画从 95% 用 25ms 跑到 100%，这样动画看起来就是从 0% 跑到了 100%。

如果第 4 个文件上传后，动画跑到了比如 90%，这时把 percent 直接设置为 100%，那动画会直接跳到 100%，看起来就是动画最后的 10% 根本没有跑，突然就到终点了。

关键点：在 forwards 的情况下，percent 设置为 x 后，动画总是会突然跳跃到上一个值，假设为 y，然后从 y 往 x 跑，如果没有新值，跑到 x 就会停下来。