閑聊

人一旦運氣差，喝水都能噎著暂题。我又被發(fā)”畢業(yè)證“了移剪，??，對Ｐ秸摺Ｗ菘痢！沒有聽錯，發(fā)畢業(yè)證的當(dāng)天上午剛討論完需求攻人，中午吃完飯取试，正常去公司前面的小公園溜達(dá)，沒想到怀吻，從天而降的暗器打到我的手臂上瞬浓，我下意識一跺腳，發(fā)出一聲”我靠“蓬坡。原來是一口鳥屎猿棉。心里掐指一算，我這是要中獎屑咳？晚上下班一定買個彩票萨赁。

下午和設(shè)計正討論動畫如何做時，企業(yè)微信收到一個消息乔宿，咳咳位迂，龍哥來xxx會議室下。這時我才明白中午鳥屎的真正含義详瑞。心里發(fā)出一聲”我靠“掂林。從會議室出來才知道我解放了，在一分鐘后坝橡，我才知道整個團(tuán)隊都解放了泻帮。收拾東西就可以走了，這時我才明白中午鳥屎是讓我可以早點下班计寇，才可以趕上買彩票锣杂。要不然正常下班趕不上了。

需求

這兩天看不下去八股文番宁，就想先休息幾天追追劇元莫，打開騰訊視頻看看動漫，發(fā)現(xiàn)騰訊視頻的頂部banner效果滿新穎的蝶押，處于個人愛好踱蠢，就簡單實現(xiàn)了下這個效果，不過我在此基礎(chǔ)上加了一些修改棋电。自己也充當(dāng)一次產(chǎn)品經(jīng)理過把癮茎截，具體效果見效果圖。

效果

tx_banner.gif

實現(xiàn)

因為沒多少代碼赶盔，比較的簡單企锌，幾分鐘搞定，也懶得寫實現(xiàn)原理了于未，直接一把嗦上代碼撕攒。

直接定義一個widget陡鹃，啥玩意都放上。

/// 仿騰訊視頻Banner效果
/// 這里有一些區(qū)別打却，純屬個人覺得這樣更喜歡杉适，所以充當(dāng)了一下產(chǎn)品，修改了需求不同意見莫怪??
/// 區(qū)別1柳击、手勢滑動正經(jīng)半圓效果猿推，騰訊視頻是曲線，這里看個人喜好捌肴。
/// 區(qū)別2蹬叭、左滑和右滑圓弧效果和手勢方向一樣，騰訊視頻是相同方向都向右状知。
/// 區(qū)別3秽五、不管左滑右滑都是切換相同的下一個，騰訊視頻是不同的饥悴。
///
class TxBannerWidget extends StatefulWidget {
  const TxBannerWidget({
    super.key,
    required this.children,
  });

  final List<Widget> children;

  @override
  State<TxBannerWidget> createState() => _TxBannerWidgetState();
}

