Flutter自定义实现神奇动效的卡片切换视图的示例代码

enum AnimType {
 TO_FRONT,//被选中的卡片通过自定义动效移至第一，其他的卡片通过通用动效补位
 SWITCH,//选中的卡片和第一张卡片互换位置，并都是自定义动效
 TO_END,//第一张图片通过自定义动效移至最后，其他卡片通过通用动效补位
}

InfiniteCards({
 @required this.controller,
 this.width,
 this.height,
 this.background,
});

@override
void initState() {
 ...
 _helper = AnimHelper(
   controller: widget.controller,
   //传入动画更新监听，动画时调用setState进行实时渲染
   listenerForSetState: () {
    setState(() {});
   });
 _helper.init(this, context);
 if (widget.controller != null) {
   widget.controller.animHelper = _helper;
 }
}

Widget build(BuildContext context) {
 ...
 return Container(
  ...
  child: Stack(
   children: _helper.getCardList(_width, _height),
  ),
 );
}

class InfiniteCardsController {
 //卡片构造器
 IndexedWidgetBuilder _itemBuilder;
 //卡片个数
 int _itemCount;
 //动画时长
 Duration _animDuration;
 //点击卡片是否触发切换动画
 bool _clickItemToSwitch;
 //动画Transform
 AnimTransform _transformToFront,_transformToBack,...;
 //排序Transform
 ZIndexTransform _zIndexTransformCommon,...;
 //动画类型
 AnimType _animType;
 //曲线定义（类Android插值器）
 Curve _curve;
 //helper
 AnimHelper _animHelper;
 ...
 void anim(int index) {
  _animHelper.anim(index);
 }
 void reset(...) {
  ...
  //重设各参数
  setControllerParams();
  _animHelper.reset(); 
  ...
 }
}

//构建Controller
_controller = InfiniteCardsController(
 itemBuilder: _renderItem,
 itemCount: 5,
 animType: AnimType.SWITCH,
);
//调用reset
_controller.reset(
 itemCount: 4,
 animType: AnimType.TO_FRONT,
 transformToBack: _customToBackTransform,
);
//调用展示下一张卡片动画
_controller.reset(animType: AnimType.TO_END);
_controller.next();

class AnimHelper {
 final InfiniteCardsController controller;
 //切换动画
 AnimationController _animationController;
 Animation<double> _animation;
 //卡片列表
 List<CardItem> _cardList = new List();
 //需要向后切换的卡片，和需要向前切换的卡片
 CardItem _cardToBack, _cardToFront;
 //需要向后切换的卡片位置，和需要向前切换的卡片位置
 int _positionToBack, _positionToFront;
}

void _cardAnim(int index, CardItem card) {
 //记录要切换的卡片
 _cardToFront = card;
 _cardToBack = _cardList[0];
 _positionToBack = 0;
 _positionToFront = index;
 //触发动画
 _animationController.forward(from: 0.0);
}

List<Widget> getCardList(double width, double height) {
 for (int i = 0; i < controller.itemCount; i++) {
  ...
  if (_isSwitchAnim) {
   //处理切换动画
   _switchTransform(width, height, i);
  }
  ...
 }
 //根据zIndex进行排序渲染
 List<CardItem> copy = List.from(_cardList);
 copy.sort((card1, card2) {
  return card1.zIndex < card2.zIndex ? 1 : -1;
 });
 return copy.map((card) {
  return card.transformWidget;
 }).toList();
}

void _toFrontTransform(double width, double height, int fromPosition, int toPosition) {
  CardItem cardItem = _cardList[fromPosition];
  controller.zIndexTransformToFront(
    cardItem, _animation.value,
    _getCurveValue(_animation.value),
    width, height, fromPosition, toPosition);
  cardItem.transformWidget = controller.transformToFront(
    cardItem.widget, _animation.value,
    _getCurveValue(_animation.value),
    width, height, fromPosition, toPosition);
 }

typedef AnimTransform = Transform Function(
  Widget item,//卡片原始Widget
  double fraction,//动画执行的系数
  double curveFraction,//曲线转换后的系数
  double cardHeight,//整体高度
  double cardWidth,//整体宽度
  int fromPosition,//卡片开始位置
  int toPosition);//卡片要移动到的位置

Transform _defaultCommonTransform(Widget item, 
  double fraction, double curveFraction, double cardHeight, double cardWidth, int fromPosition, int toPosition) 
 //需要跨越的卡片数量{
 int positionCount = fromPosition - toPosition;
 //以0.8做为第一张的缩放尺寸，每向后一张缩小0.1
 //(0.8 - 0.1 * fromPosition) = 当前位置的缩放尺寸
 //(0.1 * fraction * positionCount) = 移动过程中需要改变的缩放尺寸 
 double scale = (0.8 - 0.1 * fromPosition) + (0.1 * fraction * positionCount);
 //在Y方向的偏移量，每向后一张，向上偏移卡片宽度的0.02
 //-cardHeight * (0.8 - scale) * 0.5 对卡片做整体居中处理
 double translationY = -cardHeight * (0.8 - scale) * 0.5 -
   cardHeight * (0.02 * fromPosition - 0.02 * fraction * positionCount);
 //返回缩放后，进行Y方向偏移的Widget
 return Transform.translate(
  offset: Offset(0, translationY),
  child: Transform.scale(
   scale: scale,
   child: item,
  ),
 );
}