iOS仿抖音短視頻

iOS仿抖音—左右滑動切換效果
iOS仿抖音—上下滑動播放視頻
iOS仿抖音—評論視圖滑動消失
iOS仿抖音—加載點贊動畫效果
iOS仿抖音—播放視圖滑動隱藏
首先看下效果圖

圖做的不太好，將就看吧

2018.12.12 添加了tabbar，數(shù)據(jù)寫死到了本地（接口過一段時間就會訪問沒數(shù)據(jù)）

dy_tabbar.gif

前言

上一篇文章仿寫了抖音的左右滑動效果-iOS之仿抖音左右滑動效果，有興趣的可以去GKNavigationBarViewController的demo中查看。
這篇文章主要是對抖音的上下滑動及視頻播放功能做介紹。其中上下滑動用的是UIScrollview，包含3個子視圖。視頻播放用的是TX的獨立播放器TXLiteAVSDK_Player，可實現(xiàn)音視頻的點播、直播等功能。

demo中的視頻是通過抓包獲取的百度的伙拍小視頻，僅供學習使用。

說明

1、上下滑動切換視圖實現(xiàn)

主要是在UIScrollview的代理中做處理，且對滑動到第一個和最后一個時分開處理，看下代碼

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 小于等于三個，不用處理
    if (self.videos.count <= 3) return;
    
    // 上滑到第一個
    if (self.index == 0 && scrollView.contentOffset.y <= SCREEN_HEIGHT) {
        return;
    }
    // 下滑到最后一個
    if (self.index == self.videos.count - 1 && scrollView.contentOffset.y > SCREEN_HEIGHT) {
        return;
    }
    
    // 判斷是從中間視圖上滑還是下滑
    if (scrollView.contentOffset.y >= 2 * SCREEN_HEIGHT) {  // 上滑
        [self.player removeVideo];  // 在這里移除播放，解決閃動的bug
        if (self.index == 0) {
            self.index += 2;
            
            scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);
            
            self.topView.model = self.ctrView.model;
            self.ctrView.model = self.btmView.model;
            
        }else {
            self.index += 1;
            
            if (self.index == self.videos.count - 1) {
                self.ctrView.model = self.videos[self.index - 1];
            }else {
                scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);
                
                self.topView.model = self.ctrView.model;
                self.ctrView.model = self.btmView.model;
            }
        }
        if (self.index < self.videos.count - 1) {
            self.btmView.model = self.videos[self.index + 1];
        }
    }else if (scrollView.contentOffset.y <= 0) { // 下滑
        [self.player removeVideo];  // 在這里移除播放，解決閃動的bug
        if (self.index == 1) {
            self.topView.model = self.videos[self.index - 1];
            self.ctrView.model = self.videos[self.index];
            self.btmView.model = self.videos[self.index + 1];
            self.index -= 1;
        }else {
            if (self.index == self.videos.count - 1) {
                self.index -= 2;
            }else {
                self.index -= 1;
            }
            scrollView.contentOffset = CGPointMake(0, SCREEN_HEIGHT);
            
            self.btmView.model = self.ctrView.model;
            self.ctrView.model = self.topView.model;
            
            if (self.index > 0) {
                self.topView.model = self.videos[self.index - 1];
            }
        }
    }
}

滑動結(jié)束后開始播放

// 結(jié)束滾動后開始播放
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.y == 0) {
        if (self.currentPlayId == self.topView.model.post_id) return;
        [self playVideoFrom:self.topView];
    }else if (scrollView.contentOffset.y == SCREEN_HEIGHT) {
        if (self.currentPlayId == self.ctrView.model.post_id) return;
        [self playVideoFrom:self.ctrView];
    }else if (scrollView.contentOffset.y == 2 * SCREEN_HEIGHT) {
        if (self.currentPlayId == self.btmView.model.post_id) return;
        [self playVideoFrom:self.btmView];
    }
    
    if (self.isPushed) return;
    
    // 當只剩最后兩個的時候，獲取新數(shù)據(jù)
    if (self.currentPlayIndex == self.videos.count - 2) {
        [self.viewModel refreshNewListWithSuccess:^(NSArray * _Nonnull list) {
            [self.videos addObjectsFromArray:list];
        } failure:^(NSError * _Nonnull error) {
            NSLog(@"%@", error);
        }];
    }
}

