Flutter 72: 图解极简自定义跑马灯 ACEMarquee

  1. 云栖社区>
  2. 博客>
  3. 正文

Flutter 72: 图解极简自定义跑马灯 ACEMarquee

阿策~ 2019-12-26 20:28:59 浏览255
展开阅读全文

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

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

  1. 跑马灯各 item 不唯一,可根据需求自定义;
  2. 跑马灯动画效果,进入时和退出时动画相反,整体形成一个无限循环;
  3. 跑马灯各 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 外层嵌套了一层带有 KeyContainer,保证每个 itemKey 值 不同;否则 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 跑马灯还很不成熟,动画简单,如有错误请多多指导!

来源: 阿策小和尚

网友评论

登录后评论
0/500
评论