自定义圆环，跟随手指旋转角度加减layer

需求分析：这种功能常见于数值实时加减，比如对音量的控制。手指滑动圆盘，数值随着滑动的角度而改变，效果图跟最终实现GIF如下。（DCAutoImaginaryLayer）

功能分析：自定义圆环音量调节显示，跟随手指旋转角度加减音量，利用了核心动画，图层，贝赛尔函数，三角函数与反三角函数；对外围螺纹线裁剪，使用了image layer mask 根据图片layer进行裁剪。一开始我想自己画螺纹线来着，无奈知识面太狭隘了，找了很多资料还是不会，所以最后就找了张有螺纹线的图片进行裁剪代替了。

实现原理：1.CAShapeLayer有虚线lineDashPattern的设置，可以实现这种间隔layer，不要自己费劲脑汁的一个个画了；2.利用图片裁剪螺纹线，也不用费劲脑汁的去想怎么画这个了；3.实现系统方法touchesMoved:处理角度，实时改变UIBezierPath并更新图层，实现最终效果。

核心代码

1.根据图片layer进行裁剪:

CALayer *maskLayer = [CALayer layer];
maskLayer.frame = CGRectMake(frame.size.width/2 - 97, frame.size.height/2 - 97, 194, 194);
UIImage *maskImage = [UIImage imageNamed:@"volume_area"];
maskLayer.contents = (__bridge id)maskImage.CGImage;
self.layer.mask = maskLayer;
复制代码

2.虚线的设置：

//每个虚线宽度为2，间隔为3 整个线条宽度为30
_shapeLayer.lineWidth = 30.0f;
_shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:4], [NSNumber numberWithInt:3], nil];
复制代码

3.path角度的处理：

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint touchPoint = [touch locationInView:self];
_endPoint = touchPoint;

float x = _endPoint.y - self.frame.size.height/2;
float y = _endPoint.x - self.frame.size.width/2;
float a = atanf(x/y);
float angle = 0.0;
// ========== 4个象限角度的处理 start =============//
if (x <0 && y < 0) {
angle = a-M_PI;
}
if (x > 0 && y < 0) {
angle = M_PI + a;
}
if (x > 0 && y > 0) {
angle =  a;
}
if (x < 0 && y > 0) {
angle = a;
}
// ========== 4个象限角度的处理 end =============//
_path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:90 startAngle:-M_PI endAngle:angle clockwise:1];
_shapeLayer.path = _path.CGPath;
}
复制代码

思路分析

要想layer跟着手指滑动实时更新，其实比较难想到的就是角度的处理，怎么实时获取正确的角度也是一个关键点。我首先想到的就是利用反三角函数获取角度，但是不能仅仅这样，还要注意四个象限x 跟 y 值的不同导致角度获取的不连续，需要手动处理。

这些小功能虽然不是很难，但是我能通过独立思考并利用自己所了解的知识点去实现它，我觉得很有成就感，它也是我进步的一个记录。

自定义圆环，跟随手指旋转角度加减layer

猜你喜欢