山寨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

关键的设置


目录
相关文章
|
设计模式
Java--设计模式-5-桥接模式
桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。
141 0
Java--设计模式-5-桥接模式
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1230 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1213 87
|
10天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1796 13
|
20天前
|
人工智能 运维 安全
|
3天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
234 127