手绘彩色光圈

手绘彩色光圈

http://code4app.com/ios/Quart2D%E6%89%8B%E7%BB%98%E5%BD%A9%E8%89%B2%E5%85%89%E5%9C%88/53b7c132933bf0191b8b4680

效果(本人根据上述源码进行了很大的改动):

源码:

MulticolorView.h

//
//  MulticolorView.h
//  MulticolorLayerDemo
//
//  Created by Liuyu on 14-7-5.
//
//  Modify by YouXianMing on 14-7-13
//
//  Copyright (c) 2014年 Liuyu. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface MulticolorView : UIView

@property (nonatomic, assign) CGFloat          lineWidth;  // 圆的线宽
@property (nonatomic, assign) CFTimeInterval   sec;        // 秒
@property (nonatomic, assign) CGFloat          percent;    // 百分比

@property (nonatomic, strong) NSArray         *colors;     // 颜色组(CGColor)

- (void)startAnimation;
- (void)endAnimation;

@end

MulticolorView.m

//
//  MulticolorView.m
//  MulticolorLayerDemo
//
//  Created by Liuyu on 14-7-5.
//
//  Modify by YouXianMing on 14-7-13
//
//  Copyright (c) 2014年 Liuyu. All rights reserved.
//


#import "MulticolorView.h"

@interface MulticolorView ()

@property (nonatomic, strong) CAShapeLayer *circleLayer;

@end

@implementation MulticolorView

#pragma mark - 将当前view的layer替换成渐变色layer
+ (Class)layerClass
{
    return [CAGradientLayer class];
}

#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        _circleLayer = [CAShapeLayer layer];
    }
    return self;
}

#pragma mark - 配置颜色
- (void)setupMulticolor
{
    // 获取当前的layer
    CAGradientLayer *gradientLayer = (CAGradientLayer *)[self layer];
    
    // 创建颜色数组
    NSMutableArray *colors = [NSMutableArray array];
    
    // 如果自定义颜色为空
    if (_colors == nil)
    {
        for (NSInteger hue = 0; hue <= 360; hue += 10)
        {
            [colors addObject:(id)[UIColor colorWithHue:1.0*hue/360.0
                                             saturation:1.0
                                             brightness:1.0
                                                  alpha:1.0].CGColor];
        }
        
        // 给渐变色layer设置颜色
        [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    }
    else
    {
        // 给渐变色layer设置颜色
        [gradientLayer setColors:_colors];
    }
}

#pragma mark - 配置圆形
- (CAShapeLayer *)produceCircleShapeLayer
{
    // 生产出一个圆的路径
    CGPoint circleCenter = CGPointMake(CGRectGetMidX(self.bounds),
                                       CGRectGetMidY(self.bounds));
    
    CGFloat circleRadius = 0;
    
    if (_lineWidth == 0)
    {
        circleRadius = self.bounds.size.width/2.0 - 2;
    }
    else
    {
        circleRadius = self.bounds.size.width/2.0 - 2*_lineWidth;
    }

    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:circleCenter
                                                              radius:circleRadius
                                                          startAngle:M_PI
                                                            endAngle:-M_PI
                                                           clockwise:NO];
    
    // 生产出一个圆形路径的Layer
    _circleLayer.path          = circlePath.CGPath;
    _circleLayer.strokeColor   = [UIColor whiteColor].CGColor;
    _circleLayer.fillColor     = [[UIColor clearColor] CGColor];
    
    if (_lineWidth == 0)
    {
        _circleLayer.lineWidth     = 1;
    }
    else
    {
        _circleLayer.lineWidth     = _lineWidth;
    }
    
    // 可以设置出圆的完整性
    _circleLayer.strokeStart = 0;
    _circleLayer.strokeEnd = 1.0;
    
    return _circleLayer;
}

#pragma mark - Animation

- (void)startAnimation
{
    // 设置渐变layer以及其颜色值
    [self setupMulticolor];
    
    // 生产一个圆形路径并设置成遮罩
    self.layer.mask = [self produceCircleShapeLayer];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    
    if (_sec == 0)
    {
        animation.duration = 5;
    }
    else
    {
        animation.duration = _sec;
    }
    
    animation.repeatCount       = MAXFLOAT;
    animation.fromValue         = [NSNumber numberWithDouble:0];
    animation.toValue           = [NSNumber numberWithDouble:M_PI*2];
    [self.layer addAnimation:animation forKey:nil];
}

@synthesize percent = _percent;
-(CGFloat)percent
{
    return _percent;
}

- (void)setPercent:(CGFloat)percent
{
    if (_circleLayer)
    {
        _circleLayer.strokeEnd = percent;
    }
}

- (void)endAnimation
{
    [self.layer removeAllAnimations];
}

@end

ViewController.m

//
//  ViewController.m
//  MulticolorLayerDemo
//
//  Created by Liuyu on 14-7-5.
//
//  Modify by YouXianMing on 14-7-13
//
//  Copyright (c) 2014年 Liuyu. All rights reserved.
//

#import "ViewController.h"
#import "MulticolorView.h"

@interface ViewController ()

@property (nonatomic, strong) NSTimer         *timer;
@property (nonatomic, strong) MulticolorView  *showView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _showView           = [[MulticolorView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    _showView.lineWidth = 1.f;
    _showView.sec       = 2.f;
    _showView.colors    = @[(id)[UIColor cyanColor].CGColor,
                            (id)[UIColor yellowColor].CGColor,
                            (id)[UIColor cyanColor].CGColor];
    _showView.center    = self.view.center;
    _timer              = [NSTimer scheduledTimerWithTimeInterval:1
                                                           target:self
                                                         selector:@selector(event:)
                                                         userInfo:nil
                                                          repeats:YES];
    
    [self.view addSubview:_showView];
    [_showView startAnimation];
}

- (void)event:(id)object
{
    _showView.percent = arc4random()%100/100.f;
}

@end

原理:

1. 改变view的backedlayer为渐变色layer

2. 给这个view添加一个shapeLayer

3. 将这个shapeLayer当这个view的backedlayer

4. 动画

5. 结束:)

可以设置的参数有4个:)