class _TxBannerWidgetState extends State<TxBannerWidget>
    with TickerProviderStateMixin {
  double _clipFraction = 0.0;
  double _clipFractionCache = 0.0;
  int currentIndex = 0;
  double? scale;
  Timer? _timer;
  late AnimationController _controller;
  late AnimationController _autoController;
  late Animation<double> _animation;

  List<Widget> get bannerWidgets {
    List<Widget> widgetList = [];
    int n = widget.children.length;
    int widgetIndex = currentIndex + n;
    while (widgetIndex >= currentIndex) {
      if (widgetIndex == currentIndex) {
        widgetList.add(
          ClipPath(
            clipper: BannerClipper(clipFraction: _clipFraction),
            child: widget.children[widgetIndex % n],
          ),
        );
      } else {
        widgetList.add(widget.children[widgetIndex % n]);
      }
      widgetIndex--;
    }

    return widgetList.toList();
  }

  @override
  void initState() {
    super.initState();
    // 手勢操作后動畫
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _animation = Tween<double>(begin: 1, end: 0.0).animate(_controller)
      ..addListener(() {
        setState(() {
          if (_clipFractionCache.abs() >= (scale ?? 0.5)) {
            if (_clipFractionCache > 0) {
              _clipFraction = _clipFractionCache +
                  ((1 + (scale ?? 0.5)) - _clipFractionCache) *
                      (1 - _animation.value);
            } else {
              _clipFraction = _clipFractionCache -
                  ((1 + (scale ?? 0.5)) - _clipFractionCache.abs()) *
                      (1 - _animation.value);
            }
          } else {
            _clipFraction = _clipFractionCache * _animation.value;
          }
        });
      })
      ..addStatusListener((status) {
        setState(() {
          if (status == AnimationStatus.completed && _clipFraction.abs() >= 1) {
            _clipFraction = 0.0;
            currentIndex = currentIndex + 1;
          }
        });
      });

    // 自動切換動畫
    _autoController = AnimationController(
      duration: const Duration(milliseconds: 500),
      lowerBound: 0.0,
      upperBound: (1 + (scale ?? 0.5)),
      vsync: this,
    )
      ..addListener(() {
        setState(() {
          _clipFraction = -_autoController.value;
        });
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _clipFraction = 0.0;
          currentIndex = currentIndex + 1;
        }
      });

    WidgetsBinding.instance.addPostFrameCallback((_) {
      _startAutoTimer();
    });
  }

  /// 開啟自動切換計時器
  void _startAutoTimer() {
    const duration = Duration(seconds: 3);
    _timer = Timer.periodic(duration, (Timer timer) {
      _clipFraction = 0.0;
      _autoController.reset();
      _autoController.forward();
    });
  }

  /// 停止自動切換計時器
  void _stopAutoTimer() {
    _timer?.cancel();
    _timer = null;
  }

  /// 開啟手勢抬起后動畫
  void _startAnimation() {
    _controller.reset();
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    _autoController.dispose();
    _stopAutoTimer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        scale = constraints.maxHeight / constraints.maxWidth;
        return GestureDetector(
          onHorizontalDragDown: (DragDownDetails details) {
            _clipFraction = 0.0;
            _stopAutoTimer();
          },
          onHorizontalDragUpdate: (DragUpdateDetails details) {
            setState(() {
              _clipFraction += details.delta.dx / context.size!.width;
              _clipFractionCache = _clipFraction;
            });
          },
          onHorizontalDragEnd: (DragEndDetails details) {
            _startAnimation();
            _startAutoTimer();
          },
          child: Stack(
            fit: StackFit.expand,
            children: [
              ...bannerWidgets,
              Positioned(
                left: 0,
                right: 0,
                bottom: 10,
                child: PointWidget(
                  index: currentIndex % widget.children.length,
                  max: widget.children.length,
                ),
              )
            ],
          ),
        );
      },
    );
  }
}

/// 自定義裁剪
class BannerClipper extends CustomClipper<Path> {
  final double clipFraction;

  BannerClipper({required this.clipFraction});

  @override
  Path getClip(Size size) {
    Path path = Path();
    if (clipFraction >= 0) {
      double width = size.width * clipFraction;
      path.moveTo(width, 0);
      path.lineTo(size.width, 0);
      path.lineTo(size.width, size.height);
      path.lineTo(width, size.height);
      path.arcTo(
        Rect.fromLTWH(width - size.height, 0, size.height, size.height),
        pi / 2,
        -pi,
        false,
      );
      path.close();
    } else {
      double width = size.width * (1 + clipFraction);
      path.moveTo(0, 0);
      path.lineTo(width, 0);
      path.arcTo(
        Rect.fromLTWH(width, 0, size.height, size.height),
        -pi / 2,
        -pi,
        false,
      );
      path.lineTo(width, size.height);
      path.lineTo(0, size.height);
      path.close();
    }
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

/// 游標(biāo)widget
class PointWidget extends StatelessWidget {
  const PointWidget({
    Key? key,
    required this.max,
    required this.index,
  }) : super(key: key);

  final int max;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [..._pointsWidget()],
    );
  }

  List<Widget> _pointsWidget() {
    List<Widget> points = [];
    for (int i = 0; i < max; i++) {
      points.add(Container(
        margin: const EdgeInsets.only(left: 4),
        width: 8,
        height: 8,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: index == i ? Colors.blue : Colors.white,
        ),
      ));
    }
    return points;
  }
}

使用

TxBannerWidget(
                  children: [
                    Image.asset(
                      ImageUtils.getImgPath("img1", format: "jpg"),
                      fit: BoxFit.fill,
                    ),
                    Image.asset(
                      ImageUtils.getImgPath("img2", format: "jpg"),
                      fit: BoxFit.fill,
                    ),
                    Image.asset(
                      ImageUtils.getImgPath("img3", format: "jpg"),
                      fit: BoxFit.fill,
                    ),
                    Image.asset(
                      ImageUtils.getImgPath("img4", format: "jpg"),
                      fit: BoxFit.fill,
                    ),
                  ],
                ),

好了就這樣吧坦喘，如有發(fā)現(xiàn)bug，自己慢慢修改下就行了西设，畢竟沒有項目使用過瓣铣，懶得寫結(jié)尾了，我去追劇了贷揽。

完整代碼見github搜索：flutter_xy