美文网首页
CAGradientLayer实现绚丽彩色圆(环)弧2

CAGradientLayer实现绚丽彩色圆(环)弧2

作者: Fendouzhe | 来源:发表于2017-12-15 12:20 被阅读0次

效果:


代码:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

// 将常数转换为度数
#define   DEGREES(degrees)  ((M_PI * (degrees))/ 180.f)

@interface CAShapeLayer (Circle)

// 圆环
+ (instancetype)LayerWithCircleCenter:(CGPoint)point
                               radius:(CGFloat)radius
                           startAngle:(CGFloat)startAngle
                             endAngle:(CGFloat)endAngle
                            clockwise:(BOOL)clockwise
                      lineDashPattern:(NSArray *)lineDashPattern;

// 圆
+ (instancetype)LayerWithCircleCenter:(CGPoint)point
                               radius:(CGFloat)radius
                           startAngle:(CGFloat)startAngle
                             endAngle:(CGFloat)endAngle
                            clockwise:(BOOL)clockwise;
#import "CAShapeLayer+Circle.h"

@implementation CAShapeLayer (Circle)

+ (instancetype)LayerWithCircleCenter:(CGPoint)point
                               radius:(CGFloat)radius
                           startAngle:(CGFloat)startAngle
                             endAngle:(CGFloat)endAngle
                            clockwise:(BOOL)clockwise
                      lineDashPattern:(NSArray *)lineDashPattern
{
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                        radius:radius
                                                    startAngle:startAngle
                                                      endAngle:endAngle
                                                     clockwise:clockwise];
    
    // 获取path
    layer.path = path.CGPath;
    layer.position = point;
    
    // 设置填充颜色为透明
    layer.fillColor = [UIColor clearColor].CGColor;
    
    // 获取曲线分段的方式
    if (lineDashPattern)
    {
        layer.lineDashPattern = lineDashPattern;
    }
    
    return layer;
}

+ (instancetype)LayerWithCircleCenter:(CGPoint)point
                               radius:(CGFloat)radius
                           startAngle:(CGFloat)startAngle
                             endAngle:(CGFloat)endAngle
                            clockwise:(BOOL)clockwise
{
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                        radius:radius/2.f
                                                    startAngle:startAngle
                                                      endAngle:endAngle
                                                     clockwise:clockwise];
    
    // 获取path
    layer.path      = path.CGPath;
    layer.position  = point;
    layer.lineCap   = kCALineCapButt;
    layer.lineWidth = radius;
    
    // 设置填充颜色为透明
    layer.fillColor = [UIColor clearColor].CGColor;
    
    return layer;
}
#import "ViewController.h"
#import "CAShapeLayer+Circle.h"

@interface ViewController ()

@property (nonatomic, strong) NSTimer         *timer;
@property (nonatomic, strong) CAGradientLayer *faucet;
@property (nonatomic, strong) CAShapeLayer    *circleLayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 设置背景色
    self.view.backgroundColor = [UIColor colorWithRed:0.878 green:0.878 blue:0.878 alpha:1];
    
    // 创建形状遮罩
    self.circleLayer = [CAShapeLayer LayerWithCircleCenter:CGPointMake(82, 82)
                                                    radius:80
                                                startAngle:DEGREES(0)
                                                  endAngle:DEGREES(360)
                                                 clockwise:YES
                                           lineDashPattern:@[@10, @10]];
    self.circleLayer.strokeColor   = [UIColor blackColor].CGColor;  // 边缘线的颜色
    self.circleLayer.lineCap       = kCALineCapSquare;              // 边缘线的类型
    self.circleLayer.lineWidth     = 4.f;                           // 线条宽度
    self.circleLayer.strokeStart   = 0.0f;
    self.circleLayer.strokeEnd     = 1.0f;
    
    // 创建渐变图层
    self.faucet          = [CAGradientLayer layer];
    self.faucet.frame    = CGRectMake(0, 0, 200, 200);
    self.faucet.position = self.view.center;
    
    // 以CAShapeLayer的形状作为遮罩是实现特定颜色渐变的关键
    self.faucet.mask   = self.circleLayer;
    self.faucet.colors = @[(id)[UIColor greenColor].CGColor,
                           (id)[UIColor redColor].CGColor,
                           (id)[UIColor cyanColor].CGColor,
                           (id)[UIColor purpleColor].CGColor,
                           (id)[UIColor yellowColor].CGColor];
    
    // 设定动画时间
    self.faucet.speed = 0.5f;
    
    // 添加到系统图层中
    [self.view.layer addSublayer:self.faucet];
    
    // 创建定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.f
                                                  target:self
                                                selector:@selector(timerEvent)
                                                userInfo:nil
                                                 repeats:YES];
}

/**
 *  定时器事件
 */
- (void)timerEvent {
    self.faucet.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
                                               green:arc4random()%255/255.f
                                                blue:arc4random()%255/255.f
                                               alpha:1].CGColor,
                           (id)[UIColor colorWithRed:arc4random()%255/255.f
                                               green:arc4random()%255/255.f
                                                blue:arc4random()%255/255.f
                                               alpha:1].CGColor,
                           (id)[UIColor colorWithRed:arc4random()%255/255.f
                                               green:arc4random()%255/255.f
                                                blue:arc4random()%255/255.f
                                               alpha:1].CGColor,
                           (id)[UIColor colorWithRed:arc4random()%255/255.f
                                               green:arc4random()%255/255.f
                                                blue:arc4random()%255/255.f
                                               alpha:1].CGColor,
                           (id)[UIColor colorWithRed:arc4random()%255/255.f
                                               green:arc4random()%255/255.f
                                                blue:arc4random()%255/255.f
                                               alpha:1].CGColor];
}

@end

相关文章

网友评论

      本文标题:CAGradientLayer实现绚丽彩色圆(环)弧2

      本文链接:https://www.haomeiwen.com/subject/rcorwxtx.html