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;

@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

切图技巧分享—圆角背景色 原文:切图技巧分享—圆角背景色 一、设计稿 要实现下面这样一个效果，本文重点说的是下面“自动续费，可随时取消”这部分的实现。 我把问题简化一下，变成了 二、解决问题的思路 1、p标签加背景色 一般，很容易想到用p标签实现，代码如下：