Flutter 实现虎牙/斗鱼 弹幕功能

 更新时间:2020年04月14日 08:36:43   作者:老孟程序员  
这篇文章主要介绍了Flutter 实现虎牙/斗鱼 弹幕功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

用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 实现虎牙斗鱼 弹幕内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android App中各种数据保存方式的使用实例总结

    Android App中各种数据保存方式的使用实例总结

    这篇文章主要介绍了Android App中各种数据保存方式的使用实例,列举了SharedPreferences接口、机身空间存储、SD卡存储和SQLite数据库四种方式的代码例子,需要的朋友可以参考下
    2016-04-04
  • Android编程实现图片的浏览、缩放、拖动和自动居中效果

    Android编程实现图片的浏览、缩放、拖动和自动居中效果

    这篇文章主要介绍了Android编程实现图片的浏览、缩放、拖动和自动居中效果,以具体实例形式分析了Android针对图片各种常见显示效果的布局及功能实现技巧,需要的朋友可以参考下
    2015-11-11
  • Flutter深色模式适配的实现

    Flutter深色模式适配的实现

    这篇文章主要介绍了Flutter深色模式适配的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Android 插件化处理方案详解

    Android 插件化处理方案详解

    这篇文章主要介绍了Android 插件化处理方案的相关资料,帮助大家更好的理解和学习使用Android开发,感兴趣的朋友可以了解下
    2021-04-04
  • Android编程实现TextView垂直自动滚动功能【附demo源码下载】

    Android编程实现TextView垂直自动滚动功能【附demo源码下载】

    这篇文章主要介绍了Android编程实现TextView垂直自动滚动功能,详细分析了Android TextView垂直自动滚动功能的实现步骤与布局、功能相关技巧,并附带了demo源码供读者下载,需要的朋友可以参考下
    2017-02-02
  • Android日期显示和日期选择库

    Android日期显示和日期选择库

    这篇文章主要为大家详细介绍了Android日期显示和日期选择库的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Android编程实现在底端显示选项卡的方法

    Android编程实现在底端显示选项卡的方法

    这篇文章主要介绍了Android编程实现在底端显示选项卡的方法,涉及Android界面线性布局、相对布局及选项卡设置相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • Android—基于微信开放平台v3SDK开发(微信支付填坑)

    Android—基于微信开放平台v3SDK开发(微信支付填坑)

    这篇文章主要介绍了Android—基于微信开放平台v3SDK开发(微信支付填坑),具有一定的参考价值,有需要的可以了解一下。
    2016-11-11
  • Android中没有插入SD情况下的文件写入和读取方法

    Android中没有插入SD情况下的文件写入和读取方法

    在Android开发时会遇到如下一种场合希望应用下载到当前应用的根目录下,而非SD卡中然后可以随时被该应用或其他应用访问这个文件,即具有被全局读取的权限
    2012-11-11
  • Android 8.0系统中应用图标的适配技巧

    Android 8.0系统中应用图标的适配技巧

    今天小编就为大家分享一篇关于Android 8.0系统中应用图标的适配技巧,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10

最新评论