iOS之iPhone解锁界面的"滑动来解锁"闪烁动画效果,好奇的赶紧进来取走,别看了,说的就是你0.0

各位亲爱的朋友们,你们每天解锁iPhone,看到底部“滑动来解锁”这个效果,难道不好奇么???那么好学的博主,今天在github上看到个库,facebook搞的,非常简单

的API就能完成你们看到的效果,这么酷炫掉渣天的效果,写出来拿给别人装装B那是再

好不过了

不BB了,先给你们facebook的库  传送门:点击打开链接

排排坐哈,看电影啦

 

老规矩,看图说话:

我去,这配图,我自己都觉得好看,我给满分,觉得好看的各位希望能给我顶一下

开始介绍

博主也是第一次尝试写这个东西,先来个Label玩玩

首先,导入库

platform:ios,‘7.0‘

target
‘FaceBookShimmer‘ do

pod
‘Shimmer‘

end

然后就开始撸代码

先展示上图中的三个Label  代码从上直下也是这个顺序

self.imageView = [[UIImageView alloc] init];
    self.imageView.frame = self.view.bounds;
    self.imageView.image = [UIImage imageNamed:@"Greg-Rakozy-1400x725.jpg"];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:self.imageView];

//    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
//    effectView.frame = self.view.bounds;
//    [self.imageView addSubview:effectView];

    self.shimmeringView = [[FBShimmeringView alloc] initWithFrame:CGRectMake(0, 300, 375, 120)];
    self.shimmeringView.shimmering = YES;
    self.shimmeringView.shimmeringOpacity = 0.2;
    self.shimmeringView.shimmeringBeginFadeDuration = 0.5;
    self.shimmeringView.shimmeringSpeed = 200;
    self.shimmeringView.shimmeringAnimationOpacity = 1.0;
    [self.view addSubview:self.shimmeringView];

    self.shimmerLabel = [[UILabel alloc] initWithFrame:self.shimmeringView.bounds];
    self.shimmerLabel.text = @"JUST LIKE A DOG";
    self.shimmerLabel.textColor = [UIColor whiteColor];
    self.shimmerLabel.textAlignment = NSTextAlignmentCenter;
    self.shimmerLabel.font = [UIFont fontWithName:@"HelveticaNeue-UltraLight" size:40.0];
    self.shimmerLabel.backgroundColor = [UIColor clearColor];
    self.shimmeringView.contentView = self.shimmerLabel;

    self.shimmeringView2 = [[FBShimmeringView alloc] initWithFrame:CGRectMake(0, 100, 375, 120)];
    self.shimmeringView2.shimmering = YES;
    self.shimmeringView2.shimmeringOpacity = 0;
    self.shimmeringView2.shimmeringBeginFadeDuration = 0.3;
    self.shimmeringView2.shimmeringEndFadeDuration = 2;
    self.shimmeringView2.shimmeringAnimationOpacity = 0.6;
    [self.view addSubview:self.shimmeringView2];

    self.shimmerLabel2 = [[UILabel alloc] initWithFrame:self.shimmeringView2.bounds];
    self.shimmerLabel2.text = @"落霞与孤鹜齐飞";
    self.shimmerLabel2.textColor = [UIColor redColor];
    self.shimmerLabel2.textAlignment = NSTextAlignmentCenter;
    self.shimmerLabel2.font = [UIFont boldSystemFontOfSize:40];
    self.shimmerLabel2.backgroundColor = [UIColor clearColor];
    self.shimmeringView2.contentView = self.shimmerLabel2;

    self.shimmeringView3 = [[FBShimmeringView alloc] initWithFrame:CGRectMake(0, 200, 375, 120)];
    self.shimmeringView3.shimmering = YES;
    self.shimmeringView3.shimmeringOpacity = 0;
    self.shimmeringView3.shimmeringDirection = FBShimmerDirectionLeft;
    self.shimmeringView3.shimmeringBeginFadeDuration = 0.3;
    self.shimmeringView3.shimmeringSpeed = 150;
    [self.view addSubview:self.shimmeringView3];

    self.shimmerLabel3 = [[UILabel alloc] initWithFrame:self.shimmeringView2.bounds];
    self.shimmerLabel3.text = @"秋水共长天一色";
    self.shimmerLabel3.textColor = [UIColor colorWithRed:255/255.0 green:194/255.0 blue:1/255.0 alpha:1];
    self.shimmerLabel3.textAlignment = NSTextAlignmentCenter;
    self.shimmerLabel3.font = [UIFont boldSystemFontOfSize:40];
    self.shimmerLabel3.backgroundColor = [UIColor clearColor];
    self.shimmeringView3.contentView = self.shimmerLabel3;

