精华内容
下载资源
问答
  • 先来一张效果图: 实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在一条直线上,相互覆盖。平移代码如下:@overridevoid initState() {_...

    3a0a4d41302d6eec0098da03ec556457.png

    老孟导读:用Flutter实现弹幕功能,轻松实现虎牙、斗鱼的弹幕效果。

    先来一张效果图:

    2a7bce022fdb6258a96400ac848636a2.gif

    实现原理

    弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在一条直线上,相互覆盖。平移代码如下:

    @override

    void initState() {

    _animationController =

    AnimationController(duration: widget.duration, vsync: this)

    ..addStatusListener((status){

    if(status == AnimationStatus.completed){

    widget.onComplete('');

    }

    });

    var begin = Offset(-1.0, .0);

    var end = Offset(1.0, .0);

    _animation = Tween(begin: begin, end: end).animate(_animationController);

    //开始动画

    _animationController.forward();

    super.initState();

    }

    @override

    Widget build(BuildContext context) {

    return SlideTransition(

    position: _animation,

    child: widget.child,

    );

    }

    计算垂直方向的偏移:

    _computeTop(int index, double perRowHeight) {

    //第几轮弹幕

    int num = (index / widget.showCount).floor();

    var top;

    top = (index % widget.showCount) * perRowHeight + widget.padding;

    if (num % 2 == 1 && index % widget.showCount != widget.showCount - 1) {

    //第二轮在第一轮2行弹幕中间

    top += perRowHeight / 2;

    }

    if (widget.randomOffset != 0 && top > widget.randomOffset) {

    top += _random.nextInt(widget.randomOffset) * 2 - widget.randomOffset;

    }

    return top;

    }

    这些准备好后,就是创建一条弹幕了,现创建一条最简单的文字弹幕:

    Text(

    text,

    style: TextStyle(color: Colors.white),

    );

    效果如下:

    c554539684061839ed83479aa51cfba8.gif

    创建一条VIP用户的弹幕,其实就是字体变下颜色:

    Text(

    text,

    style: TextStyle(color: Color(0xFFE9A33A)),

    )

    效果如下:

    ee55a4eaa7e6ff9e7c3dbe9594ba7613.gif

    给文字加个圆角背景:

    return Center(

    child: Container(

    padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),

    decoration: BoxDecoration(

    color: Colors.red.withOpacity(.8),

    borderRadius: BorderRadius.circular(50)),

    child: Text(

    text,

    style: TextStyle(color: Colors.white),

    ),

    ),

    );

    效果如下:

    0c87913a95f246b3224ea49bc74b3586.gif

    创建一个送火箭的弹幕:

    return Center(

    child: Container(

    padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),

    decoration: BoxDecoration(

    color: Colors.red.withOpacity(.8),

    borderRadius: BorderRadius.circular(50)),

    child: Row(

    mainAxisSize: MainAxisSize.min,

    children: [

    Text(

    text,

    style: TextStyle(color: Colors.white),

    ),

    Image.asset('assets/images/timg.jpeg',height: 30,width: 30,),

    Text(

    'x $count',

    style: TextStyle(color: Colors.white, fontSize: 18),

    ),

    ],

    ),

    ),

    );

    效果如下:

    78fbfd1e2d6be4dae2a47494db72d01e.gif

    火箭有点丑了,不过这不是重点。

    如果觉得还不错,给个小小的赞。

    交流

    如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

    同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

    Flutter生态建设离不开你我他,需要大家共同的努力,点赞也是其中的一种,如果文章帮助到了你,希望点个赞。

    展开全文
  • Web实时弹幕原理分析

    2016-12-03 09:05:36
    Web实时弹幕原理分析 用途 搞活动、年会的时候,在大屏幕上实时显示留言、吐槽。 在视频网站上,将大家的吐槽实时展示出来。 ... 原理 其他原理挺简单的,就是将大家的留言实时展示出来。 注意点:实时性、...

    废话不多说,首先上效果图。

    效果图

    Web实时弹幕原理分析

    用途

    • 搞活动、年会的时候,在大屏幕上实时显示留言、吐槽。
    • 在视频网站上,将大家的吐槽实时展示出来。
    • ...

    原理

    其他原理挺简单的,就是将大家的留言实时展示出来。

    注意点:实时性、动画效果、数据存储。

    实时性

    首先我们会想到,Ajax轮循 简单,粗暴。

    客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。

    客户端会轮询,判断有没有新消息。

    这种方式连接数会很多,一个接受,一个发送。

    而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。

    所以,这个方案是不可取的。

    可以通过长连接,socket.io 来实现。

    Socket.IO 官方地址:socket.io/

    Socket.IO 支持 WebSocket 协议、用于实时通信和跨平台的框架。

    Socket.IO 设计的目标是构建能够在不同浏览器和移动设备上良好运行的实时应用。

    如实时分析系统、二进制流数据处理应用、在线聊天室、在线客服系统、评论系统、WebIM等。

    目前,Socket.IO 已经支持主流PC浏览器(IE、Safari、Chrome、Firefox、Opera等)。

    移动平台上的浏览器(iOS平台下的Safari、Android平台下的基于Webkit的浏览器等)。

    Socket.IO 实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题,并统一了服务端与客户端的编程方式。

    启动了Socket以后,就像建立了一条客户端与服务端的管道,两边可以信息互通。

    利用Socket.IO 与 Workerman 结合 ,双剑合璧。

    Workerman 官方地址:www.workerman.net/

    动画效果

    CommentCoreLibrary
    jabbany.github.io/CommentCore…

    GoEasy
    goeasy.io/www/demo/ba…

    jquery.barrager.js

    Jquery.barrager.js 是一款优雅的网页弹幕插件,支持显示图片,文字以及超链接。

    支持速度、高度、颜色、数量等自定义

    链接:yaseng.org/jquery.barr…

    大家可以浏览上面提供的Demo,根据自己的实际需求进行修改,优化。

    数据存储

    切记不要每次发送数据的时候实时插入的数据库中,可以利用异步处理。

    首先将数据存储到缓存中,异步将缓存的数据同步到数据库中。

    效果图的实现方法:

    Socket.IO + Workerman + jquery.barrager.js

    大家可以关注微信公众号,回复 “弹幕源码”,即可获取源码。

    Thanks ~


    作者:PHP后端开发者

    免费提供技术咨询服务(自己懂的知识)。

    QQ群:564557094。

    关注微信公众号,留言即可,看到留言后会及时回复。

    IT小圈儿
    展开全文
  • 原理其他原理挺简单的,就是将大家的留言实时展示出来。注意点:实时性、动画效果、数据存储。实时性首先我们会想到,Ajax轮循 简单,粗暴。客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。客户端会...

    废话不多说,首先上效果图。

    效果图

    bVGo0P

    用途

    搞活动、年会的时候,在大屏幕上实时显示留言、吐槽。

    在视频网站上,将大家的吐槽实时展示出来。

    ...

    原理

    其他原理挺简单的,就是将大家的留言实时展示出来。

    注意点:实时性、动画效果、数据存储。

    实时性

    首先我们会想到,Ajax轮循 简单,粗暴。

    客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。

    客户端会轮询,判断有没有新消息。

    这种方式连接数会很多,一个接受,一个发送。

    而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。

    所以,这个方案是不可取的。

    可以通过长连接,socket.io 来实现。

    Socket.IO 支持 WebSocket 协议、用于实时通信和跨平台的框架。

    Socket.IO 设计的目标是构建能够在不同浏览器和移动设备上良好运行的实时应用。

    如实时分析系统、二进制流数据处理应用、在线聊天室、在线客服系统、评论系统、WebIM等。

    目前,Socket.IO 已经支持主流PC浏览器(IE、Safari、Chrome、Firefox、Opera等)。

    移动平台上的浏览器(iOS平台下的Safari、Android平台下的基于Webkit的浏览器等)。

    Socket.IO 实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题,并统一了服务端与客户端的编程方式。

    启动了Socket以后,就像建立了一条客户端与服务端的管道,两边可以信息互通。

    利用Socket.IO 与 Workerman 结合 ,双剑合璧。

    动画效果

    jquery.barrager.js

    Jquery.barrager.js 是一款优雅的网页弹幕插件,支持显示图片,文字以及超链接。

    支持速度、高度、颜色、数量等自定义

    大家可以浏览上面提供的Demo,根据自己的实际需求进行修改,优化。

    数据存储

    切记不要每次发送数据的时候实时插入的数据库中,可以利用异步处理。

    首先将数据存储到缓存中,异步将缓存的数据同步到数据库中。

    效果图的实现方法:

    Socket.IO + Workerman + jquery.barrager.js

    大家可以关注微信公众号,回复 “弹幕源码”,即可获取源码。

    推荐阅读

    一起学习

    展开全文
  • 叉叉助手能实现从它的app打开另外的app,并实现弹幕,请问下这种弹幕效果是用的什么技术呢?
    叉叉助手能实现从它的app打开另外的app,并实现弹幕,请问下这种弹幕效果是用的什么技术呢? 
    展开全文
  • 待项目成熟应进行弹幕框架封装; ... ... 前端的坑还会继续一个个地去踩; 在路上, 会一个一个把坑尽量看清楚些, 看透彻了, 为了下一次快掉进去之前, 不抽自己嘴巴子, 而是昂首跨过去, “来哇,互相伤害哇”!
  • 直播是眼下最为火爆的行业,而弹幕无疑是直播平台中最流行、最重要的功能之一。本文将讲述如何实现兼容 PC 浏览器和移动浏览器的弹幕。基本功能并发与队列一般来说,弹幕数据会通过异步请求或 socket 消息传到前端,...
  • 直播是眼下最为火爆的行业,而弹幕无疑是直播平台中最流行、最重要的功能之一。本文将讲述如何实现兼容 PC 浏览器和移动浏览器的弹幕。基本功能并发与队列一般来说,弹幕数据会通过异步请求或 socket 消息传到前端,...
  • Android - 弹幕实现原理(附Demo源码)

    千次阅读 2018-05-30 15:11:39
    二、弹幕原理的简单解析 1.我们先来做些准备工作。 (1)我们可能会需要一个视频(我在这里找了一个mp4格式的视频,并放在了res/raw目录下面,因为音频和视频文件放在其它目录(例如assets资源目录)下会导致无法...
  • Barrage 弹幕实现原理

    千次阅读 2019-05-08 12:00:50
    给自己提出一个挑战。用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。 每个小程序都会给出详细的教程,保证每个新手都能看懂(不出意外的话每天都会更新) ...第七天、讲一下 弹幕 的实现原理。 ...
  • 冰冰B站视频弹幕爬取原理解析

    千次阅读 多人点赞 2021-01-05 23:21:22
    B站弹幕爬取原理解析 原理 概念 cid : 爬取弹幕需要的id号,可以由BV号通过API接口获得 步骤 视频链接:https://www.bilibili.com/video/BV1x54y1e7zf,得到BV号=BV1x54y1e7zf BV转cid 浏览器输入:...
  • 爬取Bilibili视频评论(弹幕同样原理)

    千次阅读 2019-12-04 11:16:44
    爬取Bilibili视频评论(弹幕同样原理) 找到B站的评论接口 F12,找到B站的评论接口 可以使用Postman等,请求接口,可以看到json串(这里我直接请求,闲的json串很乱) 格式化后的json串很清楚的看到结构 而我们最终...
  • js制作简易视频弹幕

    2020-12-09 14:31:59
    主体思路:简易弹幕原理就是将用户输入的文字存储到一个标签(我用的是span)里面,然后将其在页面的右侧弹出。 我们纵观各种直播平台的弹幕 整体布局 css样式就不写出来了毕竟每个人审美不同 需要注意的点有 1.弹幕...
  • iOS弹幕(源码)实现原理解析

    千次阅读 2016-07-20 15:47:50
    弹幕,国内流行于视频网站A站和B站。网上关于弹幕的实现方法有很多,目前Android平台已经有比较成熟的解决方案...本文将介绍弹幕的大致实现原理。 看过DanmakuFlameMaster源码的朋友都知道,弹幕
  • 最近做项目的时候需要实现弹幕这个功能, 虽然感觉实现起来也不是很复杂, 但是自己还是不想写, 因为毕竟现在视频app挺火的, 而且基本都有弹幕这个功能. 但在网上找时却发现没有太多可以选择的第三方, 所以最近写了个...
  • #mark ---滚动弹幕 列表中留有7条记录 大于7条时删除并指引表视图向上滑动 - (void)addRowActionWithContent:(NSString *)str { if (self.dataMutArray.count > 7) { [self.dataMutArray removeLastObject];...
  • EasyDanmaku一个方便简单的Android弹幕控件,顾名思义so easy。easydanmakueasydanmaku原理简单,纯java实现,方便修改和扩展;体积小,占用资源少,运行流畅,实测在同屏100个弹幕的情况下占的资源和B站的弹幕库...
  • 随着WEB2.0的流行,现在很多网站都流行使用“弹幕”这种形式来实现互动。弹幕(barrage),中文流行词语,原意指用大量或少量火炮...首先弹幕的后端其实说白了和公共聊天室的后端原理十分相似,都是一个客户端发送消息...
  • 先来一张效果图:实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在一条直线上,相互覆盖。平移代码如下:@overridevoid initState() {_...
  • 先来一张效果图:实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在一条直线上,相互覆盖。平移代码如下:@overridevoid initState() {_...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 198
精华内容 79
关键字:

弹幕原理