貝賽爾曲線實現圓形進度條

引言

在做音頻項目的時候，播放音頻需要顯示圓形進度條。今天，教大家如何簡單地實現進度條效果！

其實，實現這種效果並不困難。前提是需要了解UIBezierPath。

當然，之前在實現高級動畫-圓形樹展開、收起動畫一文中教了大家如何實現漸變圓形進度條，那是採用mask來實現的。

不過，今天教大家做的效果，並沒有使用mask，而是直接使用UIBezierPath來實現。

實現原理

1. 第一步：添加背景灰色圓形圈圈，畫筆色爲灰色，內容色爲透明。如此一來，中間的圖片就可以看見了
2. 第二步：再添加表示進度的藍色圓形圈圈，與第一步一樣，只是設置畫筆顏色爲藍色
3. 第三步：由於bezierpath的圓形起點是M2PI，這與最終的效果不一樣，因此需要額外處理一下。所以，將整體的transform旋轉-M2PI，這樣進度起點就是從12點鐘方向開始的了，與效果圖一樣。但是，整體旋轉後，圖片就不是正立了，因此需要讓圖片控件的transform旋轉M2PI，這樣就是最終的效果了

代碼實現

首先，我們需要新建一個HYBCircleProgressView類，這樣才能對整體旋轉！創建圖片：

CGRectframe=self.frame;
self.layer.cornerRadius=frame.size.width/2;
self.layer.masksToBounds=YES;
self.imageView=[[UIImageViewalloc] initWithFrame:self.bounds];
[self addSubview:self.imageView]; 

第一步：添加灰色圓環

首先，創建CAShapeLayer對象，然後生成圓形path，並設置畫筆顏色爲灰色，線寬（圓環的寬）爲2，而內容填充色設置爲透明色，然後將此層添加到self.layer上：

self.outLayer=[CAShapeLayerlayer];
CGRectrect={kLineWidth/2,kLineWidth/2,
frame.size.width-kLineWidth,frame.size.height-kLineWidth};
UIBezierPath*path=[UIBezierPath bezierPathWithOvalInRect:rect];
self.outLayer.strokeColor=[UIColorlightGrayColor].CGColor;
self.outLayer.lineWidth=kLineWidth;
self.outLayer.fillColor=  [UIColorclearColor].CGColor;
self.outLayer.lineCap=kCALineCapRound;
self.outLayer.path=path.CGPath;
[self.layer addSublayer:self.outLayer];

第二步：添加藍色進度圓環

這一步與第一步相當，只是修改畫筆顏色爲藍色而已。所使用的path與第一步的是一樣的：

self.progressLayer=[CAShapeLayerlayer];
self.progressLayer.fillColor=[UIColorclearColor].CGColor;
self.progressLayer.strokeColor=[UIColorblueColor].CGColor;
self.progressLayer.lineWidth=kLineWidth;
self.progressLayer.lineCap=kCALineCapRound;
self.progressLayer.path=path.CGPath;
[self.layer addSublayer:self.progressLayer];

到這一步，可以看到的效果是這樣的：

從效果圖可以看到，圖片是正立的，但是進度條的起點是從3點鐘方向開始的，也就是M2PI開始順時鐘方向變化。可我們希望是從12點鐘方向開始順時鐘變化的，那麼解決辦法就是旋轉！看第三步。

第三步：旋轉以調整進度起點

將整體旋轉-90度，使進度起點爲12點鐘的位置：

self.transform=CGAffineTransformMakeRotation(-M_PI_2);

此時效果是這樣的：

圖片也跟着旋轉了，這不是我們要的效果啊。那麼怎麼辦呢？同樣的道理，將圖片控件再旋轉90度即可：

self.imageView.transform=CGAffineTransformMakeRotation(M_PI_2);

如何動畫調整進度

調整這個進度，其中就是調整strokeEnd，這個屬性是支持隱式動畫的：

-(void)updateProgressWithNumber:(NSUInteger)number{
  [CATransactionbegin];
  [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
  [CATransaction setAnimationDuration:0.5];
  self.progressLayer.strokeEnd=  number/100.0;
  [CATransactioncommit];
}

轉載自: 標哥的技術博客

簡書博客地址

https://www.jianshu.com/u/3c7c13f3dc6b