前言
此方法在react-native當中有bug。因為用到的屬性在安卓手機上不支持。。。
下面我要說的很簡單,當當當~~~
1. 畫左邊的圓
首先 要有這么一個想法,一個div包裹這一個div:
<div> <div> </div> </div>
父div他的寬度應該是子div寬度的一半。這樣給子div一個border-radius給父div一個overflow:hidden
這樣正好會是一個半圓。
2.畫右半邊的圓
又半邊的圓同上述所說的。
3.兩個半圓結合在一起
兩個半圓結合在就是兩個圓并排放,那么個這兩個半圓 一個position:absolute。這樣兩個半圓浮動在文檔流當中。就結合成一個圓。
4.將兩個半圓隱藏掉
這一步因人而異。有些需求的倒計時 要求從沒有到完整的一個圓的倒計時,而有的倒計時,要求從完整到0的一個倒計時過程。
如果是要求從0到完整的一個倒計時,那么我們此時需要把這個圓隱藏掉
我們可以通過transform隱藏掉。因為父級的寬度是子級寬度的一半,所以我們可以計算出,當子級的圓旋轉180度的時候,整個圓就不見,全都會通過hidden英藏在外面。同理可得另一半邊圓。
5.動畫
這個動畫就比較簡單,那就是 一個從0-180度的一個動畫。