在讀取畫面或是執行一些需要時間的動作時,
常常會用到百分比進度讀取條或圓餅動畫,
在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)。