iOS開發(fā)教程之扇形動畫的實現(xiàn)

更新時間：2017年06月19日 08:55:00 作者：belin

實現(xiàn)扇形圖大家應(yīng)該都會的，但是扇形動畫大家都會實現(xiàn)嗎？下面這篇文章主要給大家介紹了關(guān)于iOS開發(fā)教程之扇形動畫實現(xiàn)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。

前言

最近比較閑，正好利用這段時間把現(xiàn)在項目用的東西封裝一下，方便以后復(fù)用，當(dāng)然好的東西還是要分享。一起學(xué)習(xí)，一起進(jìn)步。

看圖片，很顯然這是一個扇形圖，相信大家對做扇形圖得心應(yīng)手，可能對做扇形動畫有一定難度，不急，下面給出代碼和思路。

針對項目用的扇形動畫，在這個基礎(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)部伸展一個半徑，向外伸展一個半徑，所以看上去以為圓的半徑是self高度的一半。

  self.layer.mask = maskLayer;
  _maskLayer = maskLayer;
 }

 return self;
}
-(void)startAnimaiton {
 //開始執(zhí)行扇形動畫
 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充滿整個圓，然后讓strokeend執(zhí)行動畫，從而實現(xiàn)扇形動畫。

下載地址：源碼下載 | 本地下載

調(diào)用方法很簡單：直接看API

/**
初始化對象
@param center 中心
@param radius self寬度的一半
@param bgColor 背景色
@param repeatCount 動畫重復(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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: