基于Animation实现视频弹幕动效

封装弹幕动效

barrage_transition.dart

/// 弹幕移动动效
class BarrageTransition extends StatefulWidget {
  final Widget child;

  // 动画播放时长
  final Duration duration;

  // 动画播放结束回调
  final ValueChanged onComplete;

  const BarrageTransition({Key key, this.child, this.duration, this.onComplete})
      : super(key: key);

  @override
  BarrageTransitionState createState() => BarrageTransitionState();
}

class BarrageTransitionState extends State<BarrageTransition>
    with SingleTickerProviderStateMixin {
  
  // 动画播放控制
  AnimationController _animationController;
  // 动画
  Animation<Offset> _animation;

  @override
  void initState() {
    super.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
    _animation = Tween(begin: begin, end: end).animate(_animationController);
    // 执行动画
    _animationController.forward();
  }

  /// 进行资源的释放
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: widget.child,
    );
  }
}

实现弹幕播放

barrage_item.dart

/// 弹幕Widget
class BarrageItem extends StatelessWidget {
  final String id;
  final double top;
  final Widget child;
  final ValueChanged onComplete;
  final Duration duration;

  BarrageItem(
      {Key key,
      this.id,
      this.top,
      this.child,
      this.onComplete,
      this.duration = const Duration(milliseconds: 9000)})
      : super(key: key);

  // fix 动画状态错乱
  var _key = GlobalKey<BarrageTransitionState>();

  @override
  Widget build(BuildContext context) {
    return Positioned.fill(
      top: top,
      child: BarrageTransition(
        key: _key,
        child: child,
        onComplete: (v) {
          // 播放结束
          onComplete(id);
        },
        // 播放时长
        duration: duration,
      ),
    );
  }
}