给大家加了所有字段的中文解释,自己测试出来的,有错误的请告知我

//! @abstract Set this to YES to start shimming and NO to stop. Defaults to NO.
    // 是否闪烁
    //@property (nonatomic, assign, readwrite, getter = isShimmering) BOOL shimmering;

    //! @abstract The time interval between shimmerings in seconds. Defaults to 0.4.
    // 两次闪烁之间的间隔
    //@property (assign, nonatomic, readwrite) CFTimeInterval shimmeringPauseDuration;

    //! @abstract The opacity of the content while it is shimmering. Defaults to 1.0.
    // 闪烁时动画的透明度 1.0就是原始亮度   0-1之间随意选择
    //@property (assign, nonatomic, readwrite) CGFloat shimmeringAnimationOpacity;

    //! @abstract The opacity of the content before it is shimmering. Defaults to 0.5.
    // 闪烁前的透明度,例如默认0.5,那么和上面那个参数对比下,就是0.5-1之间闪烁
    //@property (assign, nonatomic, readwrite) CGFloat shimmeringOpacity;

    //! @abstract The speed of shimmering, in points per second. Defaults to 230.
    // 闪烁的速度
    //@property (assign, nonatomic, readwrite) CGFloat shimmeringSpeed;

    //! @abstract The highlight length of shimmering. Range of [0,1], defaults to 0.33.
    // 闪烁过去的时候那条线的宽度 0 - 1之间的浮点数切换
    //@property (assign, nonatomic, readwrite) CGFloat shimmeringHighlightLength;

    //! @abstract @deprecated Same as "shimmeringHighlightLength", just for downward compatibility
    // 和上面类似
    //@property (assign, nonatomic, readwrite, getter = shimmeringHighlightLength, setter = setShimmeringHighlightLength:) CGFloat shimmeringHighlightWidth;

    //! @abstract The direction of shimmering animation. Defaults to FBShimmerDirectionRight.
    // 闪烁的方向,这个枚举有上下左右四个方向
    //@property (assign, nonatomic, readwrite) FBShimmerDirection shimmeringDirection;

    //! @abstract The duration of the fade used when shimmer begins. Defaults to 0.1.
    // 开始闪烁的时间间隔
    //@property (assign, nonatomic, readwrite) CFTimeInterval shimmeringBeginFadeDuration;

    //! @abstract The duration of the fade used when shimmer ends. Defaults to 0.3.
    // 结束闪烁的时间间隔
    //@property (assign, nonatomic, readwrite) CFTimeInterval shimmeringEndFadeDuration;

    /**
     @abstract The absolute CoreAnimation media time when the shimmer will fade in.
     @discussion Only valid after setting {@ref shimmering} to NO.
     */
    // 闪烁到shimmeringAnimationOpacity的时候fade需要多久
    //@property (assign, nonatomic, readonly) CFTimeInterval shimmeringFadeTime;

各自属性的默认值是这样的,需要的请自行修改即可

- (instancetype)init
{
  self = [super init];
  if (nil != self) {
    // default configuration
    _shimmeringPauseDuration = 0.4;
    _shimmeringSpeed = 230.0;
    _shimmeringHighlightLength = 1.0;
    _shimmeringAnimationOpacity = 0.5;
    _shimmeringOpacity = 1.0;
    _shimmeringDirection = FBShimmerDirectionRight;
    _shimmeringBeginFadeDuration = 0.1;
    _shimmeringEndFadeDuration = 0.3;
  }
  return self;
}

