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

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

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

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

DCAutoImaginaryLayer.png

DCAutoImaginaryLayer.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 *)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 && y  0 && y > 0) {
        angle =  a;
    }
    if (x  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

简书责编内容来自:简书 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » 自定义圆环,跟随手指旋转角度加减layer

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录