環形進度條

2021-07-13 19:55:45 字數 852 閱讀 5180

在專案中做廣告頁,需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上**

#import 

@inte***ce

circularprogressview : uiview

-(void)start;

-(void)stop;

#import "circularprogressview.h"

#import

@implementation

circularprogressview

- (instancetype)initwithframe:(cgrect)frame

return

self;

}- (id)initwithcoder:(nscoder *)adecoder

return

self;

}- (void)setup

- (cashapelayer *)createringlayerwithcenter:(cgpoint)center radius:(cgfloat)radius linewidth:(cgfloat)linewidth color:(uicolor *)color

//加入旋轉的動畫 簡單方便無bug

-(void)drawlineanimation:(calayer*)layer duration:(float)t

-(void)start

-(void)stop

環形進度條

先上效果圖 不多。直接貼 html 0 css body box rotate left right center popu left before left after input radius bg radius dot radius dot before radius dot before s...

環形進度條

先上效果圖 設定進度 param progress public void setprogress int progress 得到 circularprogressbar 物件,用來設定其他的一些屬性 return public circularprogressbar getcircularprog...

環形進度條

原理非常的簡單,在這個方案中,最主要使用了css3的transform中的rotate和css3的clip兩個屬性。用他們來實現半圓和旋轉效果。先來看其結構。html 0 css pie right right pie right,right mask 實現半圓還是挺簡單的,利用border rad...