iOS仿抖音短視頻
iOS仿抖音—左右滑動(dòng)切換效果
iOS仿抖音—上下滑動(dòng)播放視頻
iOS仿抖音—評(píng)論視圖滑動(dòng)消失
iOS仿抖音—加載點(diǎn)贊動(dòng)畫(huà)效果
iOS仿抖音—播放視圖滑動(dòng)隱藏
首先看下效果圖
圖做的不太好没宾，將就看吧
2018.12.12 添加了tabbar，數(shù)據(jù)寫(xiě)死到了本地（接口過(guò)一段時(shí)間就會(huì)訪問(wèn)沒(méi)數(shù)據(jù)）
dy_tabbar.gif
前言
上一篇文章仿寫(xiě)了抖音的左右滑動(dòng)效果-iOS之仿抖音左右滑動(dòng)效果歹茶，有興趣的可以去GKNavigationBarViewController的demo中查看橱野。
這篇文章主要是對(duì)抖音的上下滑動(dòng)及視頻播放功能做介紹。其中上下滑動(dòng)用的是UIScrollview幼驶，包含3個(gè)子視圖床绪。視頻播放用的是TX的獨(dú)立播放器TXLiteAVSDK_Player婆廊，可實(shí)現(xiàn)音視頻的點(diǎn)播饼疙、直播等功能溺森。
demo中的視頻是通過(guò)抓包獲取的百度的伙拍小視頻，僅供學(xué)習(xí)使用窑眯。
說(shuō)明
1屏积、上下滑動(dòng)切換視圖實(shí)現(xiàn)
主要是在UIScrollview的代理中做處理，且對(duì)滑動(dòng)到第一個(gè)和最后一個(gè)時(shí)分開(kāi)處理磅甩，看下代碼
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 小于等于三個(gè)炊林，不用處理
if (self.videos.count <= 3) return;
// 上滑到第一個(gè)
if (self.index == 0 && scrollView.contentOffset.y <= SCREEN_HEIGHT) {
return;
}
// 下滑到最后一個(gè)
if (self.index == self.videos.count - 1 && scrollView.contentOffset.y > SCREEN_HEIGHT) {
return;
}
// 判斷是從中間視圖上滑還是下滑
if (scrollView.contentOffset.y >= 2 * SCREEN_HEIGHT) { // 上滑
[self.player removeVideo]; // 在這里移除播放，解決閃動(dòng)的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]; // 在這里移除播放卷要，解決閃動(dòng)的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];
}
}
}
}
滑動(dòng)結(jié)束后開(kāi)始播放
// 結(jié)束滾動(dòng)后開(kāi)始播放
- (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;
// 當(dāng)只剩最后兩個(gè)的時(shí)候铛铁，獲取新數(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);
}];
}
}
上下滑動(dòng)的處理基本就這些，如果有不懂的可以下載demo查看却妨。
2、播放器封裝
這里封裝的播放器用的是騰訊的視頻點(diǎn)播TXVodPlayer括眠。
創(chuàng)建播放器
- (TXVodPlayer *)player {
if (!_player) {
[TXLiveBase setLogLevel:LOGLEVEL_NULL];
[TXLiveBase setConsoleEnabled:NO];
_player = [TXVodPlayer new];
_player.vodDelegate = self;
_player.loop = YES; // 開(kāi)啟循環(huán)播放功能
}
return _player;
}
由于是多個(gè)視頻切換播放彪标，所以最好只用一個(gè)播放器，因此在切換視圖后掷豺，需要播放器切換播放視圖和播放地址捞烟，所以提供了下面的方法。
- (void)playVideoWithView:(UIView *)playView url:(NSString *)url {
// 設(shè)置播放視圖
[self.player setupVideoWidget:playView insertIndex:0];
// 準(zhǔn)備播放
[self playerStatusChanged:GKDYVideoPlayerStatusPrepared];
// 開(kāi)始播放
if ([self.player startPlay:url] == 0) {
// 這里可加入緩沖視圖
}else {
[self playerStatusChanged:GKDYVideoPlayerStatusError];
}
}
播放器狀態(tài)監(jiān)聽(tīng)当船，可獲取播放狀態(tài)及進(jìn)度等
- (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:{ // 開(kāi)始播放
[self playerStatusChanged:GKDYVideoPlayerStatusPlaying];
}
break;
case PLAY_EVT_PLAY_END:{ // 播放結(jié)束
[self playerStatusChanged:GKDYVideoPlayerStatusEnded];
}
break;
case PLAY_ERR_NET_DISCONNECT:{ // 失敗题画，多次重連無(wú)效
[self playerStatusChanged:GKDYVideoPlayerStatusError];
}
break;
case PLAY_EVT_PLAY_PROGRESS:{ // 進(jìn)度
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é)束時(shí)，進(jìn)度不更新問(wèn)題
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的限制竞思，播放器無(wú)法上傳表谊，所以需要下載下來(lái)后pod install即可。
