使用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);
    }
}

 

最終得到一個六邊形，它的邊框顏色是漸變色，並且這個漸變色沿着六邊形旋轉。