自定义水滴

项目介绍：

下载地址https://github.com/Maling1255/WaterDrop

核心代码

/**
 * 水滴图层路径
 */
- (void)setupShapeLayer
{
    // 修改默认线条颜色
    [[UIColor colorWithHex:@"FF8854"] set];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // 设置起点
    [path moveToPoint:CGPointMake(CircleRadius * 2, 0)];
    
    // 添加第一条 二次贝塞尔曲线
    [path addQuadCurveToPoint:CGPointMake(CircleRadius * 1, 100) controlPoint:CGPointMake(3 + CircleRadius * 1, 55)];
    
    // 添加半圆路径
    [path addArcWithCenter:CGPointMake(CircleRadius * 2, CircleRadius + 30) radius:CircleRadius startAngle:-M_PI endAngle:0 clockwise:NO];
    
    // 添加第二条 二次贝塞尔曲线
    [path addQuadCurveToPoint:CGPointMake(CircleRadius * 2, 0) controlPoint:CGPointMake(CircleRadius * 2 + (CircleRadius - 3), 55)];
    
    CAShapeLayer *lineChartLayer = [CAShapeLayer layer];
    self.lineChartLayer = lineChartLayer;
    lineChartLayer.path = path.CGPath;
    lineChartLayer.fillColor = [[UIColor clearColor] CGColor];
    lineChartLayer.strokeColor = [UIColor colorWithHex:@"FF8854"].CGColor;
    
    // 设置路径宽度为0，使线条不显示出来
    lineChartLayer.lineWidth = 0;
    lineChartLayer.lineCap = kCALineCapRound;
    
    // 路径关闭渲染超出的部分剪切掉（这里指波浪）
    [path stroke];
    [path addClip];
    
    // 修改默认线条颜色
//    [[UIColor colorWithHexString:@"FF8854" alpha:1] setStroke];
    
    
    [self.layer addSublayer:lineChartLayer];
    
    [self drawGradientBackgroundViewWithlayer:lineChartLayer];
    
}

渐变水滴轮廓

/**
 绘制渐变水滴轮廓

 @param shapeLayer 路径shapeLayer
 */
- (void)drawGradientBackgroundViewWithlayer:(CAShapeLayer *)shapeLayer
{
    
    CALayer *gradientLayer = [CALayer layer];
    gradientLayer.frame = self.bounds;
    
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(MGWidth/2.0, 0, MGWidth/2.0,  MGHeight/2.0);
    gradientLayer1.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0.8].CGColor,
                               (__bridge id)[UIColor colorWithWhite:1 alpha:0.6].CGColor];
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint = CGPointMake(0, 1);
    
    CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
    gradientLayer2.frame = CGRectMake(MGWidth/2.0, MGHeight/2.0, MGWidth/2.0,  MGHeight/2.0);
    gradientLayer2.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0.6].CGColor,
                               (__bridge id)[UIColor colorWithWhite:1 alpha:0.4].CGColor];
    
    [gradientLayer2 setLocations:@[@0.3, @0.8,@1]];
    gradientLayer2.startPoint = CGPointMake(0, 0);
    gradientLayer2.endPoint = CGPointMake(0, 1);
    
    CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
    gradientLayer3.frame = CGRectMake(0, MGHeight/2.0, MGWidth/2.0,  MGHeight/2.0);
    gradientLayer3.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0.27].CGColor,
                              (__bridge id)[UIColor colorWithWhite:1 alpha:0.4].CGColor];
    
    [gradientLayer3 setLocations:@[@0.2, @0.8]];
    gradientLayer3.startPoint = CGPointMake(0.5, 0);
    gradientLayer3.endPoint = CGPointMake(0.5, 1);
    
    CAGradientLayer *gradientLayer4 = [CAGradientLayer layer];
    gradientLayer4.frame = CGRectMake(0, 0, MGWidth/2.0,  MGHeight/2.0);
    gradientLayer4.colors = @[(__bridge id)[UIColor colorWithWhite:1 alpha:0.18].CGColor,
                              (__bridge id)[UIColor colorWithWhite:1 alpha:0.27].CGColor];
    
    [gradientLayer4 setLocations:@[@0.2, @0.8]];
    gradientLayer4.startPoint = CGPointMake(0.5, 1);
    gradientLayer4.endPoint = CGPointMake(0.5, 0);

    
    // 绘制第一个渐变图层
    [gradientLayer addSublayer:gradientLayer1];
    
    [gradientLayer addSublayer:gradientLayer2];
    
    [gradientLayer addSublayer:gradientLayer3];
    
    [gradientLayer addSublayer:gradientLayer4];
    
    [self.layer addSublayer:gradientLayer];
    
    [gradientLayer setMask:shapeLayer];
    
}

设置动画

/** 动画开始 */
- (void)startDrawPath
{
    // 设置路径宽度为5，使其能够显示出来
    self.lineChartLayer.lineWidth = 5;

    // 设置动画的相关属性
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2.5;
    pathAnimation.repeatCount = 1;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    pathAnimation.delegate = self;
    
    [self.lineChartLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
    
}

/** 动画结束 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    CALayer *pointLayer = [CALayer layer];
    
    pointLayer.frame = CGRectMake(MGWidth / 2.0 - 3.5, -3.5, 7, 7);
    pointLayer.backgroundColor = [UIColor whiteColor].CGColor;
    pointLayer.cornerRadius = 3.5;
    pointLayer.masksToBounds = YES;
    
    pointLayer.shadowOffset =  CGSizeMake(10, 10);
    pointLayer.shadowOpacity = 0.8;
    pointLayer.shadowColor =  [UIColor blueColor].CGColor;
    
    [self.layer addSublayer:pointLayer];
}