需求
不以切换图片的方式，实现控件点击展示出已选择的效果，再点击取消选择，效果如图(静态+动画)，demo下载地址在文章结尾。
效果图
实现思路
自定义UIView，通过- (void)drawRect:(CGRect)rect方法，无动画效果的利用UIBezierPath绘制图案，有动画效果的利用UIBezierPath、CAShapeLayer、CABasicAnimation等绘图并添加动画
无动画效果的
主要技术点在于背景的绘制，勾的绘制，代码如下
/** 填充背景 */
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];
//设置颜色
[self.backColor set];
// 填充：必须是一个完整的封闭路径,默认就会自动关闭路径
[path fill];
/** 绘制勾 */
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)];
//设置颜色
[self.tickColor set];
// 绘制路径
[path1 stroke];
绘制非选中时的灰色圆环，与绘制勾类似，先设置好路线，再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、利用贝瑟尔线把路线设定好；
2、创建图层CAShapeLayer，让图层的路线等于贝瑟尔线的路线；
3、利用CABasicAnimation给图层添加动画；
4、把图层添加到view的图层(layer)上，以显示出来。
代码
/** 绘制勾 */
//1、设置路线
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、创建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、所有图形绘制的方法，都应该写在drawRect方法里，因为从代码角度或者性能角度等方面考虑，这个方法里绘制图形的时机都是最好的。在需要切换状态时，调用[self setNeedsDisplay]方法进行重绘，在drawRect根据自己定义的一些参数来判断到底应该绘制哪个图案。
2、demo下载地址:https://github.com/YYProgrammer/YYTickViewDemo
