CAGradientLayer颜色的渐变(单色、多色、动画)

前言:

         随着App的开发和一些产品的干活,了解到产品扁平化有一种模式逐渐突出。这种模式在QQ、美颜相机等App里被使用。这种模式非常简单,但能够让用户有不同的感觉。

我们看看效果:

CAGradientLayer颜色的渐变(单色、多色、动画)_第1张图片


二、效果功能

  1、 可以单色渐变     2、多色渐变       3、在不同方向的渐变    4、可以动画渐变     5、可做加载进度条

三、代码如下

//

//  ViewController.m

//  颜色的渐变

//

//  Created by 周双建 on 16/4/20.

//  Copyright © 2016 周双建. All rights reserved.

//


#import "ViewController.h"


@interface ViewController (){

    CGFloat test ;

    NSMutableArray * ColoersArray;

}

@property(strong,nonatomic) CAGradientLayer * GradientLayer ;

@property(strong,nonatomic) CAGradientLayer * MoreGradientLayer ;

@property(strong,nonatomic) CAGradientLayer * AnimationGradientLayer ;

@property(strong,nonatomic) CAGradientLayer * AnimationRoundGradientLayer ;

@property(strong,nonatomic) NSTimer * GradientTimer;

@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0f];

#pragma mark 单色渐变

    [self singleGradient];

#pragma mark 多色渐变

    [self moreGradient];

#pragma mark 动画渐变

    [self animationGradient];

#pragma mark 圆圈渐变

    ColoersArray = [NSMutableArray arrayWithCapacity:0];

    [self roundGradient];

    

    // Do any additional setup after loading the view, typically from a nib.

}

-(void)singleGradient{

    // 初始化一个 CAGradientLayer 对象

    self.GradientLayer = [CAGradientLayer layer];

    // 设置CAGradientLayer 对象的大小

    self.GradientLayer.frame =CGRectMake(0, 70, self.view.frame.size.width, 100);

    

    // 设置渐变的方向

    self.GradientLayer.startPoint = CGPointMake(0.0f, 0.0f);

    self.GradientLayer.endPoint = CGPointMake(1.0f, 0.0f);

    

    // 设置渐变的颜色数组

    /*!

     *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换,并没有转移对象的所有权,如果被桥接的对象释放,则桥接后的值也无法使用。在ARC下使用__bridge,因为所有权仍然属于OC,因此归ARC管制,不必手动释放。

     */

    //    self.GradientLayer.colors = @[(__bridge id)[UIColor magentaColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];

    self.GradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,(__bridge id)[UIColor magentaColor].CGColor];

    

    // 设置渐变颜色的分割点

    //self.GradientLayer.locations = @[@(0.2f)];

    

    // 这个是使得颜色像素均匀变化(仅有一个选择)

    self.GradientLayer.type = kCAGradientLayerAxial;

    

    // 将其添加到要渐变的对象 Layer 层上

    [self.view.layer addSublayer:self.GradientLayer];

}

