描画&アニメーションコードが参考になった。実機で見たが出来もいい。
背景、プログレス、アイコンの3つのレイヤーを作り、それぞれを描きわけている。なるほど。
@property (nonatomic, strong) CAShapeLayer *progressBackgroundLayer; @property (nonatomic, strong) CAShapeLayer *progressLayer; @property (nonatomic, strong) CAShapeLayer *iconLayer;
面白いのは✓マークまでUIBazierPathで描いているところ。
描画コード。
- (void) drawTick {
CGFloat radius = MIN(self.frame.size.width, self.frame.size.height)/2;
/*
First draw a tick that looks like this:
A---F
| |
| E-------D
| |
B-----------C
(Remember: (0,0) is top left)
*/
UIBezierPath *tickPath = [UIBezierPath bezierPath];
CGFloat tickWidth = radius * kTickWidthRatio;
[tickPath moveToPoint:CGPointMake(0, 0)]; // A
[tickPath addLineToPoint:CGPointMake(0, tickWidth * 2)]; // B
[tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth * 2)]; // C
[tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth)]; // D
[tickPath addLineToPoint:CGPointMake(tickWidth, tickWidth)]; // E
[tickPath addLineToPoint:CGPointMake(tickWidth, 0)]; // F
[tickPath closePath];
:上記図形を最後に傾けて✓にしている。面白い。



