仿 Uber 視頻背景登錄界面以及登錄動畫

現在有越來越多的 app 的登錄/注冊界面的背景是播放視頻或者 gif,我主要看了 Uber 和 keep 的登錄界面再配合拉勾的登錄界面仿作了一個登錄界面。
1.首先,查資料
我在 github 上找到了這兩個庫:
-STLBGVideo 這個庫是 oc 寫的,但你的登錄頁面需要繼承這個 VC,借用了下里面的資源,侵權告知
-VideoSplashKit 國外牛人寫的 swift 版本,借鑒了下里面的思路
-附上本文的鏈接 https://github.com/sfmDev/videoLoginDemo
2.寫視頻播放器
先導入 <AVFoundation/AVFoundation.h>

@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;
}

現在得到這樣的一個視頻播放,上面的注冊 登錄是我自己加的

屏幕快照 2016-02-17 下午11.01.04.png

現在,問題又來了,如果程序從前臺切到后臺,再從后臺切到前臺,視頻會停止播放

- (void)applicationDidBecomeActive:(UIApplication *)application {
//在app 進入活躍的時候發通知,讓視頻繼續播放
    [[NSNotificationCenter defaultCenter]postNotificationName:@"videoshouldplay" object:nil];
}

這樣基本就完成了視頻播放的主要設置,還可以設置一些動畫,我寫的 demo 里的登錄時仿照拉勾寫的,暫時還沒有打到我理想的效果,就先不寫了,放在下一篇中再講登錄界面中的動畫,覺得有興趣的同學歡迎 star

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容