现在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 {
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