上下滑動的處理基本就這些，如果有不懂的可以下載demo查看。

2、播放器封裝

這里封裝的播放器用的是騰訊的視頻點播TXVodPlayer。
創(chuàng)建播放器

- (TXVodPlayer *)player {
    if (!_player) {
        [TXLiveBase setLogLevel:LOGLEVEL_NULL];
        [TXLiveBase setConsoleEnabled:NO];
        
        _player = [TXVodPlayer new];
        _player.vodDelegate = self;
        _player.loop = YES; // 開啟循環(huán)播放功能
    }
    return _player;
}

由于是多個視頻切換播放，所以最好只用一個播放器，因此在切換視圖后，需要播放器切換播放視圖和播放地址，所以提供了下面的方法。

- (void)playVideoWithView:(UIView *)playView url:(NSString *)url {
    // 設置播放視圖
    [self.player setupVideoWidget:playView insertIndex:0];
    
    // 準備播放
    [self playerStatusChanged:GKDYVideoPlayerStatusPrepared];
    
    // 開始播放
    if ([self.player startPlay:url] == 0) {
        // 這里可加入緩沖視圖
    }else {
        [self playerStatusChanged:GKDYVideoPlayerStatusError];
    }
}

播放器狀態(tài)監(jiān)聽，可獲取播放狀態(tài)及進度等

- (void)onPlayEvent:(TXVodPlayer *)player event:(int)EvtID withParam:(NSDictionary *)param {
    switch (EvtID) {
        case PLAY_EVT_PLAY_LOADING:{    // loading
            if (self.status == GKDYVideoPlayerStatusPaused) {
                [self playerStatusChanged:GKDYVideoPlayerStatusPaused];
            }else {
                [self playerStatusChanged:GKDYVideoPlayerStatusLoading];
            }
        }
            break;
        case PLAY_EVT_PLAY_BEGIN:{    // 開始播放
            [self playerStatusChanged:GKDYVideoPlayerStatusPlaying];
        }
            break;
        case PLAY_EVT_PLAY_END:{    // 播放結(jié)束
            [self playerStatusChanged:GKDYVideoPlayerStatusEnded];
        }
            break;
        case PLAY_ERR_NET_DISCONNECT:{    // 失敗，多次重連無效
            [self playerStatusChanged:GKDYVideoPlayerStatusError];
        }
            break;
        case PLAY_EVT_PLAY_PROGRESS:{    // 進度
            if (self.status == GKDYVideoPlayerStatusPlaying) {
                self.duration = [param[EVT_PLAY_DURATION] floatValue];
                
                float currTime = [param[EVT_PLAY_PROGRESS] floatValue];
                
                float progress = self.duration == 0 ? 0 : currTime / self.duration;
                
                // 處理播放結(jié)束時，進度不更新問題
                if (progress >= 0.95) progress = 1.0f;
                
                //                float buffTime = [param[EVT_PLAYABLE_DURATION] floatValue];
                //                float burrProgress = self.duration == 0 ? 0 : buffTime / self.duration;
                
                if ([self.delegate respondsToSelector:@selector(player:currentTime:totalTime:progress:)]) {
                    [self.delegate player:self currentTime:currTime totalTime:self.duration progress:progress];
                }
            }
        }
            break;
            
        default:
            break;
    }
}

內(nèi)容比較多，如果想要具體了解，還需要下載代碼查看。

最后

demo的地址：GKDYVideo，由于github的限制，播放器無法上傳，所以需要下載下來后pod install即可。