就这么简单,设置自己喜欢的属性就好了,跑起来看看,效果已经给大家配好了,也可以自行尝试,肯定很酷炫

看到这里,大家有没有发现可以在项目中用到哪里呢?我是觉得可以用到这里,给头像加

一层闪烁,把_shimmingPauseDuration的默认值改为20秒或者各位随意

有想法就试试呗,代码如下

// 给图片加一个shimming
    // 初始化
    self.shimmeringView4 = [[FBShimmeringView alloc] initWithFrame:CGRectMake(140, 400, 80, 80)];
    // 是否闪烁
    self.shimmeringView4.shimmering = YES;
    // 闪烁之前的透明度
    self.shimmeringView4.shimmeringOpacity = 1;
    // 从哪个方向闪烁
    self.shimmeringView4.shimmeringDirection = FBShimmerDirectionLeft;
    // 开始闪烁的时间
    self.shimmeringView4.shimmeringBeginFadeDuration = 0.3;
    // 一次周期的时间间隔
    self.shimmeringView4.shimmeringPauseDuration = 3;
    // 0-1之间,闪烁的线条间隔  由于给图片加,那么就要粗一点,好看点
    self.shimmeringView4.shimmeringHighlightWidth = 0.9;
    // 闪烁速度
    self.shimmeringView4.shimmeringSpeed = 150;
    self.shimmeringView4.layer.cornerRadius = 40;
    self.shimmeringView4.clipsToBounds = YES;
    self.shimmeringView4.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.shimmeringView4];

    self.headImageView = [[UIImageView alloc] initWithFrame:self.shimmeringView4.bounds];
    self.headImageView.image = [UIImage imageNamed:@"photo-1433878455169-4698e60005b1-1400x933.jpeg"];
    self.headImageView.contentMode = UIViewContentModeScaleToFill;
    self.headImageView.layer.cornerRadius = 40;
    self.headImageView.clipsToBounds = YES;
    // 用imageView加载到shimmering里面
    self.shimmeringView4.contentView = self.headImageView;

注意:

self.shimmeringView4.backgroundColor = [UIColor
whiteColor];改方法默认是灰色的,这个闪烁的浮层就是灰色的,颜

色可以自己更改成喜欢的颜色,一般白色就很酷炫了

self.shimmeringView4.shimmeringHighlightWidth =
0.9; 0-1之间,闪烁的线条间隔  由于给图片加,那么就要粗一点,

篇幅大一点大气点

正如官方所说

Shimmer is an easy way to add a shimmering effect to any view in your app. It‘s useful as an unobtrusive loading indicator.

Shimmer was originally developed to show loading status in Paper.

对了,突然想到一点,可以用来做预加载指示器啊,各位可以尝试下,这里就不介绍了

就是这么的简单到没朋友啊   有需要的可以下载下来看看

Demo地址:https://github.com/DeftMKJ/FACEBOOKShimming

OVER ~~~~~~

时间: 2024-10-28 15:00:04

iOS之iPhone解锁界面的"滑动来解锁"闪烁动画效果,好奇的赶紧进来取走,别看了,说的就是你0.0的相关文章

【转】修改Android解锁界面

背景      先说说背景吧,这是本人从WinCE系统转到Android之后,接到的第一个任务就是修改Android原生的解锁界面,之前看了两个星期的书和网络博客,Java的也有.Android应用开发的也有.Linux开发的也有.Android框架介绍的也有.然后写了几个APK试了了一下,觉得自己有能力了,便充满自信地找到组长接任务.组长没有说什么,拿出一个竞争对手公司的样机,玩了几下拿个我,说道:这是竞争对手公司的方案,他们的解锁效果不错,很方便,你看看能不能也做出来.   说实话接到这个任

iOS开发之主界面的左右滑动

前言:可能很多iOS开发者在学习之初都会对QQ的主界面的左滑与右滑动感到好奇,今天开始写我人生中的第一篇博客,即:iOS开发之Slide(主界面侧滑侧边栏). 正文: 首先,新建类(HomeViewController:命名随自己)继承ViewController. 然后我们需要声明这些属性: //滑动速度系数-建议在0.5-1之间.默认为0.5 @property (nonatomic, assign) CGFloat speedf; //左侧窗控制器 @property (nonatomic

