最终效果如下图:
做动画除了使用 CSS 中的 animation,还可以使用 JS 来实现。使用 CSS 实现环形进度条并没有一个比较好的方案,可以通过 svg 或 canvas 来实现,今天通过 canvas 来实现,它的好处就是可以同时应用到小程序和网页中。
环形进度动画实现的核心就是一点一点来画一个园,这样会给人产生一个假象,进度条不断前进。
网页中可以直接使用 canvas 标签来定义一块画布,小程序则需要通过 createCanvasContext 这个 API 来创建画布。
创建好画布之后需要通过 JS 来画一个圆,我定义了一个函数 drawCircle,有 2 个参数,n为画的角度,总共为 360 度,width 为进度条的宽度。
在画圆的过程中发现会有锯齿,看着不是很光滑,通过查看 chart.js 的源码发现,在 retina 屏上,由于一个点要显示 3 个像素,而我们画的时候在 1 个点上画了 1 个像素,导致有锯齿。可以这样解决:
可以调用函数 drawCircle (drawCircle(360, 4);)来「一次性」画一个圆,期间不会看到进度条的变化:
如果想让进度条动起来,那就一点一点画这个圆。
这里有个比较 hack 的地方,通过一点一点画出来的圆,看起来有「一点点」锯齿,为更光滑一些,当一个进度条到了 100% 的时候,我把原先画的圆清除再画一个一模一样的圆。
到此一个进度条就实现了,但是这个只是提供了实现思路,在实际情况中可以写成一个通用的组件。比如有赞已经实现的小程序组件:
https://github.com/youzan/vant-weapp/blob/dev/dist/circle/index.js
大家加油!
推荐阅读:
[1].https://github.com/chartjs/Chart.js/blob/cfb5fba527cd93b596329fb05079e320b6586701/src/helpers/helpers.dom.js