Flutter 实现虎牙/斗鱼弹幕效果

移动开发作者： 2024-08-25 11:40:02

老孟导读：用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,),);

创建一个送火箭的弹幕：

return Center(
  child: Container(
    padding: EdgeInsets.only(left: 10,child: Row(
      mainAxisSize: MainAxisSize.min,children: <Widget>[
        Text(
          text,Image.asset('assets/images/timg.jpeg',height: 30,width: 30,Text(
          'x $count',style: TextStyle(color: Colors.white,fontSize: 18),],);

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_68373.html

相关资讯： Flutter 实现虎牙/斗鱼弹幕效果