IOS進度漸變圖層CAGradientLayer

看支付寶螞蟻積分,天氣預報等好多APP都有圓形漸變效果,今天就試着玩了。

一.CAGradientLayer類中屬性介紹

CAGradientLayer繼承CALayer,主要有如下幾個屬性:

1.@property(nullable, copy) NSArray *colors; 漸變的顏色 這個數組中只設置一個顏色是不顯示的

2.@property(nullable, copy) NSArray<NSNumber *> *locations;每種顏色的最亮的位置

3.@property CGPoint startPoint;  @property CGPoint endPoint; 漸變的方向 左上(0,0)  右下(1,1) startPoint——>endPoint

4.@property(copy) NSString *type; 目前只有一種kCAGradientLayerAxial

經過設置上面的屬性來看下效果 

  

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    
    gradientLayer.frame = CGRectMake(20, 100, 200, 200);
    
    //設置顏色
    [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor greenColor] CGColor],(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor redColor] CGColor], nil]];
    
    //每種顏色最亮的位置
    [gradientLayer setLocations:@[@0,@0.2,@0.4,@0.8,@1]];
    //漸變的方向StartPoint－>EndPoint
    [gradientLayer setStartPoint:CGPointMake(0, 0)];
    [gradientLayer setEndPoint:CGPointMake(1, 1)];
    
    [self.view.layer addSublayer:gradientLayer];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

二 .使用CAGradientLayer+UIBezierPath實現圓形漸變

1.自定義GredientLayerView

#import <UIKit/UIKit.h>

@interface GredientLayerView : UIView

@end

//
//  GredientLayerView.m
//  GredientLayerView
//
//  Created by City--Online on 15/10/26.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "GredientLayerView.h"

#define degreesToRadians(x) (M_PI*(x)/180.0) //把角度轉換成PI的方式

static const float kPROGRESS_LINE_WIDTH=4.0;

@interface GredientLayerView ()

@property (nonatomic,strong) CAShapeLayer *progressLayer;

@end
@implementation GredientLayerView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        //設置貝塞爾曲線
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(frame.size.width-kPROGRESS_LINE_WIDTH)/2 startAngle:degreesToRadians(-210) endAngle:degreesToRadians(30) clockwise:YES];

        //遮罩層
        _progressLayer = [CAShapeLayer layer];
        _progressLayer.frame = self.bounds;
        _progressLayer.fillColor =  [[UIColor clearColor] CGColor];
        _progressLayer.strokeColor=[UIColor redColor].CGColor;
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.lineWidth = kPROGRESS_LINE_WIDTH;
        
        //漸變圖層
        CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
        gradientLayer.frame = _progressLayer.frame;
        [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor], nil]];
        [gradientLayer setLocations:@[@0,@0.6,@1]];
        [gradientLayer setStartPoint:CGPointMake(0, 0)];
        [gradientLayer setEndPoint:CGPointMake(1, 0)];


        //用progressLayer來截取漸變層 遮罩
        [gradientLayer setMask:_progressLayer];
        [self.layer addSublayer:gradientLayer];
        
        //增長動畫
        CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        pathAnimation.duration = 2;
        pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
        pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
        pathAnimation.autoreverses=NO;
        _progressLayer.path=path.CGPath;
        [_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    }
    return self;
}

@end

2.調用

//
//  ViewController.m
//  Gredientlayer
//
//  Created by City--Online on 15/10/26.
//  Copyright © 2015年 City--Online. All rights reserved.
//

#import "ViewController.h"
#import "GredientLayerView.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    GredientLayerView *gredientLayerView=[[GredientLayerView alloc]initWithFrame:CGRectMake(30, 100, 200, 200)];
    [self.view addSubview:gredientLayerView];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

3.效果

關於遮罩層的定義請參考百度百科:http://baike.baidu.com/view/1140860.htm

遮罩層必須至少有兩個圖層，上面的一個圖層爲「遮罩層」，下面的稱「被遮罩層」；這兩個圖層中只有相重疊的地方纔會被顯示。也就是說在遮罩層中有對象的地方就是「透明」的，能夠看到被遮罩層中的對象，而沒有對象的地方就是不透明的，被遮罩層中相應位置的對象是看不見的。

它的原理是：上面一層是遮罩層，下面一層是被遮罩層。遮罩層上的圖，本身是不顯示的。它只起到一個透光的做用。假定遮罩層上是一個正圓，那麼光線就會透過這個圓形，射到下面的被遮罩層上，只會顯示一個圓形的圖形。若是遮罩層上什麼都沒有，那麼光線就沒法透到下面來，那麼下面的被遮罩層什麼也顯示不出來。

以前一直疑惑當設置遮罩後,遮罩層並不顯示自身的樣式,例如我設置了遮罩層的strokeColor爲紅色時,顯示的是被遮罩層,當設置爲透明時被遮罩層也不顯示了,具體透明是什麼樣的一個原理,暫且還沒弄明白,這裏根據上面的遮罩層的原理就認爲設置透明則就是上面的什麼都沒有

 

---------------我是有底線的-------------------- 
做者：社會主義接班人
出處：http://www.cnblogs.com/5ishare/本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。若是文中有什麼錯誤，歡迎指出。以避免更多的人被誤導。