类似歌词的字体颜色渐变效果

先上图

111.gif

产品有一个这样的需求，在下拉的过程中，@“PUNJECT”这几个字从左到右发生颜色的变化。拿到这个需求先上网找了一下demo，看到了(http://www.jianshu.com/p/93592bdc99c6) 这个文章，很有启发，于是模仿大神的demo实现了一下效果。

这个需求类似于歌词的显示

222.gif

思路

1、底部有一个backgroundLabel，中部有一个clipView，前部有一个foregroundLabel。

333.png

2、中间的clipView决定了前部foregroundLabel显示的多少，代码中设置了_clipView.clipsToBounds = YES; _clipView.backgroundColor = [UIColor clearColor];，如果大家把这两句话分别注释，就会看到非常明显的效果。

设置 _clipView.backgroundColor = [UIColor greenColor]

444.gif

设置 _clipView.clipsToBounds = NO

你会发现字体颜色就是你设置的前景颜色。

这样不难发现，因为 _clipView.clipsToBounds = YES，所以_clipView其余的部分显示不出来，那么只要把foregroundLabel加到_clipView上再设置_clipView.clipsToBounds = YES。最后控制_clipView的宽度，就可以实现这个效果了。

代码

自定义.h文件中

@property (nonatomic , assign)CGFloat clipWidth;//*进度控制视图*/
@property (nonatomic , assign)CGFloat progress;//*进度（0，1）*/

@property (nonatomic , strong)UIColor *foregroundTextColor;//*前景字体颜色*/
@property (nonatomic , strong)UIColor *backgroundTextColor;//*背景字体颜色*/

@property (nonatomic , strong)NSString *text;//*内容*/
@property (nonatomic , strong)UIFont *font;//*大小*/

自定义.m文件中

@property (nonatomic , strong)UILabel *foregroundLabel;//*前景label*/
@property (nonatomic , strong)UILabel *backgroundLabel;//*北京label*/
@property (nonatomic , strong)UIView *clipView;        //*进度view*/

#pragma mark ----------- 不支持此初始化方法 -----------
- (instancetype)init {
    return nil;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        
    }
    return self;
}

#pragma mark ----------- 初始化方法 -----------
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        
        [self addSubview:self.backgroundLabel];
        [self addSubview:self.clipView];
        [self.clipView addSubview:self.foregroundLabel];
        
    }
    return self;
}

#pragma mark ----------- set方法 -----------

- (void)setClipWidth:(CGFloat)clipWidth {
    _clipWidth = clipWidth;
    CGRect rect = self.clipView.frame;
    rect.size.width = _clipWidth;
    self.clipView.frame = rect;
}

- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    CGRect rect = self.clipView.frame;
    rect.size.width = self.frame.size.width * _progress;
    self.clipView.frame = rect;
}

- (void)setForegroundTextColor:(UIColor *)foregroundTextColor {
    _foregroundTextColor = foregroundTextColor;
    self.foregroundLabel.textColor = _foregroundTextColor;
}

- (void)setBackgroundTextColor:(UIColor *)backgroundTextColor {
    _backgroundTextColor = backgroundTextColor;
    self.backgroundLabel.textColor = _backgroundTextColor;
}

- (void)setText:(NSString *)text {
    _text = text;
    self.foregroundLabel.text = _text;
    self.backgroundLabel.text = _text;
}

- (void)setFont:(UIFont *)font {
    _font = font;
    self.foregroundLabel.font = _font;
    self.backgroundLabel.font = _font;
}


#pragma mark ----------- 懒加载 -----------

- (UILabel *)foregroundLabel {
    if (_foregroundLabel == nil) {
        _foregroundLabel = [[UILabel alloc]initWithFrame:self.bounds];
        _foregroundLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _foregroundLabel;
}

- (UILabel *)backgroundLabel {
    if (_backgroundLabel == nil) {
        _backgroundLabel = [[UILabel alloc]initWithFrame:self.bounds];
        _backgroundLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _backgroundLabel;
}

- (UIView *)clipView {
    if (_clipView == nil) {
        _clipView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, self.bounds.size.height)];
        _clipView.backgroundColor = [UIColor clearColor];
        _clipView.clipsToBounds = NO;
    }
    return _clipView;
}

到此这个功能就实现了，现在我们把他加入到tableView中实现App需要的效果。

思路

设置tableView的尾视图，通过UIScrollViewDelegate中的- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法来控制颜色的变化。

.m文件中

//首先要引入头文件
#import "SSYProgressLabel.h"        //**自定义label*/

@property (nonatomic , strong)UITableView *tableView;

@property (nonatomic , strong)SSYProgressLabel *footerLabel;//*footer*/

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self createUI];
    
}

#pragma mark ----------- 创建UI -----------

- (void)createUI {
    [self.view addSubview:self.tableView];
}

#pragma mark ----------- UITableViewDelegate && UITableViewDataSource -----------

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
    }
    
    cell.textLabel.text = @"测试测试";
    
    return cell;
}

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    
    return self.footerLabel;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 135;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
//    NSLog(@"%f",scrollView.contentOffset.y + 64);
    
    if (scrollView.contentOffset.y + 64 > 0) {
        self.footerLabel.clipWidth = (scrollView.contentOffset.y + 64) * 2;
    }
}

#pragma mark ----------- 懒加载 -----------

- (UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight) style:UITableViewStyleGrouped];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.backgroundColor = [UIColor whiteColor];
    }
    return _tableView;
}

- (SSYProgressLabel *)footerLabel {
    if (!_footerLabel) {
        _footerLabel = [[SSYProgressLabel alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, 135)];
        _footerLabel.text = @"P U N J E C T";
        _footerLabel.font = [UIFont systemFontOfSize:58];
        _footerLabel.backgroundTextColor = [UIColor lightGrayColor];
        _footerLabel.foregroundTextColor = [UIColor orangeColor];
    }
    return _footerLabel;
}

最终效果

555.gif

Github链接