現在app都做的越來越炫酷,各種動畫效果,各種特效很好的提高了用戶的體驗。很多app在登錄界面都使用了動畫效果,比如Uber,Keep,QQ等等。這些動畫效果基本都是使用gif或者MP4來實現的。
效果圖:
這里提供3種方式實現登錄界面動畫,有需要的同學可以參考一下
1.video篇,使用avplayer加載video來實現效果
實現步驟基本上是初始化播放器,然后加載video,有幾個注意點:1.導入頭文件#import <AVFoundation/AVFoundation.h> 2.app進入后台后,video播放就停止了,這里采用通知的方式在app從后台進入前台時通知控制開啟播放video 代碼如下:
- (void)setupForAVplayerView
{
AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];
playerLayer.frame = self.view.bounds;
[self.view.layer addSublayer:playerLayer];
}
/**
* 初始化播放器
*/
- (AVPlayer *)player
{
if (!_player) {
AVPlayerItem *playerItem = [self getPlayItem];
_player = [AVPlayer playerWithPlayerItem:playerItem];
//設置重復播放
_player.actionAtItemEnd = AVPlayerActionAtItemEndNone; // set this
//視頻播放完發通知
[[NSNotificationCenter defaultCenter]addObserver:self
selector:@selector(__playerItemDidPlayToEndTimeNotification:)
name:AVPlayerItemDidPlayToEndTimeNotification
object:nil];
}
return _player;
}
- (AVPlayerItem *)getPlayItem
{
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"BridgeLoop-640p" ofType:@"mp4"];
NSURL *url = [NSURL fileURLWithPath:filePath];
AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:url];
return playerItem;
}
- (void)__playerItemDidPlayToEndTimeNotification:(NSNotification *)sender
{
[_player seekToTime:kCMTimeZero]; // 設置從頭繼續播放
}
//視頻進入后台到前台視頻暫停的處理方法
appDelegate.m中
- (void)applicationDidBecomeActive:(UIApplication *)application {
[[NSNotificationCenter defaultCenter]postNotificationName:@"appBecomeActive" object:nil];
}
viewController.m
- (void)viewWillAppear:(BOOL)animated
{
//視頻播放
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(playVideos) name:@"appBecomeActive" object:nil];
}
2.gif篇 利用webView加載gif的方法來實現gif的播放
需要注意的是html中加載的gif路徑不要搞錯了,要不然gif無法加載出來 代碼如下:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>loadgif</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.loadGif {
width: 100%;
height: 100%;
/*設置背景*/
background: url(loadgif.gif) no-repeat center center;
/*讓背景全屏*/
background-size: cover;
/*讓div全屏*/
position:absolute;
}
</style>
</head>
<body>
<div class="loadGif"> </div>
</body>
</html>
oc中
-(void)setupWebView{
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"loadGif.html" ofType:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]];
[webView loadRequest:request];
webView.userInteractionEnabled = NO;
}
3.gif篇 這里仍然使用gif,如果你覺得使用html過於麻煩,自己對html又不是很熟悉,這里提供另外一種加載gif的方法,使用YYImge加載gif
需要注意的是YYImge需要添加一個靜態庫 libz.tbd 依賴 代碼如下:
-(void)setupYYImageView{
NSString *path = [[NSBundle mainBundle] pathForResource:@"loadgif.gif" ofType:nil];
YYImage *image = [YYImage imageWithContentsOfFile:path];
YYAnimatedImageView *imgView = [[YYAnimatedImageView alloc] initWithFrame:self.view.bounds];
imgView.contentMode = UIViewContentModeScaleAspectFill;
imgView.image = image;
[self.view addSubview:imgView];
}
demo下載地址 :https://github.com/qqcc1388/LoginWithVideoDemo
轉載請標注來源https://www.cnblogs.com/qqcc1388/p/7156384.html