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

移动开发 得得之家
这篇文章主要介绍了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由构造方法传入


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

Helper在initState中进行构建，并初始化，同时将Helper绑定给Controller：


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

而build过程中，则通过Helper返回具体的Widget列表，而Stack则是为了实现层叠效果。


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

如此，基本的初始化等操作就算是完成了。下面我们来看看Controller和Helper都是怎么工作的。

Controller

我们先来看看Controller所包含的内容：


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基本上就是作为参数配置器和Helper的方法代理的存在。由此童鞋们肯定就知道了，对于动效的自定义和动效的触发等操作，都是通过Controller来完成，demo如下：


//构建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();

关于具体的自定义，我们稍后再聊，咱们先来看看Helper。

Helper

Helper是整个动画效果实现的核心类，我们先看几个它所包含的核心成员：


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

现在我们来看看，如果要触发一个切换动画，这些成员是如何相互配合的。

当选中一张卡片进行切换时，这张卡片就是需要向前切换的卡片（ToFront），而第一张卡片，就是需要向后切换的卡片（ToBack）。


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

由于设置了AnimationListener，在动画过程中，setState就会被调用，如此就会触发Widget的build，从而触发Helper的getCardList方法。我们来看看在切换动画的过程中，是如何返回卡片Widget列表的。


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();
}

如上代码所示，先进行动画处理，后根据zIndex进行排序，因为要保证在前面的后渲染。

而动画是如何处理的呢，以切换到前面的卡片为例：


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);
 }

原来，正是在这一步，Helper通过Controller中配置的自定义动画方法，得到了卡片的Widget。

由此，动画展示的基本流程就描述完了，下面我们进入最关键的部分--如何自定义动画。

自定义动画

我们以通用动画为例，来看看自定义动画的主要流程。

首先，AnimTransform为如下方法的定义：


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

该方法返回的是一个Transform，专门用于处理视图变换的Widget，而我们要做的，就是根据传入的参数，构建相应系数下的Widget。以DefaultCommonTransform为例：


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,
  ),
 );
}

对于向第一位移动的选中卡片，也是同理，只不过是根据该卡片对应的转换器来进行自定义动画的转换。

最后的效果，就像演示图中第一次点击，图片向前翻转到第一位的效果一样。

总结

由于Flutter采用的是声明式的视图构建方式，在编码初期，多少会受到原生编码方式的思维影响，而觉得很难受。但是在熟悉了之后，就会发现其实很多思想都是共通的，比如Animation，比如插值器的概念等等。

另外，研读源码仍然是最有效的解决问题的方式，比如相比Android中直接对ScrollView进行animateTo操作，在Flutter中需要通过ScrollController进行animateTo操作，正是这一点让我找到了在Flutter中实现InfiniteCards效果的方法。

更具体的Demo请前往Github的Flutter-InfiniteCards Repo，欢迎大家star和提issue。

再次贴一下Github地址：https://github.com/BakerJQ/Flutter-InfiniteCards

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持得得之家。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

Flutter启动流程的深入解析
这篇文章主要给大家介绍了关于Flutter启动流程的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter启动页(闪屏页)的具体实现及原理详析
这篇文章主要给大家介绍了关于Flutter启动页(闪屏页)的具体实现及原理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter调用Android和iOS原生代码的方法示例
这篇文章主要给大家介绍了关于Flutter调用Android和iOS原生代码的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
你必须掌握在Flutter中添加资源文件的方法
这篇文章主要介绍了你必须掌握在Flutter中添加资源文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flutter开发之Widget自定义总结
这篇文章主要给大家介绍了关于Flutter开发中Widget自定义的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter学习之构建、布局及绘制三部曲
这篇文章主要给大家介绍了关于Flutter学习之构建、布局及绘制三部曲的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式