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 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于HTML5的Web SCADA工控移动应用

1452
来自专栏儿童编程

《我们捉鱼吧》——Scratch神奇的“侦测”功能总结

导读:本文通过案例《鼠标捉鱼》、《大鱼吃小鱼》、《小猫捉鱼》总结了Scratch的侦测功能。

2992
来自专栏玉树芝兰

如何用Markdown轻松排版知乎专栏文章?

免费、便捷、高效的知乎专栏Markdown排版技巧。希望本文可以让你的写作过程也变得更愉悦。

1702
来自专栏学海无涯

Android开发之再探底部菜单TabLayout与Bottom navigation实现方式

前文中已经对主流的底部菜单实现进行了详细说明,但随着Android版本的升级,Google又推出了更方便的实现方式,此文就来一探究竟。 </br> 一、利用Ta...

3294
来自专栏王二麻子IT技术交流园地

手机网站开发相关介绍

随着无线网络技术的发展,手机上网的速度越来越快,手机的功能也越来越强大。今天就像大家介绍下手机网中的开发。 手机上网的特点 手机屏幕一般在240 * 320以上...

1887
来自专栏hightopo

基于HT for Web的Web SCADA工控移动应用

1213
来自专栏phodal

一次超帅的代码生成设计

需求 昨天,我看到这个Badge的时候,我就在想我也会创建一个自己的Badge。 ? 然后,我就可以这样到处粘贴: ? 看样子,我做的效果还是没有上面的好看...

2049
来自专栏IT派

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

3225
来自专栏前端笔记

【WP主题】Kratos 文章样式使用说明 。

为了拓展 WordPress 原有的文章编辑器功能,三哥额外添加了一些配合主题使用的小功能(网易云音乐、优酷视频、腾讯视频、哔哩哔哩、Youtube、进度条、下...

3849
来自专栏编程微刊

web开发快速提高工作效率的一些资源

前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,...

46216

扫码关注云+社区