iOS開發(fā)教程之扇形動(dòng)畫的實(shí)現(xiàn)
前言
最近比較閑,正好利用這段時(shí)間把現(xiàn)在項(xiàng)目用的東西封裝一下,方便以后復(fù)用,當(dāng)然好的東西還是要分享。一起學(xué)習(xí),一起進(jìn)步。
看圖片,很顯然這是一個(gè)扇形圖,相信大家對(duì)做扇形圖得心應(yīng)手,可能對(duì)做扇形動(dòng)畫有一定難度,不急,下面給出代碼和思路。
針對(duì)項(xiàng)目用的扇形動(dòng)畫,在這個(gè)基礎(chǔ)上我做了一下封裝。
核心代碼如下:
-(instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius bgColor:(UIColor *)bgColor repeatCount:(NSInteger)repeatCount { if (self = [super init]) { //設(shè)置self的frame和center self.backgroundColor = bgColor; self.frame = CGRectMake(0, 0, radius * 2, radius * 2); self.center = center; _repeatCount = repeatCount; //特別注意:貝塞爾曲線的radius必須為self高度的四分之一,CAShapeLayer的線寬必須為self高度的二分之一 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius) radius:radius / 2 startAngle:-M_PI/2 endAngle:M_PI *3 / 2 clockwise:YES]; CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = path.CGPath; maskLayer.fillColor = [UIColor clearColor].CGColor; maskLayer.strokeColor = bgColor.CGColor; maskLayer.lineWidth = radius; //等于半徑的2倍,以圓的邊緣為中心,向圓內(nèi)部伸展一個(gè)半徑,向外伸展一個(gè)半徑,所以看上去以為圓的半徑是self高度的一半。 self.layer.mask = maskLayer; _maskLayer = maskLayer; } return self; } -(void)startAnimaiton { //開始執(zhí)行扇形動(dòng)畫 CABasicAnimation *strokeEndAni = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; strokeEndAni.fromValue = @0; strokeEndAni.toValue = @1; strokeEndAni.duration = 1; //重復(fù)次數(shù) strokeEndAni.repeatCount = _repeatCount; [_maskLayer addAnimation:strokeEndAni forKey:@"ani"]; }
思路
可以讓fillcolor 為clearcolor 讓linewidth充滿整個(gè)圓,然后讓strokeend執(zhí)行動(dòng)畫,從而實(shí)現(xiàn)扇形動(dòng)畫。
調(diào)用方法很簡單:直接看API
/** 初始化對(duì)象 @param center 中心 @param radius self寬度的一半 @param bgColor 背景色 @param repeatCount 動(dòng)畫重復(fù)次數(shù) @return self */ -(instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius bgColor:(UIColor *)bgColor repeatCount:(NSInteger)repeatCount; -(void)startAnimaiton; -(void)puaseAnimation;
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
iOS應(yīng)用開發(fā)中UITabBarController標(biāo)簽欄控制器使用進(jìn)階
這篇文章主要介紹了iOS應(yīng)用開發(fā)中UITabBarController標(biāo)簽欄控制器的使用進(jìn)階,實(shí)例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03IOS中實(shí)現(xiàn)圖片點(diǎn)擊全屏預(yù)覽
IOS作為一款智能手機(jī)系統(tǒng),在查看圖片的時(shí)候,如果能夠?qū)崿F(xiàn)全屏,對(duì)用戶來說有很好的視覺體驗(yàn),其實(shí)實(shí)現(xiàn)起來非常的簡單,下面我就結(jié)合一個(gè)簡單的代碼給大家來分享一下,,需要的朋友可以參考下2015-11-11iOS 設(shè)置UILabel的行間距并自適應(yīng)高度的方法
下面小編就為大家?guī)硪黄猧OS 設(shè)置UILabel的行間距并自適應(yīng)高度的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04ios的手勢(shì)操作之UIGestureRecognizer淺析(推薦)
本篇文章主要介紹了ios的手勢(shì)操作之UIGestureRecognizer淺析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-12-12Objective-C的NSOperation多線程類基本使用指南
這篇文章主要介紹了Objective-C的NSOperation多線程類基本使用指南,談到了Operations的執(zhí)行順序和并發(fā)量等設(shè)置操作,需要的朋友可以參考下2016-02-02ios的collection控件的自定義布局實(shí)現(xiàn)與設(shè)計(jì)
這篇文章主要介紹了mac、iOS端支持自定義布局的collection控件的實(shí)現(xiàn)與設(shè)計(jì),需要的朋友學(xué)習(xí)參考下吧。2017-12-12