自定义定制水滴

项目介绍：

下载地址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]; }

，开题报告