需求
不以切換圖片的方式，實現(xiàn)控件點擊展示出已選擇的效果，再點擊取消選擇，效果如圖(靜態(tài)+動畫)，demo下載地址在文章結(jié)尾。
效果圖
實現(xiàn)思路
自定義UIView，通過- (void)drawRect:(CGRect)rect方法，無動畫效果的利用UIBezierPath繪制圖案，有動畫效果的利用UIBezierPath、CAShapeLayer、CABasicAnimation等繪圖并添加動畫
無動畫效果的
主要技術(shù)點在于背景的繪制，勾的繪制，代碼如下
/** 填充背景 */
CGPoint center = CGPointMake(rect.size.width*0.5,rect.size.height*0.5);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width*0.5 - rect.size.width*0.03) startAngle:0 endAngle:M_PI*2 clockwise:YES];
//設(shè)置顏色
[self.backColor set];
// 填充：必須是一個完整的封閉路徑,默認(rèn)就會自動關(guān)閉路徑
[path fill];
/** 繪制勾 */
UIBezierPath *path1 = [UIBezierPath bezierPath];
path1.lineWidth = rect.size.width*0.06;
// 設(shè)置起點
[path1 moveToPoint:CGPointMake(rect.size.width*0.23, rect.size.height*0.43)];
// 添加一根線到某個點
[path1 addLineToPoint:CGPointMake(rect.size.width*0.45, rect.size.height*0.7)];
[path1 addLineToPoint:CGPointMake(rect.size.width*0.79, rect.size.height*0.35)];
//設(shè)置顏色
[self.tickColor set];
// 繪制路徑
[path1 stroke];
繪制非選中時的灰色圓環(huán)，與繪制勾類似，先設(shè)置好路線，再stroke
CGPoint center = CGPointMake(rect.size.width*0.5,rect.size.height*0.5);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width*0.5 - rect.size.width*0.03) startAngle:0 endAngle:M_PI*2 clockwise:YES];
[[UIColor lightGrayColor] set];
[path stroke];
有動畫效果的
主要是勾的繪制不一樣，像這種有有動畫的，一般的思路都是以下四步
1、利用貝瑟爾線把路線設(shè)定好；
2、創(chuàng)建圖層CAShapeLayer，讓圖層的路線等于貝瑟爾線的路線；
3、利用CABasicAnimation給圖層添加動畫；
4、把圖層添加到view的圖層(layer)上，以顯示出來。
代碼
/** 繪制勾 */
//1、設(shè)置路線
UIBezierPath *path1 = [UIBezierPath bezierPath];
path1.lineWidth = rect.size.width*0.06;
[path1 moveToPoint:CGPointMake(rect.size.width*0.23, rect.size.height*0.43)];
[path1 addLineToPoint:CGPointMake(rect.size.width*0.45, rect.size.height*0.7)];
[path1 addLineToPoint:CGPointMake(rect.size.width*0.79, rect.size.height*0.35)];
//2、創(chuàng)建CAShapeLayer
CAShapeLayer *shape=[CAShapeLayer layer];
self.shape = shape;//記錄以便重繪時移除
shape.path = path1.CGPath;
shape.lineWidth = path1.lineWidth;
shape.fillColor = [UIColor clearColor].CGColor;
shape.strokeColor = self.tickColor.CGColor;
shape.lineCap = kCALineCapRound;//線帽(線的端點)呈圓角狀
shape.lineJoin = kCALineJoinRound;//線連接處呈圓角狀
//3、給CAShapeLayer添加動畫
CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
checkAnimation.duration = 0.5;
checkAnimation.fromValue = @(0.0f);
checkAnimation.toValue = @(1.0f);
[shape addAnimation:checkAnimation forKey:nil];
//4、把CAShapeLayer添加給自己view的layer
[self.layer addSublayer:shape];
備注
1、所有圖形繪制的方法，都應(yīng)該寫在drawRect方法里，因為從代碼角度或者性能角度等方面考慮，這個方法里繪制圖形的時機(jī)都是最好的。在需要切換狀態(tài)時，調(diào)用[self setNeedsDisplay]方法進(jìn)行重繪，在drawRect根據(jù)自己定義的一些參數(shù)來判斷到底應(yīng)該繪制哪個圖案。
2、demo下載地址:https://github.com/YYProgrammer/YYTickViewDemo
