【Flutter 专题】72 图解极简自定义跑马灯 ACEMarquee

关注

发布于: 1 小时前

小菜上周学习了 AnimatedSwitcher 隐式动画，发觉 AnimatedSwitcher 简单而强大，可以用作自定义跑马灯或无限轮播的 Banner，小菜今天以 AnimatedSwitcher 为基础尝试一个极简跑马灯 ACEMarquee；

实现跑马灯效果主要是处理如下几点：

跑马灯各 item 不唯一，可根据需求自定义；
跑马灯动画效果，进入时和退出时动画相反，整体形成一个无限循环；
跑马灯各 item 添加点击回调事件；

源码分析

ACEMarquee(    {Key key,    @required this.children,    // 跑马灯展示 item    this.duration,              // 动画时长    this.direction,             // 动画方向    this.onItemTap});           // item 点击回调

复制代码

小菜自定义的跑马灯参数简单，其中 direction 为动画方向，分别为 AxisDirection.left 右进左出 / AxisDirection.right 左进右出 / AxisDirection.up 下进上出 / AxisDirection.down 上进下出；

案例尝试

1. 自定义 item

依据日常需求，跑马灯过程中，item 可能会有差异，小菜采用的是 AnimatedSwitcher 方式，可以让用户随意传递 item Widget；其中需要注意的是小菜将用户传递的 item 外层嵌套了一层带有 Key 的 Container，保证每个 item 的 Key 值 不同；否则 AnimatedSwitcher 动画不能正常执行；

Widget _itemWid(direction) {  if (_children != null) {    _children.clear();  }  for (int i = 0; i < widget.children.length; i++) {    _children.add(Container(key: ValueKey<int>(i), child: widget.children[i]));  }  return SizedBox(      child: AnimatedSwitcher(          duration: widget.duration ?? Duration(milliseconds: 1500),          child: _children[_index]));}
return Container(    child: ACEMarquee(children: <Widget>[      Container(height: 100, color: Colors.orange.withOpacity(0.4)),      Container(height: 100, color: Colors.purpleAccent.withOpacity(0.4)),      Container(height: 100, color: Colors.redAccent.withOpacity(0.4)),      Container(height: 100, color: Colors.blueGrey.withOpacity(0.4))    ], duration: Duration(milliseconds: 2000)));

复制代码

2. 循环动画

小菜通过设置 transitionBuilder 改变平移动画进入和退出方向，刚开始尝试时小菜通过设置 SlideTransition 的 (animation.status == AnimationStatus.dismissed) 进行区分，但是在 setState 之后动画会重新进入，导致不连贯；之后小菜通过继承 AnimatedWidget 并设置 (position.status == AnimationStatus.reverse) 进行入场和出场动画区分；

小菜在测试过程中发现 AnimatedSwitcher 动画过程中在动画过程中入场动画和出场动画均会完全展示，小菜灵机一动通过 ClipRRect 只是展示中间固定大小 AnimatedSwitcher；

class ACEMarqueeTransition extends AnimatedWidget {  final bool transformHitTests;  final Widget child;
  //退场（出）方向  final AxisDirection direction;  Tween<Offset> _tween;
  ACEMarqueeTransition({    Key key,    @required Animation<double> position,    this.transformHitTests = true,    this.direction = AxisDirection.down,    this.child,  })  : assert(position != null),        super(key: key, listenable: position) {    // 偏移在内部处理    switch (direction) {      case AxisDirection.up:        _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));        break;      case AxisDirection.right:        _tween = Tween(begin: Offset(-1, 0), end: Offset(0, 0));        break;      case AxisDirection.down:        _tween = Tween(begin: Offset(0, -1), end: Offset(0, 0));        break;      case AxisDirection.left:        _tween = Tween(begin: Offset(1, 0), end: Offset(0, 0));        break;    }  }
  Animation<double> get position => listenable;
  @override  Widget build(BuildContext context) {    Offset offset = _tween.evaluate(position);    if (position.status == AnimationStatus.reverse) {      switch (direction) {        case AxisDirection.up:          offset = Offset(offset.dx, -offset.dy);          break;        case AxisDirection.right:          offset = Offset(-offset.dx, offset.dy);          break;        case AxisDirection.down:          offset = Offset(offset.dx, -offset.dy);          break;        case AxisDirection.left:          offset = Offset(-offset.dx, offset.dy);          break;      }    }    return FractionalTranslation(        translation: offset,        transformHitTests: transformHitTests,        child: child);  }}

复制代码

3. 添加点击回调

跑马灯在动画过程中允许用户随意点击，包括滑动一部分时，前后两个 item 均可正常点击，小菜添加了 onItemTap Function 监听；

Widget _itemWid(direction) {  if (_children != null) {    _children.clear();  }  for (int i = 0; i < widget.children.length; i++) {    _children.add(Container(        key: ValueKey<int>(i),        child: GestureDetector(            child: widget.children[I],            onTap: () => widget.onItemTap != null ? widget.onItemTap(i) : null)));  }  return ClipRRect(      borderRadius: BorderRadius.all(Radius.circular(1.0)),      child: SizedBox(          child: AnimatedSwitcher(              duration: widget.duration ?? Duration(milliseconds: 1500),              child: _children[_index],              transitionBuilder: (Widget child, Animation<double> animation) {                return ACEMarqueeTransition(                    child: child,                    direction: widget.direction,                    position: animation);              })));}

复制代码

ACEMarquee 源码

小菜自定义的 ACEMarquee 跑马灯还很不成熟，动画简单，如有错误请多多指导！

来源：阿策小和尚

发布于: 1 小时前阅读数: 2

原文链接:【http://xie.infoq.cn/article/3bda41925b6ef71cc078e912b】。文章转载请联系作者。

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

发布

暂无评论

创作场景

【Flutter 专题】72 图解极简自定义跑马灯 ACEMarquee

源码分析

案例尝试

1. 自定义 item

2. 循环动画

3. 添加点击回调

阿策小和尚

评论