iOS上直播弹幕的一种实现

一、弹幕简介

所谓弹幕,就是评论的一种表现形式,更能吸引用户眼球,增强用户体验,增加用户参与感和使用粘度。用户可以在观看内容(视频为主)的同时查看其他人对这个视频的评论,而不需要找到对应的评论区查看。现在视频网站基本都已经实现了弹幕,深受年轻用户的追捧和喜爱。

弹幕分类有很多种,PC上比较常见的一种弹幕是从屏幕右侧进入并从屏幕左侧飞出,全屏弹幕能造成一种比较“震撼”的感觉。在手机上,有很多产品和场景也采用相同方式。但是受屏幕大小限制,可能另一种弹幕方式更常见常见,例如过重直播软件中,弹幕通常出现在弹幕的左下角的固定区域,从下往上出现。

日迹播放场景中,视频评论也是以弹幕的方式在视频的左下角出现,其形式更像是将评论逐一展示出来。下面详细分析下日迹场景弹幕的实现方式。

二、弹幕分析

日迹弹幕总体可以划分成三个部分:评论数据、展现形式、滚动方式。

评论数据模块,包括拉取逻辑,这个部分跟业务比较相关。评论的数据,来自用户对日迹的评论,目前来看,评论数据是纯文本,比较简单。拉取逻辑也相对比较简单,就不详细说明。

日迹弹幕的展现形式比较简单,只是展示纯文本,没有比较复杂的展现形式的动画。当然,设计弹幕方案的时候,考虑到产品形态的变更,后期弹幕展示需要变得丰富,或者展示图片之类的,现在设计的系统也要能够支持快速变更和迭代。

日迹的滚动经过了两个版本的调整,第一个版本匀速滚动,第二个版本是评论逐条滚动,滚动到最后一条,停止滚动,然后动画渐隐消失。整体来讲,也只是调整滚动速度等。

弹幕开始滚动的前提是已经拉到评论数据,因此,弹幕的启动是由数据来驱动的。弹幕这里的整体设计思想,想使整套实现能够实现定制化。因此,这三个部分需要以一种比较灵活的方式组合在一起。

上图是整体设计思路,将滚动方式、展示形式和数据模块分成三个部分。

1、QAutoRollTableView本质是个tableview,这个类本身只关注滚动逻辑,比方说滚动频率,幅度等,还有一个功能就是提供一套接口控制滚动的启动和暂停,供调用方式用。其tableview的DataSource由QAutoRollDataSource来提供。

2、QAutoRollDataSource作为tableview的数据源,可以指定每个cell的展示样式。这个类本身可以被各个业务继承过去,然后根据业务需要指定cell样式。其内部还会持有维护一个很重要的类,QAutoRollDataModel ,由这个model提供弹幕需要展示的数据。

3、弹幕数据由QAutoRollDataModel提供,这个model目前来讲,只是提供一些接口,各个业务可以自己继承过去,做业务自己的逻辑。dataModel拉取到数据后,通过delegate反向驱动tableView开始刷新滚动。

三、弹幕实现

       1、QAutoRollTableView 下图给的就是滚动弹幕的tableview接口,接口作用如图中注释。

        2、QAutoRollDataSource 初始化需要制定一个dataModel,由dataModel来提供弹幕数据,和驱动力。这个对象本身需要只需要制定每个cell的样式和展示逻辑即可。

3、dataModel本身就相对简单,只需要关注业务本身的拉取逻辑即可。准备好数据后,需要通过delegate通知到tableview,开始滚动

日迹的弹幕提供了一个通用的显示纯文本的弹幕控件,下图中cellForRow方法由 QAutoRollTableTextDataSource提供,指定纯文本显示。

以上是我在做日迹需求中实现弹幕的一套方案,写的比较仓促,接口设计上,可能不是很友好,希望大家批评指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BeJavaGod

app微信支付(一) - 微信支付基本业务流程解析

想必微信支付是现在很多朋友离不开的一个功能,不论是扫描支付还是公众号支付或者app端支付,基本的思路都是一样的,之前做过支付宝支付以及中国移动支付接口,这几天花...

3194
来自专栏大数据挖掘DT机器学习

腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析

作者:reetsee.com首席运营官 http://blog.csdn.net/qq_17754181/article/details/45179667 至...

3805
来自专栏Android 开发者

Android 8.1 开发者预览版 —— 为 ML 机器学习做好准备的 Oreo 升级版

1954
来自专栏Android 开发者

Android Jetpack: ViewModel | 中文教学视频

Android Jetpack 是一系列助力您更容易打造卓越 Android 应用的工具和组件。这些组件能帮助您遵循最佳实践、免除编写繁复的样板代码并简化复杂任...

1112
来自专栏顶级程序员

商业项目中最受欢迎的 7 种编程语言

【导读】:Semaphore 是一个国外持续集成/持续部署方案服务商。Semaphore 称自己在过去三年对其开发者用户进行调查,调查他们在开发商业项目时一般...

3326
来自专栏EAWorld

为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。 首先,我们来看一下普元云的总体架构图。 ? 从图中可以看到,在我们普元云平台中,我们最...

3144
来自专栏熊二哥

移动前端技术快速入门

2016乌镇互联网会议上,李彦宏大大说"移动互联网时代已经结束",小马哥也持有类似观点。不过这都是大牛的事,对于菜菜的俺来说,落后一个时代远比两个时代好的多,称...

1879
来自专栏FreeBuf

我是如何发现Google服务器上的LFI漏洞的

本文将介绍如何利用本地文件包含漏洞读取Google某服务器上的任意文件。漏洞存在于Google的Feedburner中,在提交漏洞后,Google安全团队迅速修...

1876
来自专栏编程

开发者必看:Android UI及API 优化指南

作为应用的设计者,有些开发者在开发过程中容易忽略一些用户体验方面的问题,从而导致了自己的应用用户体验欠佳。本期 Android 开发者 FAQ 我们整理了一些开...

1766
来自专栏知晓程序

微信小程序正式发布!这是最全的上手指南

913

扫码关注云+社区