iOS之iPhone解鎖界面的滑動來解鎖閃爍動畫效果
編輯：IOS開發綜合
各位親愛的朋友們，你們每天解鎖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 inPaper.
對了，突然想到一點，可以用來做預加載指示器啊，各位可以嘗試下，這裡就不介紹了
Demo地址：https://github.com/DeftMKJ/FACEBOOKShimming
OVER ~~~~~~
相關文章
+