1gif.gif

之前項目中有做過一款環(huán)形計時器，當(dāng)時是純用css3實現(xiàn)的，動畫效果不錯，但有一個非常致命的缺點：通用性差。如果遇到需要統(tǒng)計不同時長的情況下，就必須根據(jù)不同的時長再額外寫。
現(xiàn)在我換用js和canvas將環(huán)形計時器封裝成組件，我們調(diào)用這個組件時，只需要傳一些配置屬性，就可以根據(jù)不同需求來展示，具體配置如下：

let props={
width:100, //cavas畫布寬度
height:100, //畫布高度
radius:20, //計時器的半徑
time:10*1000, //需要倒計的時長
ringColor:'#999', //進(jìn)度條的顏色
defaultColor:'#333' , //默認(rèn)底色
lineWidth: 5 //進(jìn)度條的寬度
}

基于這個計時器我還寫了另一個組件，類似于音樂播放器的效果，可以手動開始／暫停,配置信息基本是一致的：

2gif.gif

[demo展示中心］：https://yomonah.github.io/project/app.html#/circle-timer
[源碼]：https://github.com/yomonah/react-demo/tree/master/src/components/circle_timer