-(void)moreGradient{

    // 初始化一个 CAGradientLayer 对象

    self.MoreGradientLayer = [CAGradientLayer layer];

    // 设置CAGradientLayer 对象的大小

    self.MoreGradientLayer.frame =CGRectMake(0, 190, self.view.frame.size.width, 100);

    

    // 设置渐变的方向

    self.MoreGradientLayer.startPoint = CGPointMake(0.0f, 0.0f);

    self.MoreGradientLayer.endPoint = CGPointMake(1.0f, 0.0f);

    

    // 设置渐变的颜色数组

    /*!

     *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换,并没有转移对象的所有权,如果被桥接的对象释放,则桥接后的值也无法使用。在ARC下使用__bridge,因为所有权仍然属于OC,因此归ARC管制,不必手动释放。

     */

    self.MoreGradientLayer.colors = @[(__bridge id)[UIColor magentaColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor];

    

    // 设置渐变颜色的分割点

    self.MoreGradientLayer.locations = @[@(0.2f),@(0.4f),@(0.6f),@(0.8f)];

    

    // 这个是使得颜色像素均匀变化(仅有一个选择)

    self.MoreGradientLayer.type = kCAGradientLayerAxial;

    

    // 将其添加到要渐变的对象 Layer 层上

    [self.view.layer addSublayer:self.MoreGradientLayer];

}

-(void)animationGradient{

    // 定时器

    self.GradientTimer = [NSTimer timerWithTimeInterval:1 target:self selector:@selector(NextTime) userInfo:nil repeats:YES];

    [[NSRunLoop mainRunLoop] addTimer:self.GradientTimer forMode:NSDefaultRunLoopMode];

    

    // 初始化一个 CAGradientLayer 对象

    self.AnimationGradientLayer = [CAGradientLayer layer];

    // 设置CAGradientLayer 对象的大小

    self.AnimationGradientLayer.frame =CGRectMake(0,310, self.view.frame.size.width, 100);

    

    // 设置渐变的方向

    self.AnimationGradientLayer.startPoint = CGPointMake(0.0f, 0.0f);

    self.AnimationGradientLayer.endPoint = CGPointMake(1.0f, 0.0f);

    

    // 设置渐变的颜色数组

    /*!

     *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换,并没有转移对象的所有权,如果被桥接的对象释放,则桥接后的值也无法使用。在ARC下使用__bridge,因为所有权仍然属于OC,因此归ARC管制,不必手动释放。

     */

    self.AnimationGradientLayer.colors = @[(__bridge id)[UIColor magentaColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor];

    

   // self.AnimationGradientLayer.locations = @[@(0.2f),@(0.4f),@(0.6f),@(0.8f)];


    // 这个是使得颜色像素均匀变化(仅有一个选择)

    self.AnimationGradientLayer.type = kCAGradientLayerAxial;

    

    // 将其添加到要渐变的对象 Layer 层上

    [self.view.layer addSublayer:self.AnimationGradientLayer];


}

-(void)NextTime{

    // 设置渐变颜色的分割点

    test = test + 0.05;

    if (test>1.0) {

        test = 0.0f;

    }

    self.AnimationGradientLayer.locations = @[@(test),@(test + 0.01),@(test +0.04),@(test+0.06)];

}

-(void)roundGradient{

    

    // 初始化一个 CAGradientLayer 对象

    self.AnimationRoundGradientLayer = [CAGradientLayer layer];

    // 设置CAGradientLayer 对象的大小

    self.AnimationRoundGradientLayer.frame =CGRectMake(0, 430, self.view.frame.size.width, 10);

    

    // 设置渐变的方向

    self.AnimationRoundGradientLayer.startPoint = CGPointMake(0.0f, 0.0f);

    self.AnimationRoundGradientLayer.endPoint = CGPointMake(1.0f, 0.0f);

    

    CGFloat a = arc4random()%255;

    CGFloat b = arc4random()%255;

    CGFloat c = arc4random()%255;

    UIColor * Coloer = [UIColor colorWithRed:a/255.0 green:b/255.0 blue:c/255.0 alpha:1];

    [ColoersArray addObject:(__bridge id)Coloer.CGColor];

    if (ColoersArray.count>6) {

        [ColoersArray removeObjectsInRange:NSMakeRange(2, 4)];

    }

    [ColoersArray addObject:(__bridge id)[UIColor whiteColor].CGColor];

    NSLog(@"AAA:%ld",ColoersArray.count);

    // 设置渐变的颜色数组

    /*!

     *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换,并没有转移对象的所有权,如果被桥接的对象释放,则桥接后的值也无法使用。在ARC下使用__bridge,因为所有权仍然属于OC,因此归ARC管制,不必手动释放。

     */

    self.AnimationRoundGradientLayer.colors = ColoersArray;

    // 这个是使得颜色像素均匀变化(仅有一个选择)

    self.AnimationRoundGradientLayer.type = kCAGradientLayerAxial;

    

    // 将其添加到要渐变的对象 Layer 层上

    [self.view.layer addSublayer:self.AnimationRoundGradientLayer];

    

    CABasicAnimation *animation;

    animation = [CABasicAnimation animationWithKeyPath:@"colors"];

    [animation setToValue:@4];

    [animation setDuration:0.5];

    [animation setRemovedOnCompletion:YES];

    [animation setFillMode:kCAFillModeForwards];

    [animation setDelegate:self];

    [self.AnimationRoundGradientLayer addAnimation:animation forKey:@"animateGradient"];

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

    [self roundGradient];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


@end




你可能感兴趣的:(bridge,渐变,CAGradientLayer,颜色渐变,桥连接)