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

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

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

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

DCAutoImaginaryLayer.png transformView.gif

核心代码

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 值的不同导致角度获取的不连续，需要手动处理。

---

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

---

转载请注明出处 © XDChang
DCAutoImaginaryLayer