CAGradientLayer渐变颜色动画

CAGradientLayer渐变颜色动画

或许你用过CAGradientLayer,你知道他是用于渐变颜色的,但你是否直到,CAGradientLayer的渐变颜色是可以动画的哦.

源码:

//

//  RootViewController.m

//  CAGradientLayer

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//



#import "RootViewController.h"

#import "CAShapeLayer+Circle.h"

#import "YXGCD.h"



@interface RootViewController ()



@property (nonatomic, strong) GCDTimer  *timer;



@end



@implementation RootViewController



- (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor blackColor];

    

    // 创建形状遮罩

    CAShapeLayer *circleLayer = [CAShapeLayer LayerWithCircleCenter:CGPointMake(82, 82)

                                                             radius:80

                                                         startAngle:DEGREES(0)

                                                           endAngle:DEGREES(360)

                                                          clockwise:YES

                                                    lineDashPattern:@[@5, @5]];

    circleLayer.strokeColor   = [UIColor blackColor].CGColor;   // 边缘线的颜色

    circleLayer.lineCap       = kCALineCapSquare;               // 边缘线的类型

    circleLayer.lineWidth     = 1.0f;                           // 线条宽度

    circleLayer.strokeStart   = 0.0f;

    circleLayer.strokeEnd     = 1.0f;

    

    // 创建渐变图层

    CAGradientLayer *faucet = [CAGradientLayer layer];

    faucet.frame            = CGRectMake(0, 0, 200, 200);

    faucet.position         = self.view.center;

    

    // 以CAShapeLayer的形状作为遮罩是实现特定颜色渐变的关键

    faucet.mask   = circleLayer;

    faucet.colors = @[(id)[UIColor greenColor].CGColor,

                      (id)[UIColor redColor].CGColor,

                      (id)[UIColor cyanColor].CGColor];

    

    // 设定动画时间

    faucet.speed = 0.5f;



    // 添加到系统图层中

    [self.view.layer addSublayer:faucet];



    // 定时器动画事件

    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];

    [_timer event:^{

        circleLayer.strokeEnd = arc4random() % 100 / 100.f;

        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];

    } timeInterval:NSEC_PER_SEC];

    [_timer start];

}



@end

效果如下:

以下代码才是核心的地方:

 

附录:

http://stackoverflow.com/questions/21121670/cagradientlayer-with-cashapelayer-mask-not-showing