仿 Uber 視訊背景登入介面以及登入動畫

weixin_34370347發表於2017-12-13
動畫

現在有越來越多的 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;
}
複製程式碼

現在得到這樣的一個視訊播放,上面的註冊 登入是我自己加的

現在,問題又來了,如果程式從前臺切到後臺,再從後臺切到前臺,視訊會停止播放

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

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

相關文章