将CAGradientLayer用作maskView的遮罩图层

将CAGradientLayer用作maskView的遮罩图层

说明

CAGradientLayer可以用作alpha遮罩，供maskView使用，这两种东西都是非常偏门的东西，但是，偏门不代表功能不强大，我们可以用CAGradientLayer制作出非常牛逼的动画效果，此博文，本人抛砖引玉简易介绍怎么将CAGradientLayer与maskView联系上。后续博文会陆续扩展并写出更好的控件。

只有完美的UI交互效果才能够为功能强大的app锦上添花，本人致力于研究分析苹果开发中那些巨牛逼但却无人问津的冷门特效。

效果图

源码

//
//  CAGradientView.h
//  AlphaView
//
//  Created by YouXianMing on 15/5/4.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface CAGradientView : UIView

@property (nonatomic, strong) NSArray *colors;
@property (nonatomic, strong) NSArray *locations;
@property (nonatomic)         CGPoint  startPoint;
@property (nonatomic)         CGPoint  endPoint;

- (void)alphaType;

@end

//
//  CAGradientView.m
//  AlphaView
//
//  Created by YouXianMing on 15/5/4.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "CAGradientView.h"

@interface CAGradientView () {
    CAGradientLayer   *_gradientLayer;
}

@end

@implementation CAGradientView

/**
 *  修改当前view的backupLayer为CAGradientLayer
 *
 *  @return CAGradientLayer类名字
 */
+ (Class)layerClass {
    return [CAGradientLayer class];
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _gradientLayer = (CAGradientLayer *)self.layer;
    }
    return self;
}

- (void)alphaType {
    self.colors     = @[[UIColor clearColor], [UIColor blackColor], [UIColor clearColor]];
    self.locations  = @[@(0.25), @(0.5), @(0.75)];
    self.startPoint = CGPointMake(0, 0);
    self.endPoint   = CGPointMake(1, 0);
}

/**
 *  重写setter,getter方法
 */
@synthesize colors = _colors;
- (void)setColors:(NSArray *)colors {
    _colors = colors;
    
    // 将color转换成CGColor
    NSMutableArray *cgColors = [NSMutableArray array];
    for (UIColor *tmp in colors) {
        id cgColor = (__bridge id)tmp.CGColor;
        [cgColors addObject:cgColor];
    }
    
    // 设置Colors
    _gradientLayer.colors = cgColors;
}
- (NSArray *)colors {
    return _colors;
}

@synthesize locations = _locations;
- (void)setLocations:(NSArray *)locations {
    _locations               = locations;
    _gradientLayer.locations = _locations;
}
- (NSArray *)locations {
    return _locations;
}

@synthesize startPoint = _startPoint;
- (void)setStartPoint:(CGPoint)startPoint {
    _startPoint               = startPoint;
    _gradientLayer.startPoint = startPoint;
}
- (CGPoint)startPoint {
    return _startPoint;
}

@synthesize endPoint = _endPoint;
- (void)setEndPoint:(CGPoint)endPoint {
    _endPoint               = endPoint;
    _gradientLayer.endPoint = endPoint;
}
- (CGPoint)endPoint {
    return _endPoint;
}
@end

//
//  ViewController.m
//  AlphaView
//
//  Created by YouXianMing on 15/5/4.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "CAGradientView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 加了mask的view
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 40, 200, 200)];
    imageView.image        = [UIImage imageNamed:@"base"];
    [self.view addSubview:imageView];
    
    CAGradientView *gradientView = [[CAGradientView alloc] initWithFrame:imageView.bounds];
    [gradientView alphaType];
    imageView.maskView = gradientView;
    
    
    // 对照组
    UIImageView *baseImageView = [[UIImageView alloc] initWithFrame:CGRectMake(40, 40 + 200 + 40, 200, 200)];
    baseImageView.image        = [UIImage imageNamed:@"base"];
    [self.view addSubview:baseImageView];
}

@end

简易分析