在讀取畫面或是執行一些需要時間的動作時,

常常會用到百分比進度讀取條或圓餅動畫,

在github上有一個很好用的套件Download-Indicator

提供了線條、填滿的圓形讀取動畫,

可以照百分比分段動畫,或是一次執行,程式碼質量蠻高的,

下載放到專案後就可以立即使用!

圓餅讀取動畫

 

另外強大的同事也分享了一段code,

使用貝茲曲線繪出圓形的外圍線條,

一樣也可以達到效果。

// Set up the shape of the circle
CAShapeLayer *border = [CAShapeLayer layer];
border.path = [UIBezierPath bezierPathWithRoundedRect:self.myImageView.frame cornerRadius:self.myImageView.frame.size.height/2].CGPath;
border.anchorPoint = CGPointMake(0.5, 0.5);
border.position= CGPointMake(self.myImageView.bounds.origin.x, self.myImageView.bounds.origin.y);
border.fillColor = [UIColor clearColor].CGColor;
border.strokeColor = [UIColor blueColor].CGColor;
border.lineWidth = 5;
[self.view.layer addSublayer:border];

// Configure animation
//draw Border
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.delegate = self;
drawAnimation.duration = 7.0;
drawAnimation.repeatCount = 1.0;
[drawAnimation setValue:border forKey:@"afterBorderLoading"];
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[border addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

可以自訂動畫的秒數,

以及動畫的種類(CAMediaTimingFunction)。