【Flutter 专题】72 图解极简自定义跑马灯 ACEMarquee
【Flutter 专题】72 图解极简自定义跑马灯 ACEMarquee
和尚上周学习了 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 跑马灯还很不成熟，动画简单，如有错误请多多指导！