仿 Uber 视频背景登录界面以及登录动画

现在有越来越多的 app 的登录/注册界面的背景是播放视频或者 gif,我主要看了 Uber 和 keep 的登录界面再配合拉勾的登录界面仿作了一个登录界面。
1.首先,查资料
我在 github 上找到了这两个库:
-STLBGVideo 这个库是 oc 写的,但你的登录页面需要继承这个 VC,借用了下里面的资源,侵权告知
-VideoSplashKit 国外牛人写的 swift 版本,借鉴了下里面的思路
-附上本文的链接 https://github.com/sfmDev/videoLoginDemo
2.写视频播放器
先导入

@interface ViewController ()
/**
 *  全屏播放器
 */
@property (strong, nonatomic) AVPlayer *player;
@end

创建播放图层,AVPlayer的播放器 是加在 layer 层上的,就是 AVPlayerLayer

- (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;
}
- (void)__playerItemDidPlayToEndTimeNotification:(NSNotification *)sender
{
    [_player seekToTime:kCMTimeZero]; // 设置从头继续播放 
}

设置播放的内容

- (AVPlayerItem *)getPlayItem
{
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"BridgeLoop-640p" ofType:@"mp4"];
    NSURL *url = [NSURL fileURLWithPath:filePath];
    AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:url];
    return playerItem;
}

现在得到这样的一个视频播放,上面的注册 登录是我自己加的

仿 Uber 视频背景登录界面以及登录动画_第1张图片
屏幕快照 2016-02-17 下午11.01.04.png

现在,问题又来了,如果程序从前台切到后台,再从后台切到前台,视频会停止播放

- (void)applicationDidBecomeActive:(UIApplication *)application {
//在app 进入活跃的时候发通知,让视频继续播放
    [[NSNotificationCenter defaultCenter]postNotificationName:@"videoshouldplay" object:nil];
}

这样基本就完成了视频播放的主要设置,还可以设置一些动画,我写的 demo 里的登录时仿照拉勾写的,暂时还没有打到我理想的效果,就先不写了,放在下一篇中再讲登录界面中的动画,觉得有兴趣的同学欢迎 star

你可能感兴趣的:(仿 Uber 视频背景登录界面以及登录动画)