老孟导读:用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. def跨域+jwt

    1.跨域 由于浏览器具有“同源策略”的限制.如果在同一个域下发送ajax请求,浏览器的同源策略不会阻止.如果在不同域下发送ajax,浏览器的同源策略会阻止. 总结 域相同,永远不会存在跨域. crm, ...

  2. Python1-变量

    一.变量和简单数据类型 1.变量 命名规则: 变量名组成——字母.下划线.数字(不可做首字符): 用下划线分隔单词,不可包含空格: 关键字和函数名不可做变量名: 小写字母做变量名,不建议使用大小写的字 ...

  3. 解决unrecognized import path "xxx"

    $ export GOPROXY=https://goproxy.io 环境变量配置上面这句即可 https://goproxy.io 是一个goproxy.io这个开源项目提供的公开代理服务. 使用 ...

  4. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  5. 五分钟了解Semaphore

    一.前言 多个线程之间的同步,我们会用到Semaphore,翻译成中文就是信号量.使用Semaphore可以限制多个线程对同一资源的访问.我们先看下C#中对Semaphore的定义,如下图: 翻译成中 ...

  6. C++ 深拷贝和浅拷贝详解

    前言 在对象拷贝过程中,如果没有自定义拷贝构造函数,系统会提供一个缺省的拷贝构造函数,缺省的拷贝构造函数对于基本类型的成员变量,按字节复制,对于类类型成员变量,调用其相应类型的拷贝构造函数. 位拷贝( ...

  7. java 获取 list 集合获取指定的 字段 数组

    /** * * AdminEntity 管理员实体类 * getAdminId 获取管理员实体类中的id * */ @Testvoid adminIdList () { List<AdminEn ...

  8. 阿里云服务器安装Docker

    在阿里云服务器上安装Docker,服务器的系统是CentOS 7.6, 所以可以看官方Docker安装文档:https://docs.docker.com/install/linux/docker-c ...

  9. java基础-Map

    简介 Map是一种接口,实现类有 hashMap SortedMap是继承自Map的接口,实现类为TreeMap,在内部会对Key进行排序 遍历Map 使用for each循环遍历Map实例的keyS ...

  10. hdu2087kmp模板练习

    题目网址:http://icpc.njust.edu.cn/Problem/Hdu/2087/ 代码: #include<bits/stdc++.h> using namespace st ...