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

先来一张效果图:

实现原理

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

@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),
);

效果如下:

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

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

效果如下:

给文字加个圆角背景:

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),
),
),
);

效果如下:

创建一个送火箭的弹幕:

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: <Widget>[
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),
),
],
),
),
);

效果如下:

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

其实实现弹幕效果没有我开始想的那么简单,过程中也遇到了一些问题,不过好在最终都解决了,献上Github地址:https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample

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

交流

Github地址:https://github.com/781238222/flutter-do

170+组件详细用法:http://laomengit.com

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

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

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

Flutter 实现虎牙/斗鱼 弹幕效果的更多相关文章

  1. Android弹幕功能实现,模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  2. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  3. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  4. Android 自定义View修炼-自定义弹幕效果View

    一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...

  5. Android:简单的弹幕效果达到

    首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...

  6. 【Python3爬虫】斗鱼弹幕爬虫

    在网上找到了一份斗鱼弹幕服务器第三方接入协议v1.6.2,有了第三方接口,做起来就容易多了. 一.协议分析 斗鱼后台协议头设计如下: 这里的消息长度是我们发送的数据部分的长度和头部的长度之和,两个消息 ...

  7. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  8. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  9. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

随机推荐

  1. mac笔记本编译go-ethereum报错CoreServices/CoreServices.h' file not found

    查看xcode是否安装: $ xcode-select --install xcode-select: error: command line tools are already installed, ...

  2. 为Python安装pip

    Python及操作系统的支持 Python 2.6, 2.7, 3.2, 3.3, 3.4 Unix/Linux, OS X, 以及 Windows   默认包含 Python 2.7.9 及以后的版 ...

  3. vue 模板 template init

    <template> <div> </div> </template> <script> export default { name: '模 ...

  4. 小程序中内容审核功能的使用(后台使用thinkPHP5.1)

    本文包含文本和图片的检测 //接收要检测的文本内容并调用检测方法 public function textCheck(Request $request){ //内容安全识别 $data['conten ...

  5. 在 macOS 下备份/还原/重置 LaunchPad 布局

    原文链接:https://billc.io/2019/07/launchpad-layout-backup/ 前几天升级到 Catalina Public Beta 后,LauchPad 会出现无法刷 ...

  6. C/C++、C#、JAVA(二):基本类型和转换操作

    基本类型和转换操作 数据类型 C语言中的基本类型如下. 类型 存储大小 值范围 char 1 字节 -128 到 127 或 0 到 255 unsigned char 1 字节 0 到 255 si ...

  7. CSS每日学习笔记(0)

    7.29.2019 1. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  8. webService-axis开发jar包

    开发最小jar包集: activation-1.1.jar axiom-api-1.2.13.jar axiom-dom-1.2.13.jar axiom-impl-1.2.13.jar axis2- ...

  9. 实用干货丨如何使用Prometheus配置自定义告警规则

    前 言 Prometheus是一个用于监控和告警的开源系统.一开始由Soundcloud开发,后来在2016年,它迁移到CNCF并且称为Kubernetes之后最流行的项目之一.从整个Linux服务器 ...

  10. 面试官再问我如何保证 RocketMQ 不丢失消息,这回我笑了!

    最近看了 @JavaGuide 发布的一篇『面试官问我如何保证Kafka不丢失消息?我哭了!』,这篇文章承接这个主题,来聊聊如何保证 RocketMQ 不丢失消息. 0x00. 消息的发送流程 一条消 ...