山寨Facebook的Shimmer效果

山寨Facebook的Shimmer效果

 

說明

主要是用到了CAGradientLayer的特性來實現特效效果,由於時間有限,並無進行封裝,待後續改進.

 

效果

 

源碼(源碼沒有進行封裝,細節都沒有處理,望見諒)

//
//  FadeString.h
//  FadeWords
//
//  Created by YouXianMing on 15/5/7.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface FadeString : UIView

/**
 *  輸入文本
 */
@property (nonatomic, strong) NSString *text;


/**
 *  向右漸變消失
 */
- (void)fadeRight;

@end

//
//  FadeString.m
//  FadeWords
//
//  Created by YouXianMing on 15/5/7.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "FadeString.h"

@interface FadeString ()

@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) UILabel *backLabel;
@property (nonatomic, strong) UIView  *mask;  // 做爲遮罩的mask

@end

@implementation FadeString


- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        
        // 建立出label
        [self createLabel:self.bounds];
        
        // 建立出mask
        [self createMask:self.bounds];
        
    }
    return self;
}

- (void)createLabel:(CGRect)frame {
    self.label               = [[UILabel alloc] initWithFrame:frame];
    self.label.font          = [UIFont fontWithName:@"AvenirNext-ULtraLight" size:45.f];
    self.label.textAlignment = NSTextAlignmentCenter;
    self.label.textColor     = [[UIColor cyanColor] colorWithAlphaComponent:0.5f];
    
    [self addSubview:self.label];
}

- (void)createMask:(CGRect)frame {
    
    // 建立出漸變的layer
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame            = frame;
    gradientLayer.colors           = @[(__bridge id)[UIColor clearColor].CGColor,
                                       (__bridge id)[UIColor blackColor].CGColor,
                                       (__bridge id)[UIColor blackColor].CGColor,
                                       (__bridge id)[UIColor clearColor].CGColor];
    gradientLayer.locations        = @[@(0.01), @(0.2), @(0.4), @(0.59)];
    gradientLayer.startPoint       = CGPointMake(0, 0);
    gradientLayer.endPoint         = CGPointMake(1, 0);
    
    // 建立並接管mask
    self.mask     = [[UIView alloc] initWithFrame:frame];
    
    // mask獲取漸變layer
    [self.mask.layer addSublayer:gradientLayer];
    
    CGRect newFrame    = self.mask.frame;
    newFrame.origin.x -= 200;
    self.mask.frame    = newFrame;
    
    self.maskView = self.mask;
}

- (void)fadeRight {
    
    [UIView animateWithDuration:5.f animations:^{
        CGRect frame    = self.mask.frame;
        frame.origin.x += (frame.size.width + 400);
        
        self.mask.frame = frame;
    }];
    
}

/**
 *  重寫setter,getter方法
 */
@synthesize text = _text;
- (void)setText:(NSString *)text {
    _text           = text;
    self.label.text = text;
}
- (NSString *)text {
    return _text;
}

@end

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

#import "ViewController.h"
#import "FadeString.h"

@interface ViewController ()

@property (nonatomic, strong) UILabel    *label;
@property (nonatomic, strong) FadeString *fadeString;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor blackColor];
    
    
    self.label               = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 70)];
    self.label.font          = [UIFont fontWithName:@"AvenirNext-ULtraLight" size:45.f];
    self.label.center        = self.view.center;
    self.label.textAlignment = NSTextAlignmentCenter;
    self.label.textColor     = [UIColor grayColor];
    self.label.text          = @"YouXianMing";
    [self.view addSubview:self.label];

    
    
    // 建立FadeString
    self.fadeString             = [[FadeString alloc] initWithFrame:CGRectMake(0, 0, 300, 70)];
    self.fadeString.text        = @"YouXianMing";
    self.fadeString.center      = self.view.center;
    [self.view addSubview:self.fadeString];
    
    
    [self performSelector:@selector(run)
               withObject:nil
               afterDelay:4.f];
}

- (void)run {
    // 執行動畫效果
    [self.fadeString fadeRight];
}

@end

 

關鍵的設置