IOS 实现简单的弹幕功能

前言

  简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量。

正文

代码实现:

let DANMAKU_SPEED: CGFloat = 150 // 弹幕每秒移动速度
 let DANMAKU_SPACE_TIME: NSTimeInterval = 1 // 弹幕之间的时间间隔
 let DANMAKU_MAX_ROW = 3 // 最多同时弹幕行数
 let danmakuFont = UIFont.systemFontOfSize(18) // 弹幕字体大小
 var rowArray = Array<Array<Danmaku>>(count: 3, repeatedValue: Array<Danmaku>())
 var danmakuQueue = NSOperationQueue() // 队列

 class Danmaku : NSObject{
  var msg: Msg
  var view: UILabel?
  var size = CGSize(width: 0, height: 0)
  var row = 0
  var startTime: NSDate?
  var duration: NSTimeInterval = 0
  var delay: NSTimeInterval = 0

  init(_ msg: Msg, _ row: Int, _ delay: NSTimeInterval = 0) {
   self.msg = msg
   self.row = row
   self.delay = delay
  }
 }

 func queueDanmaku(msg: Msg) {
  danmakuQueue.addOperation(NSBlockOperation(block: { [weak self] in

   if let weakself = self {
    repeat {
     //检测放第几行
     for var row = 0; row < weakself.DANMAKU_MAX_ROW; ++row {
      let rowDanmaku = weakself.rowArray[row]
      if rowDanmaku.count == 0 {
       let danmaku = Danmaku(msg, weakself.danmakuFont, row)
       weakself.rowArray[row].append(danmaku)
       self?.performSelectorOnMainThread("sendDanmaku:", withObject: danmaku, waitUntilDone: true)
       return
      } else {
       if let lastDanmaku = rowDanmaku.last {
        if let startTime = lastDanmaku.startTime {
         let now = NSDate()
         let seconds = now.timeIntervalSinceDate(startTime)
         let widthDuration = Double(lastDanmaku.size.width / weakself.DANMAKU_SPEED)

         var delay = seconds - weakself.DANMAKU_SPACE_TIME - widthDuration
         if delay >= 0 {
          delay = 0
         } else {
          if lastDanmaku.delay > lastDanmaku.duration {
           continue
          }
         }

         let danmaku = Danmaku(msg, weakself.danmakuFont, row, abs(delay) + lastDanmaku.delay)
         weakself.rowArray[row].append(danmaku)

         self?.performSelectorOnMainThread("sendDanmaku:", withObject: danmaku, waitUntilDone: true)
         return
        }
       }
      }
     }

     sleep(1000)
    } while self != nil
   }

   }))
 }

 func sendDanmaku(danmaku: Danmaku) {
  let text = "\(danmaku.msg.user_name) : \(danmaku.msg.text)"
  let size = NSString(string: text).sizeWithAttributes([NSFontAttributeName : danmakuFont])
  let width = UIScreen.mainScreen().bounds.size.width
  let top = 54 + danmaku.row * (Int(size.height) + 10)
  let label = UILabel(frame: CGRectMake(width, CGFloat(top), size.width, size.height))
  let duration = (width + size.width) / DANMAKU_SPEED

  danmaku.view = label
  danmaku.size = size
  danmaku.startTime = NSDate()
  danmaku.duration = NSTimeInterval(duration)

  label.text = text
  label.font = danmakuFont
  label.textColor = UIColor.whiteColor()
  label.shadowColor = UIColor.blackColor()
  label.shadowOffset = CGSizeMake(0, -1.0)

  self.view.addSubview(label)
  UIView.animateWithDuration(Double(duration), delay: danmaku.delay, options: UIViewAnimationOptions.CurveLinear, animations: { () -> Void in
    label.left = -label.width
   }) { [weak self] (Bool) -> Void in
    if !(self?.rowArray[danmaku.row].isEmpty ?? true) {
     self?.rowArray[danmaku.row].removeFirst()
    }
    label.removeFromSuperview()
  }
 }

代码说明:

  代码控制了最多同时只能弹三行,每行最后一条如果延迟大于跑弹幕的时间(已经有一条处于完全等待状态)就自动切到下一行,超过最大限制就等待。

      *  rowArray 主要用于查询前一个弹幕的位置和时间

      *  别忘了在 deinit 里面加上 danmakuQueue.cancelAllOperations()

      *  注意 NSBlockOperation 的 block 并不在主线程上

以上就是对IOS开发 简单的弹幕功能的实现代码,有需要开发这种功能的朋友可以参考下。

(0)

相关推荐

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

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

  • 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实现简单计算器小功能

    本文实例为大家分享了iOS实现简单计算器小功能的具体代码,供大家参考,具体内容如下 SimpleCaculatorViewController.h // //  SimpleCaculatorViewController.h //  SimpleCaculator // //  Created by LI Junui on 14-2-12. //  Copyright (c) 2014年 LEE JUNHUI. All rights reserved. //   #import <UIKit/U

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

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

  • iOS实现简单的头部缩放功能

    本文通过实例代码给大家介绍了iOS实现简单的头部缩放功能.实现思路有头部视图,滚动视图,控制头部动画等多个示例代码块,大家可以参考下本文. 简单实现并集成一个头部缩放的功能,适用于UIScrollView以及其子类. 头部伴随模糊效果放大缩小,并在一定位置时悬停充当导航栏.这里提供实现思路,如有符合可直接使用. 效果如下图. 实现: 首先分解为两部分,一部分为头部视图,一部分为滚动视图.头部视图负责展示,滚动视图负责控制头部视图如何展示,比如放大和缩小. 一:头部视图 头部视图拆解为负责展示图片

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

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

  • 基于JS简单实现手持弹幕功能+文字抖动特效代码

    前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但实际效果还是不错的. 第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧. 生成一个铺满全屏的黑色背景,写上文字,然后内容居中 实现无缝滚动 实现文字抖动特效 旋转90度(默认横屏展示) 代码如下 .html <div class="barrage-box"> <div class="text">抖动字幕</div>

  • iOS实现简单计算器功能

    本文实例为大家分享了iOS实现简单计算器功能的具体代码,供大家参考,具体内容如下 //  ZYAppDelegate.m //  Calculator // //  Created by mac on 15-7-30. //  Copyright (c) 2015年 zhiyou. All rights reserved. //   #import "ZYAppDelegate.h"   @implementation ZYAppDelegate   - (BOOL)applicati

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

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

  • React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

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

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

随机推荐