手绘彩色光圈

简介:

手绘彩色光圈

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个:)

目录
相关文章
|
移动开发 JSON 小程序
情人节福利,恋爱话术微信小程序它来了(开源,看了就懂~,2万字真香警告)
情人节福利,恋爱话术微信小程序它来了(开源,看了就懂~,2万字真香警告)
853 0
情人节福利,恋爱话术微信小程序它来了(开源,看了就懂~,2万字真香警告)
|
人工智能 自然语言处理 IDE
通义灵码:程序员必备的AI编程助手!
通义灵码:阿里云AI编程助手,提供代码生成、智能问答、异常排查等功能,支持多种编程语言和IDE,如VSCode、JetBrains。具备跨文件感知、阿里云服务优化,现个人专业版限时免费。包括行级/函数级续写、自然语言转代码、单元测试生成、代码优化与注释、研发问答等。适用于Java、Python等语言
1494 0
|
12月前
|
Java
java小工具util系列4:基础工具代码(Msg、PageResult、Response、常量、枚举)
java小工具util系列4:基础工具代码(Msg、PageResult、Response、常量、枚举)
179 5
|
数据挖掘
R语言方差分析(ANOVA):理解与应用
【8月更文挑战第31天】ANOVA是一种强大的统计方法,用于比较三个或更多组之间的均值差异。在R语言中,我们可以轻松地使用`aov()`函数进行ANOVA分析,并通过后置检验(如TukeyHSD检验)来进一步分析哪些组之间存在显著差异。ANOVA在多个领域都有广泛的应用,是数据分析中不可或缺的工具之一。
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
215 0
考研高数之无穷级数题型一:判断收敛性、求收敛半径以及收敛域和收敛区间(题目讲解)
考研高数之无穷级数题型一:判断收敛性、求收敛半径以及收敛域和收敛区间(题目讲解)
1100 0
|
SQL 关系型数据库 Java
第三章:OceanBase产品家族及基础概念
第三章:OceanBase产品家族及基础概念
486 0
|
监控 NoSQL Redis
|
弹性计算 容灾 安全
阿里云服务器入口(两种渠道)
阿里云服务器入口有两种方式,一种是活动机,另一种是在云服务器ECS页面购买,2023阿里云服务器购买流程更新,选购云服务器有两个入口,一个是选择活动机,只需要选择云服务器地域、系统、带宽即可;另一个是在云服务器页面,自定义选择云服务器配置,这种方式购买云服务器较为复杂,需要选付费方式、地域及可用区、ECS实例规格、镜像、网络、公网IP、安全组等配置
995 0
阿里云服务器入口(两种渠道)
|
缓存
STM32使用HAL库实现串口通讯——实战操作
STM32使用HAL库实现串口通讯——实战操作
583 0