需求

不以切換圖片的方式，實現(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];
        // 填充：必須是一個完整的封閉路徑,默認就會自動關(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方法里，因為從代碼角度或者性能角度等方面考慮，這個方法里繪制圖形的時機都是最好的。在需要切換狀態(tài)時，調(diào)用[self setNeedsDisplay]方法進行重繪，在drawRect根據(jù)自己定義的一些參數(shù)來判斷到底應(yīng)該繪制哪個圖案。
2、demo下載地址:https://github.com/YYProgrammer/YYTickViewDemo