iOS 弹幕功能的实现思路图解

先来看一张效果图(LICEcap录制的有点卡, 凑合看)

理一下大概流程:

接下来实现: 弹幕视图从底部弹上来, 依次动画向上滚动, 出屏幕就移除加入重用队列, 下次使用.

定义相关属性:

1. 根据弹幕区域, 确定总共需要的弹幕itemView个数(总区域高度/最小高度),并添加到弹幕控件底部

追加一条新数据(由于需要动画处理, 当前数据动画完成后才能处理下一条数据,这里需要定义两个区:正在处理区和等待处理区)

追加数据并弹出

从处理区取出itemView并初始化其将要展示的位置,计算宽高, 然后遍历展示区item做动画, 接下来对将要展示的item做动画

执行动画(upOffsetHeight为要展示的弹幕高度)

.动画完成后,接着处理:

将展示区的item遍历, 如果已经彻底移除屏幕了, 就回收到未展示区复用;

将当前绘制好的弹幕更新分区: 未展示区—>展示区

继续处理等待区数据

大概思路就是这样.

昨天花了个把小时完成了这个功能,并没有优化, 仅供参考学习.

Demo地址: https://github.com/Winerywine/BarrageView .git

总结

以上所述是小编给大家介绍的iOS 图解弹幕功能的实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 代码详解iOS视频直播弹幕功能

    本篇内容通过步骤详细给大家讲解了iOS视频直播弹幕的原理以及实现代码分析,以下就是全部内容: 1.弹幕的实现性分析 首先,从视觉上明确当前弹幕所具有的功能 从屏幕右侧滑入左侧,直至完全消失 不管是长的弹幕,还是短的弹幕,速度一致(可能有的需求是依据弹幕长度,调整速度) 有弹幕轨道,不是随机产生的弹幕 弹幕不会进行重叠 接下来从功能角度思考需要做什么 重用机制,类似tableView有一个重用池,每个弹幕就是一个cell,当有弹幕发送的时候,如果当前的重用池没有控件,则创建一个新的控件,如果重用池

  • iOS弹幕开发中遇到的问题汇总

    前言 弹幕在现在的各类视频中都有,也是每位开发者们必须会的一个功能,最近在开发中就遇到了一些问题,下面简单说说弹幕开发碰到的两个小问题. 正文 需求:实现一个弹幕容器,里面同时会有多行互不重叠的.运动中的弹幕 .每一条弹幕均需要支持点击事件. 用脚底板想的方法:在弹幕容器里面创建几个 UIButton,并且 addTarget,增加点击事件.最后利用 UIView 的 block API 实现动画. 结果:嗯...可惜的是,代码运行起来,你会发现在 UIButton 运动过程,点击事件并没有响应

  • IOS 实现简单的弹幕功能

    前言 简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量. 正文 代码实现: let DANMAKU_SPEED: CGFloat = 150 // 弹幕每秒移动速度 let DANMAKU_SPACE_TIME: NSTimeInterval = 1 // 弹幕之间的时间间隔 let DANMAKU_MAX_ROW = 3 // 最多同时弹幕行数 let danmakuFont = UIFont.systemFontOfSize(18) // 弹幕字体大小 var rowArray

  • ios弹幕高效加载实现方式实例代码

    看直播的童鞋们应该会经常看到满屏幕的滚动弹幕,看到密密麻麻的弹幕第一印象就是怎么样高效加载来避免卡顿,弹幕组成部分包含用户头像.用户昵称.弹幕的内容.表情等,本文介绍的实现原理就是把这几部分绘制成一张图片,然后通过定时器移动弹幕图片,当图片不在屏幕范围内即销毁. 先看下效果 下面我会详细介绍下实现原理 1 .获取弹幕数据来源,因为我是模拟生成弹幕,弹幕的数据存放在工程里的plist文件中 emotions存放这条弹幕的表情,type表示是否是自己发的,text表示弹幕内容,userName表示用

  • iOS 弹幕功能的实现思路图解

    先来看一张效果图(LICEcap录制的有点卡, 凑合看) 理一下大概流程: 接下来实现: 弹幕视图从底部弹上来, 依次动画向上滚动, 出屏幕就移除加入重用队列, 下次使用. 定义相关属性: 1. 根据弹幕区域, 确定总共需要的弹幕itemView个数(总区域高度/最小高度),并添加到弹幕控件底部 追加一条新数据(由于需要动画处理, 当前数据动画完成后才能处理下一条数据,这里需要定义两个区:正在处理区和等待处理区) 追加数据并弹出 从处理区取出itemView并初始化其将要展示的位置,计算宽高,

  • iOS弹幕组件LNDanmakuMaster的具体使用

    LNDanmakuMaster是一个轻量的弹幕播放器,通过:创建播放器->创建轨道->添加弹幕的方式进行弹幕播放,提供丰富轨道样式的同时也支持自定义轨道:对传入的弹幕的视图层没有要求(任意的View/Layer):提供多种(目前是3)弹幕分布策略:支持使用轨道组播放特殊弹幕:提供与分布策略的对应的弹幕seek策略. Github链接:LNDanmakuMaster 你可以直接下载这个链接并运行上面丰富的Demo,或参考Demo代码实现自己的弹幕播放器,也可以直接使用Cocoapods

  • 微信小程序 弹幕功能简单实例

    1.微信小程序----弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层. 先贴wxml和wxss代码. wxml代码如下: <!-- pages/index/index.wxml --> <swiper indicator-dots="{{indicatorDo

  • JavaScript css3实现简单视频弹幕功能

    本文尝试写了一个demo模拟了最简单的视频弹幕功能. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用于放置弹幕.在video的右边放一个<ul>列表用于显示弹幕列表. 屏幕上面的弹幕,把内容放在<span>标签里面,一般一行字都是从左边飞到右边, 为了简单起见,这个移动就用了CSS3 的transition 属性.position设置为absolute, 那么就用的transition过度left属性,实现弹幕的移动.当然

  • EasyUI的TreeGrid的过滤功能的解决思路

    写在最前面 这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求. easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点信息的话,还真是无从下手,在这里先对前端的同学膜拜下. 说下需求吧,最近一个项目中有个界面使用的easyui的treegrid展示,起初是没什么问题的,但是随着数据的导入发现实际操作上十分不便.原因呢是开发的时候treegrid并没有做分页的处理,目前测试环境数据达到456条,想从中找到一条然后处理

  • iOS新功能引导提示界面实例详解

    在开发中,现在很多app更新了新功能时都会给出用户一个提示,以方便用户更好的体验,那么这个功能如何实现的呢? 首先看下效果图: 1.首先创建第一个viewcontroller 在上面放上一个imageview和一个按钮 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIImageView *imageview=[[UIImageView alloc]ini

  • Android实现炫酷的网络直播弹幕功能

    现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的View上面就可以了,下方肯定还有有操作界面View,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示: 参照原理图,下面一步一步来实现这个功能.

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 利用JS代码自动删除稿件的普通弹幕功能

    事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通的弹幕,语言用的是javascript,在chrome的控制台就可以执行这个脚本. 1.删除弹幕的流程分析 判断弹幕A是否为普通弹幕,是则选中. 点击删除弹幕的按钮,弹出二次确认框. 点击确定,成功删除. 2.删除弹幕相关的html代码,js代码2.1 选中 可通过判断class属性为"item-f

随机推荐