iOS中三種方式實現登錄界面播放視頻或gif效果


現在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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM