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

前言

这一段时间，Flutter的势头是越来越猛了，作为一个Android程序猿，我自然也是想要赶紧尝试一把。在学习到动画的这部分后，为了加深对Flutter动画实现的理解，我决定把之前写的一个卡片切换效果的开源小项目，用Flutter“翻译”一遍。

废话不多说，先来看看效果吧：

Android	iOS

Github地址：https://github.com/BakerJQ/Flutter-InfiniteCards

思路

首先，关于卡片的层叠效果，在原Android项目中，是通过Scale差异以及TranslationY来体现的，Flutter可以继续采用这种方式。

其次，对于自定义卡片的内容，原Android项目是通过Adapter实现，对于Flutter，则可以采用IndexedWidgetBuilder实现。

最后，就是自定义动效的实现，原Android项目是通过一个0到1的ValueAnimator来定义动画的展示过程，而Flutter中，正好有与之对应的Animation和AnimationController，如此我们就可以直接自定义一个动画过程中，具体的视图展示方式。

组件总览

由于卡片视图需要根据动画情况进行渲染，所以显然是一个StatefulWidget。

同时，我们给出三种基本的动画模式：

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

并通过Helper和Controller来处理所有的动画逻辑

其中Controller由构造方法传入