フラッターはタイガートゥース/ベタフィッシュ弾幕効果を達成

Lao Mengのガイド：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コミュニケーショングループ（WeChat：laomengit）へようこそ。

同時に、Flutter公開番号の関連コンテンツの最初の問題である私のFlutter公開番号[Lao Mengプログラマー]に注意を払うことを歓迎します。

Flutterの生態学的構造は、あなたと彼と切り離せないものです。これには、みんなの共同の努力が必要です。いいねもその1つです。記事が役に立てば、気に入ってほしいと思います。