专栏首页FlutterFlutter 实现虎牙/斗鱼 弹幕效果

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

本文分享自微信公众号 - 老孟Flutter(lao_meng_qd),作者:老孟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 实战】各种各样形状的组件

    BorderDirectional和Border基本一样,区别就是BorderDirectional带有阅读方向,大部分国家阅读是从左到右,但有的国家是从右到左...

    老孟Flutter
  • Flutter 日期时间选择类控件及国际化

    Flutter并没有DatePicker这个控件,需要使用showDatePicker方法弹出日期选择控件,基本用法如下:

    老孟Flutter
  • 【Flutter实战】六大布局组件

    老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column )、叠加布局组件( Stack 和 IndexedStack )、流式布...

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

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

    砸漏
  • 针对网站可用性检测工具uptime改造并支持Docker

    针对中小型公司,如果没有自己的运维开发或者不想花钱购买域名、关键URL监控工具,此工具可以满足百分之八十的url监控场景需求

    追马
  • 【2015-9-6学习笔记】贝叶斯统计和金融市场

    上午上了四节课,全是《贝叶斯统计》,贝叶斯学派和频率学派一直论战不断,焦点就在于先验分布的问题,百度百科有云:先验分布是总体分布参数θ的一个概率分布。贝叶斯学派...

    统计学家
  • kettle学习笔记(四)——kettle输入步骤

        • 生成记录/自定义常量     • 获取系统信息     • 表输入     • 文本文件输入     • XML 文件输入     • Json输入...

    HUC思梦
  • 使用 fyne 编写一个计算器程序

    在上一篇文章中,我们介绍了一个 Go 的高颜值 GUI 库fyne。本文接着上一篇,介绍如何使用fyne编写一个简单的计算器程序。程序效果如下:

    用户7731323
  • Go语言Goroutine与Channel内存模型

    Go语言内存模型规定了在一个goroutine中一个变量的读取的情况下,确保能够观察到在其他另外goroutine中写入同样变量的值。也就是说,如果在多个gor...

    李海彬
  • Go语言Goroutine与Channel内存模型

    Go语言内存模型规定了在一个goroutine中一个变量的读取的情况下,确保能够观察到在其他另外goroutine中写入同样变量的值。也就是说,如果在多个gor...

    李海彬

扫码关注云+社区

领取腾讯云代金券