使用CAShapeLayer,UIBezierPath,CAGradientLayer构建边框颜色会旋转的六边形
主要思路是：
1.使用UIBezierPath绘制一个六边形路径
2.创建一个CAShapeLayer图层，将这个六边形path设置到CAShapeLayer属性上。然后设置fillColor为透明，strokeColor为黑色，lineWidth为5.0
3.创建一个CAGradientLayer渐变色图层，并将它的渐变类型设置成kCAGradientLayerConic以圆心为起点，以圆边为中点，并沿着圆旋转一周
4.设置CAGradientLayer.mask = CAShapeLayer, 得出一个被CAShapeLayer切割后的六边形
5.给CAGradientLayer的colors内容添加动态，让渐变图层的内容旋转，从而得到六边形渐变色旋转的结果
创建一个路径，也可以根据自己的需要进行创建，这里创建的是一个六边形
CGFloat squareSize =MIN(imageSize.width, imageSize.height);
UIBezierPath* path =[UIBezierPath bezierPath];
[path moveToPoint:CGPointMake((sin(M_1_PI/ 180 * 60)) * (squareSize / 2), (squareSize / 4))];
[path addLineToPoint:CGPointMake((squareSize/ 2), 0)];
[path addLineToPoint:CGPointMake(squareSize- ((sin(M_1_PI / 180 * 60)) * (squareSize / 2)), (squareSize / 4))];
[path addLineToPoint:CGPointMake(squareSize- ((sin(M_1_PI / 180 * 60)) * (squareSize / 2)), (squareSize / 2) + (squareSize / 4))];
[path addLineToPoint:CGPointMake((squareSize/ 2), squareSize)];
[path addLineToPoint:CGPointMake((sin(M_1_PI/ 180 * 60)) * (squareSize / 2), (squareSize / 2) + (squareSize / 4))];
[path closePath];
将创建好的UIBezierPath传递给CAShapeLayer图层中，让图层拥有path的图案
CAShapeLayer *pathLayer = [CAShapeLayer layer]; pathLayer.frame = CGRectMake(0, 5, self.bounds.size.width, self.bounds.size.height); pathLayer.path = path.CGPath; pathLayer.strokeColor = [UIColor blackColor].CGColor; pathLayer.fillColor = [UIColor clearColor].CGColor; pathLayer.lineWidth = 5.0; pathLayer.lineJoin = kCALineJoinRound;
创建一个渐变色图层
// 创建渐变图层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
gradientLayer.type = kCAGradientLayerConic;
// 定义颜色数组，中间白色，两边透明
NSArray *colors = @[(id)[UIColor colorWithWhite:1 alpha:1].CGColor,
(id)[UIColor colorWithWhite:0.8 alpha:0.8].CGColor,
(id)[UIColor colorWithWhite:0.6 alpha:0.6].CGColor,
(id)[UIColor colorWithWhite:0.5 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0.5 alpha:0].CGColor,
(id)[UIColor colorWithWhite:0.6 alpha:0.6].CGColor,
(id)[UIColor colorWithWhite:0.8 alpha:0.8].CGColor,
(id)[UIColor colorWithWhite:1 alpha:1].CGColor];
gradientLayer.colors = colors;
gradientLayer.startPoint = CGPointMake(0.5, 0.5);
gradientLayer.endPoint = CGPointMake(0, 0.5);
// 设置颜色位置
gradientLayer.locations = @[@0.0, @0.05, @0.1, @0.15, @0.5, @0.85, @0.9, @0.95, @1.0];
将渐变图层添加到View的图层上，然后使用Shape图层进行mask切割，得出想要的图案。
mask的的原理：对应设置的图层中，如果像素是黑色的，其对应的下面的图层内容就显示，如果某部分图层像素是透明的，那么透明像素下面的图层内容就不展示。
[self.layer addSublayer:self.gradientLayer]; self.gradientLayer.mask = self.pathLayer;
开启渐变图层内容动画
将图层中的endPoint随时间进行线性移动，从而实现图层固定，里面的内容随时间进行动画。
- (void)createTimer {
gcdTimer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_global_queue(0, 0));
dispatch_source_set_timer(gcdTimer, DISPATCH_TIME_NOW, 0.02 * NSEC_PER_SEC, 0.01 * NSEC_PER_SEC);
dispatch_source_set_event_handler(gcdTimer, ^{
dispatch_async(dispatch_get_main_queue(), ^{
[self handleTimerEvent];
});
});
dispatch_resume(gcdTimer);
}
- (void)handleTimerEvent {
CGFloat speed = 0.04;
CGPoint endPoint = self.gradientLayer.endPoint;
if (endPoint.x <= 0 && endPoint.y > 0 && !self.leftMove) {
self.bottomMove = YES;
self.topMove = NO;
self.gradientLayer.endPoint = CGPointMake(endPoint.x, endPoint.y-speed);
} else if (endPoint.x < 1 && endPoint.y <= 0 && !self.topMove) {
self.leftMove = YES;
self.rightMove = NO;
self.gradientLayer.endPoint = CGPointMake(endPoint.x+speed, endPoint.y);
} else if (endPoint.x >= 1 && endPoint.y < 1 && !self.rightMove) {
self.topMove = YES;
self.bottomMove = NO;
self.gradientLayer.endPoint = CGPointMake(endPoint.x, endPoint.y+speed);
} else if (endPoint.x >= 0 && endPoint.y >= 1 && !self.bottomMove) {
self.rightMove = YES;
self.leftMove = NO;
self.gradientLayer.endPoint = CGPointMake(endPoint.x-speed, endPoint.y);
}
}
最终得到一个六边形，它的边框颜色是渐变色，并且这个渐变色沿着六边形旋转。
