前言
此方法在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度的一个动画。