主要思路是:
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);
    }
}


最终得到一个六边形,它的边框颜色是渐变色,并且这个渐变色沿着六边形旋转。



标签: none

添加新评论