[iOS Programming]百分比進度條、圓餅動畫

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

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

在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)。


Originally published at likeabossapp.com on March 16, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.