iOS<咸魚APP>新特性界面-視頻動畫

前言

昨天晚上一個簡友簡信我,問我咸魚最新版的新特性動畫有沒有什么思路. 原諒 我都沒怎么用過咸魚, 再加上已經(jīng)四點多了,就跟他胡謅了一下思路.
今天廣州一如既往的是大雨傾盆, 想起昨晚的事, 就下載了一下咸魚的最新版, 看了一下新特性, 感覺還是蠻炫酷的. 腦中想了幾組動畫, 準備自己寫一下, 隨后拿到了咸魚的所有資源, 然后我就發(fā)現(xiàn), 我想多了, 他們的做法更方便...

效果圖

咸魚新特性

github下載地址

OC版和swift版都在這一個地址:

如果對你有些許幫助, 請star, 有什么疑問記得給我留言

<a > github下載地址</a>

友情鏈接

Swift版 iOS高仿完整版唯美植物系項目<花田小憩>實戰(zhàn), 點擊進行跳轉(zhuǎn)

<a >github地址</a>
<a href="http://m.itdecent.cn/p/2893be49c50e">Blog地址</a>

思路

最初拿到咸魚的所有資源的時候, 我是拒絕的, 因為我第一眼看到的就是4個新特性視頻文件, 雖然有想到過可能是和UBer一樣用的是視頻, 但是證實了之后, 還是有點小吃驚. 此處, 大神毋鄙視...
隨后翻了一下咸魚的所有圖片資源, 隨帶找出了視頻的封面圖片...

① 整體的新特性模塊, 我的做法是一個UICollectionViewController + UIPageControl, 這個應該是毋庸置疑的了...

② 重點在于UICollectionViewCell. 播放本地視頻, 我使用的是MediaPlayer框架里面的MPMoviePlayerController. 步驟: 先建一個MPMoviePlayerController的對象``, 然后把它的view添加到UICollectionViewCellcontentView上. 然后再先建一個封面圖片UIImageView, 添加到MPMoviePlayerControllerview上.

③ 我們需要在UICollectionViewCell監(jiān)聽MPMoviePlayerLoadStateDidChangeNotificationMPMoviePlayerPlaybackDidFinishNotification.

MPMoviePlayerLoadStateDidChangeNotification監(jiān)聽方法中, 當MPMoviePlayerControllerloadState等于PlaythroughOK的時候,我們需要將封面圖片的hidden設置成true.
tip:此處不能直接removeFromSuperview, 不然會有閃爍的效果.
剛好也利用了UICollectionViewCell的重用特性, 因為我們加載過一次視頻后, 就不再需要用封面圖片了.

MPMoviePlayerPlaybackDidFinishNotification的監(jiān)聽方法中, 判斷當前的UICollectionViewCell是否被選擇了, 如果用戶點擊(選中)了當前的cell且當前cell是最后一個cell, 我們才會進行跳轉(zhuǎn)

  private lazy var moviePlayer : MPMoviePlayerController = {
        let player = MPMoviePlayerController()
        player.view.frame = self.contentView.bounds
        // 設置自動播放
        player.shouldAutoplay = true
        // 設置源類型
        player.movieSourceType = .File
        // 取消下面的控制視圖: 快進/暫停等...
        player.controlStyle = .None
        
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(NewFeatureCell.loadStatus), name: MPMoviePlayerLoadStateDidChangeNotification, object: nil)
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(NewFeatureCell.playFinished), name: MPMoviePlayerPlaybackDidFinishNotification, object: nil)
        return player
 
    }()
    
    // MARK: - private method
    
    func loadStatus()
    {
        // 將要自動播放
        if moviePlayer.loadState == .PlaythroughOK {
            imageView.hidden = true
            moviePlayer.play()
        }
    }
    
    func playFinished()
    {
        NSNotificationCenter.defaultCenter().postNotificationName(PlayFinishedNotify, object: nil)
    }

用法

我對這個小Demo進行了一些簡單的封裝, 不管是OC還是Swift, 下載之后, 直接將NewFeature文件夾拖進您的項目中

OC用法:

#import "NewFeatureViewController.h"
NewFeatureViewController *newFeatureVC = [[NewFeatureViewController alloc] init];
    NSMutableArray *array = [NSMutableArray array];
    for (int i = 0; i<4; i++) {
        [array addObject:[[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"guide%d",i] ofType:@"mp4"]];
    }
    // 1.設置本地視頻路徑數(shù)組
    newFeatureVC.guideMoviePathArr = array;
    // 2.設置封面圖片數(shù)組
    newFeatureVC.guideImagesArr = @[@"guide0", @"guide1", @"guide2", @"guide3"];
    // 3.設置最后一個視頻播放完成之后的block
    [newFeatureVC setLastOnePlayFinished:^{
        UINavigationController *rootNav = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
        [UIApplication sharedApplication].keyWindow.rootViewController = rootNav;
    }];
    self.window.rootViewController = newFeatureVC;

Swift用法

 // 配置本地視頻路徑和視頻的封面圖片
var paths = [String]()
var images = [UIImage]()
for i in 0..<4 {
    paths.append(NSBundle.mainBundle().pathForResource("guide\(i)", ofType: "mp4")!)
    images.append(UIImage(named: "guide\(i)")!)
}
// 設置rootViewController為新特性控制器
window?.rootViewController = NewFeatureViewController(images: images, moviePaths: paths, playFinished: { [unowned self] in
    self.window?.rootViewController = UINavigationController(rootViewController: ViewController())
})

聯(lián)系我

<a >github</a>

<a >微博</a>

<a href="http://m.itdecent.cn/users/9723687edfb5/latest_articles">簡書</a>

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容