iOS之iPhone手机通讯录和短信搜索界面的实现以及UISearchController和UISearchDisplayController的浅析

本来觉得这个模块也就是一个SearchBar就搞定了,但是现在的产品经理也是够了,一会儿一个想法,之前的搜索 都已经写完了,类似主流的电商,好像也没那么麻烦,但是改版了总得弄点什么吧.嘿,哥们,我现在要iphone手机 通讯录里面搜索的样式,你搞定哦......,要一毛一样哦.作为一个文化人,我只能在内心深处生 出表达出,苦逼的我们顶多发发牢骚,要改就改喽. 请看图先 这是他要的效果demo 下面是我写的demo 看到这效果,应该都能想到用UISearchController,但是这货是iOS8

26款能够吸引用户的 iPhone App 界面设计

在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 45套新鲜出炉的精美 PSD 网页设计素材 分享15套免费的扁平化界面设计素材下载 设计前沿:30款超级精美的iOS图标欣赏 40款 iPhone 和 iPad 应用程序图标设计 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来

转////iOS 8 Auto Layout界面自动布局系列1-自动布局的基本原理

iOS 8 Auto Layout界面自动布局系列1-自动布局的基本原理 http://blog.csdn.net/pucker/article/details/41832939 标签: iosinterface苹果布局界面 2014-12-10 00:25 11286人阅读 评论(2) 收藏 举报  分类: iOS开发(19)  版权声明:本文为博主原创文章,未经博主允许不得转载. 苹果今年如约放出了新的iPhone 6与iOS 8系统,SDK针对新的设备和系统的界面适配也进行了若干改进,因此

ios开发系列-界面

本章我们通过设计一个简单的登录界面来讲解一下在ios中如何设计界面.打开上章创建的项目后,首先我们要导入几个需要使用的图片.导入方式其实很简单.选中assets.xcassets.然后将使用的图片拖入即可.这里说明一下的是图片的名称最好带个页面前缀什么的,因为虽然可以在assets.xcassets中虽然可以创建文件夹,但最终读取图片的时候是没有路径的,也就是说如果你在不同文件夹下有同名的图片文件的话会出问题.说到图片文件.这里推荐一个找图片资源的网站http://www.easyicon.ne

IOS开发/iphone开发多线程

有时候可能有很多功能要同时实现,例如每隔多长时间就会检测程序网络连接,又或者有时候需要从服务器下载一个不小的文件,如果用单线程几乎是不可想的事情,程序将会卡的无法使用,用到多线程和不用多线程,给用户的体验天壤之别,所以多线程是一个ios开发人员必须学会的一个知识点. 多线程,听得有点高深,其实很简单.在iphone中,多线程可以这么理解,除主线程外还有其他线程,主线程和其他线程的区别是最重要的,最简单的理解方法就是主线程会改变界面,其他线程不会改变,主线程可以调用其他线程, 1.声明一个线程又两

IOS简单的登陆界面

主要需要注意的几个问题: 1.导入图片方式最好用文件导入 代码: 在ViewController.m文件中 2.UILable常用属性 @property(nonatomic,copy)   NSString           *text; //设置文本内容 @property(nonatomic,retain) UIFont             *font; //设置字体 @property(nonatomic,retain) UIColor            *textColor;

实现:编辑短信,按power键锁屏后,再点亮屏幕,进入的还是编辑短信界面,按返回键才会进入解锁界面。

描述:在编辑短信界面按电源键锁屏后,重新按电源键点亮屏幕,并没有进入到锁屏界面而是在编辑短信界面,此时短信界面悬浮与锁屏界面之上,这时按返回键关闭编辑短信界面,回到锁屏界面,是如何实现的呢,只需要在需要实现该功能的界面(Activity)中的onCreate()方法中setContentView()方法之前添加以下代码: // set this flag so this activity will stay in front of the keyguard int flags = WindowM