iOS开发封装篇－利用CAShapeLayer和绘图封装一个动画按钮

最近在研究Quartz Core框架，重点学习了CAPlayer（图层）。今天就利用CAShapeLayer封装一个动画按钮。废话不多说说思路，

1.自定义一个按钮（记作大圆），给按钮添加拖动手势，注意不要使用这个方法，因为会与按钮点击事件冲突。

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

2.当拖动按钮时在按钮的位置在按钮的父视图上添加一个view（记作小圆），注意是给按钮的父视图而不是按钮本身添加view。

3利用CAShapeLayer在大圆与小圆之间绘制不规则矩形。

核心代码如下:

1.描述不规则矩形路径（主要涉及几何）

// 描述两圆之间一条矩形路径,主要涉及几何学
- (UIBezierPath *)pathWithBigCirCleView:(UIView *)bigCirCleView  smallCirCleView:(UIView *)smallCirCleView
{
    CGPoint bigCenter = bigCirCleView.center;
    CGFloat x2 = bigCenter.x;
    CGFloat y2 = bigCenter.y;
    CGFloat r2 = bigCirCleView.bounds.size.width / 2;

    CGPoint smallCenter = smallCirCleView.center;
    CGFloat x1 = smallCenter.x;
    CGFloat y1 = smallCenter.y;
    CGFloat r1 = smallCirCleView.bounds.size.width / 2;

    // 获取圆心距离
    CGFloat d = [self circleCenterDistanceWithBigCircleCenter:bigCenter smallCircleCenter:smallCenter];

    CGFloat sinθ = (x2 - x1) / d;

    CGFloat cosθ = (y2 - y1) / d;

    // 坐标系基于父控件
    CGPoint pointA = CGPointMake(x1 - r1 * cosθ , y1 + r1 * sinθ);
    CGPoint pointB = CGPointMake(x1 + r1 * cosθ , y1 - r1 * sinθ);
    CGPoint pointC = CGPointMake(x2 + r2 * cosθ , y2 - r2 * sinθ);
    CGPoint pointD = CGPointMake(x2 - r2 * cosθ , y2 + r2 * sinθ);
    CGPoint pointO = CGPointMake(pointA.x + d / 2 * sinθ , pointA.y + d / 2 * cosθ);
    CGPoint pointP =  CGPointMake(pointB.x + d / 2 * sinθ , pointB.y + d / 2 * cosθ);

    //路径
    UIBezierPath *path = [UIBezierPath bezierPath];

    // 起点A
    [path moveToPoint:pointA];

    // 绘制AB直线
    [path addLineToPoint:pointB];

    // 绘制BC曲线
    [path addQuadCurveToPoint:pointC controlPoint:pointP];

    // 绘制CD直线
    [path addLineToPoint:pointD];

    // 绘制DA曲线
    [path addQuadCurveToPoint:pointA controlPoint:pointO];

    return path;
}

2.懒加载创建CAShapeLayer类，并设置填充颜色等等

- (CAShapeLayer *)shapeLayer
{
    if (_shapeLayer == nil) {

        // 展示不规则矩形，通过不规则矩形路径生成一个图层
        CAShapeLayer *layer = [CAShapeLayer layer];

        _shapeLayer = layer;

        //设置填充颜色与自己的背景色一致
        layer.fillColor = self.backgroundColor.CGColor;

        [self.superview.layer insertSublayer:layer below:self.layer];
    }
    return _shapeLayer;
}

效果图如下:

上面的demo会放在github上，想要研究的小伙伴可以去看一下:Github，接下来我会继续分享两个非常有用的CAPlayer图层，CAGradientLayer（渐变图层）和CAReplicatorLayer（复制图层）。