iOS - 實現(xiàn)漸變的方法總結(jié)

iOS 開發(fā)中漸變效果因為其獨有的視覺效果和體驗衡载，被很多的產(chǎn)品所使用搔耕，所以掌握漸變效果的實現(xiàn)也變得更加的重要。
在日常開發(fā)中漸變的根據(jù)效果和需求的不同有幾種方式痰娱，下面我們逐一介紹一下（新手總結(jié)弃榨，不喜勿噴 ??）。
打一個廣告：本人目前離職狀態(tài)（公司資金出現(xiàn)問題梨睁，原部門人員全體被迫離職鲸睛。。而姐。）如果有對我感興趣的請給我留言或者簡書私聊我腊凶，謝謝划咐！

1. CAGradientLayer實現(xiàn)漸變

先看CAGradientLayer的簡單使用案例：

CAGradientLayer *graLayer = [CAGradientLayer layer];
graLayer.frame = CGRectMake(100, 100, 100, 100);
graLayer.position = self.view.layer.position;
graLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,
                    (__bridge id)[UIColor yellowColor].CGColor,
                    (__bridge id)[UIColor redColor].CGColor];
graLayer.locations = @[@(0.5), @(0.7), @(1.0)];
graLayer.startPoint = CGPointMake(0, 0.5);
graLayer.endPoint = CGPointMake(1, 0.5);
[self.view.layer addSublayer:graLayer];

實現(xiàn)效果

其實說到漸變拴念，大家第一個想到的其實就是 CAGradientLayer， CAGradientLayer 繼承自 CALayer 褐缠，CAGradientLayer 自然也就繼承了CALayer的一些屬性和方法政鼠。
其實CAGradientLayer提供的屬性非常的少，就以下幾個屬性：

/// 顏色漸變队魏，每個梯度停止的顏色 ：既然是數(shù)組類型說明可以添加多個顏色的漸變
@property(nullable, copy) NSArray *colors;
/// 相對坐標公般，顏色開始漸變的相對位置,可動畫
@property(nullable, copy) NSArray<NSNumber *> *locations;
/// 開始的位置 （范圍 （0, 0）-> (1,1)）
@property CGPoint startPoint;
/// 結(jié)束的位置 （范圍 （0, 0）-> (1,1)）
@property CGPoint endPoint;
/// 就一個默認值kCAGradientLayerAxial，按像素均勻變化
@property(copy) CAGradientLayerType type;

CAGradientLayer 的這四個屬性 colors locations startPoint endPoint 都是可以進行動畫的
可以看到 CAGradientLayer 實現(xiàn)漸變非常的簡單方便胡桨，但是也正是如此官帘，其不能夠?qū)崿F(xiàn)一些復(fù)雜的漸變效果，如環(huán)形或者圓形的漸變昧谊。

2. Core Graphics相關(guān)方法實現(xiàn)漸變

在能夠使用 CAGradientLayer 的情況下盡量使用 CAGradientLayer 刽虹，因為Core Graphics的繪圖速度沒有 CAGradientLayer 的速度快，換句話說 Core Graphics 更加的消耗性能（未驗證??）呢诬。
先看案例：

UIImageView *imageview = [[UIImageView alloc]initWithFrame:CGRectMake(200, 100, 100, 100)];
[self.view addSubview:imageview];

///表示需要使用的色彩標準（為創(chuàng)建CGColor做準備）
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };

NSArray *colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor blueColor].CGColor];
/*
*第一個參數(shù)：顏色空間
*第二個參數(shù)：CGFloat數(shù)組涌哲，指定漸變的開始顏色胖缤，終止顏色，以及過度色（如果有的話）
*第三個參數(shù)：指定每個顏色在漸變色中的位置阀圾，值介于0.0-1.0之間
*                      0.0表示最開始的位置哪廓，1.0表示漸變結(jié)束的位置
*/
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);


//漸變的開始和結(jié)束的點 具體方向可根據(jù)需求修改
CGPoint startPoint = CGPointMake(0, CGRectGetHeight(imageview.frame) * 0.5);
CGPoint endPoint = CGPointMake(CGRectGetWidth(imageview.frame), CGRectGetHeight(imageview.frame) * 0.5);

/// 開啟圖形上下文
UIGraphicsBeginImageContext(imageview.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
/// 開啟線性顏色漸變 還有一個 CGGradientCreateWithColorComponents 這里不做介紹
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
/// 從Context中獲取圖像，并顯示在界面上
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
imageview.image = image;

運行結(jié)果

上面顯示的是線性漸變（CGContextDrawLinearGradient）初烘，還有一種是徑向漸變（CGContextDrawRadialGradient）

徑向漸變

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
[self.view addSubview:view];

///表示需要使用的色彩標準（為創(chuàng)建CGColor做準備）
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };

NSArray *colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor blueColor].CGColor];
//漸變的中心
CGPoint gradCenter = CGPointMake(view.bounds.size.width/2.0, view.bounds.size.height/2.0);
//漸變的半徑
CGFloat gradRadius = MIN(CGRectGetWidth(view.bounds), CGRectGetHeight(view.bounds));
//漸變準備
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);
/// 開啟圖形上下文
UIGraphicsBeginImageContext(view.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
//Gradient Draw
CGContextDrawRadialGradient(context, gradient, gradCenter, 0, gradCenter, gradRadius, 0);
/// 釋放掉
CGGradientRelease(gradient);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIColor *color = [UIColor colorWithPatternImage:image];
NSLog(@"color = %@, image = %@",color,image);
view.backgroundColor = color;
UIGraphicsEndImageContext();

最終效果

最后附上我平時的封裝方法：

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSUInteger, XXHGradientLayerType){
    XXHGradientLayerTypeHorizontal,
    XXHGradientLayerTypeVertical
};


@interface UIView (XXHGradientLayer)

/**
 添加漸變圖層

 @param direction 圖層方向涡真，分為水平和豎直
 @param firstColor 第一種顏色
 @param secondColor 第二種顏色
 */
- (void)addGradientLayerDirection:(XXHGradientLayerType)direction FirstColor:(UIColor *)firstColor SecondColor:(UIColor *)secondColor;

@end




- (void)addGradientLayerDirection:(XXHGradientLayerType)direction FirstColor:(UIColor *)firstColor SecondColor:(UIColor *)secondColor {
    [self.superview layoutIfNeeded];
    CAGradientLayer *layer = [CAGradientLayer layer];
    layer.frame = CGRectMake(0, 0, self.size.width, self.size.height);
    [self.layer addSublayer:layer];
    layer.colors = @[(__bridge id)firstColor.CGColor,
                     (__bridge id)secondColor.CGColor];
    layer.locations = @[@0,@1];
    switch (direction) {
        case XXHGradientLayerTypeVertical: {
            layer.startPoint = CGPointMake(0, 0);
            layer.endPoint = CGPointMake(0, 1);
        }
            break;
        case XXHGradientLayerTypeHorizontal: {
            layer.startPoint = CGPointMake(0, 0);
            layer.endPoint = CGPointMake(1, 0);
        }
        default:
            break;
    }
    [self.layer insertSublayer:layer atIndex:0];
}

到此結(jié)束。如有錯誤之處歡迎指正肾筐，共同進步综膀，謝謝！