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:[ 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), ), ], ), ), );
效果如下:
火箭有点丑了,不过这不是重点。
以上就是关于Flutter如何实现虎牙/斗鱼弹幕功能的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
网站题目:Flutter如何实现虎牙/斗鱼弹幕功能
网址分享:http://myzitong.com/article/jpiogg.html