山寨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:.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(, );
gradientLayer.endPoint = CGPointMake(, ); // 创建并接管mask
self.mask = [[UIView alloc] initWithFrame:frame]; // mask获取渐变layer
[self.mask.layer addSublayer:gradientLayer]; CGRect newFrame = self.mask.frame;
newFrame.origin.x -= ;
self.mask.frame = newFrame; self.maskView = self.mask;
} - (void)fadeRight { [UIView animateWithDuration:.f animations:^{
CGRect frame = self.mask.frame;
frame.origin.x += (frame.size.width + ); 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(, , , )];
self.label.font = [UIFont fontWithName:@"AvenirNext-ULtraLight" size:.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(, , , )];
self.fadeString.text = @"YouXianMing";
self.fadeString.center = self.view.center;
[self.view addSubview:self.fadeString]; [self performSelector:@selector(run)
withObject:nil
afterDelay:.f];
} - (void)run {
// 执行动画效果
[self.fadeString fadeRight];
} @end

关键的设置

山寨Facebook的Shimmer效果的更多相关文章

  1. Facebook 开源微光效果 Shimmer

    我的引言 晚上好,我是吴小龙同学,我的公众号「一分钟 GitHub」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. 今天要推荐的是 Facebook 开源的闪光效果:Shimmer, ...

  2. <转>如何在iOS 7中设置barTintColor实现类似网易和 Facebook 的 navigationBar 效果

    转自:i‘m Allen的博客 先给代码:https://github.com/allenhsu/CRNavigationController 1. 问题的表现 相信很多人在 iOS 7 的适配过程中 ...

  3. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  4. FaceBook微光闪烁---第三方开源--shimmer-android

    Android上的微光闪烁shimmer效果,实现的手段不少,其中比较好的是facebook做的开源库:shimmer-android,其在github上的项目主页是:https://github.c ...

  5. iOS歌词逐渐变色动画

    实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色.效果如图:   因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google, 最终是找到了这篇 ...

  6. github优秀开源项目大全-iOS

    github优秀开源项目大全-iOS APR 25TH, 2014 前言 本文旨在搜集github上优秀的开源项目 本文搜集的项目都是用于iOS开发 本文会持续更新… 完整客户端 ioctocat g ...

  7. IOS-github优秀开源项目大全

    github优秀开源项目大全-iOS 前言 本文旨在搜集github上优秀的开源项目 本文搜集的项目都是用于iOS开发 本文会持续更新… 完整客户端 ioctocat github的iOS客户端,目前 ...

  8. 用jQuery Mobile做HTML5移动应用的三个优缺点

    JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...

  9. 2014优秀的好用的20款免费jQuery插件推荐

    2013 年最好的 20 款免费 jQuery 插件,世界买家网 www.buyerinfo.biz在这里分享给大家 这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现 今互联网市场上提 ...

随机推荐

  1. Impala 使用的端口

    下表中列出了 Impala 是用的 TCP 端口.在部署 Impala 之前,请确保每个系统上这些端口都是打开的. 组件 服务 端口 访问需求 备注 Impala Daemon Impala 守护进程 ...

  2. ThreadPool线程池的关注点

    public class TestThreadPool { //线程池维护线程的最少数量 private static final int COREPOOLSIZE = 2; //线程池维护线程的最大 ...

  3. Ceph 存储集群 - 搭建存储集群

    目录 一.准备机器 二.ceph节点安装 三.搭建集群 四.扩展集群(扩容)   一.准备机器 本文描述如何在 CentOS 7 下搭建 Ceph 存储集群(STORAGE CLUSTER). 一共4 ...

  4. Node.js http服务器搭建和发送http的get、post请求

    1.Node.js 搭建http服务器 1.1创建server.js var http = require('http'); var querystring = require('querystrin ...

  5. linux中echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 echo命令的功能是在显示器上显示一段文字,一般起到一个提示 ...

  6. 使用CSS进行定位

    CSS中通过使用position属性,有4种不同类型的定位方式,这会影响元素框生成的方式. position属性值的含义: static:静态定位 元素框正常生成.块级元素生成一个矩形框,作为文档流的 ...

  7. Facebook回应追踪无账号用户:源于网站插件漏洞

    近日,比利时隐私独立委员一项调查披露Facebook跟踪收集大量网站用户的上网足迹,同时触及那些没有注册Facebook账号的访客. 对此,Facebook公司回应这些恶劣跟踪行为在于社交媒体在安装插 ...

  8. 悟空模式-java-普通工厂模式

    [大圣看玩多时,问土地道:“此树有多少株数?”土地道:“有三千六百株.前面一千二百株,花微果小,三千年一熟,人吃了成仙了道,体健身轻.中间一千二百株,层花甘实,六千年一熟,人吃了霞举飞升,长生不老.后 ...

  9. Spring boot 入门四:spring boot 整合mybatis 实现CRUD操作

    开发环境延续上一节的开发环境这里不再做介绍 添加mybatis依赖 <dependency> <groupId>org.mybatis.spring.boot</grou ...

  10. cookie函数封装

    var cookieUtil = { setCookie :function (cname, cvalue, exdays) { var exdate = new Date(); exdate.set ...