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

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

(0)

相关推荐

  • Flutter UI如何使用Provide实现主题切换详解

    背景 provide是谷歌官方出品的一个状态管理框架flutter-provide,它允许在小部件树中传递数据,它被设计为ScopedModel的替代品,允许我们更加灵活地处理数据类型和数据 为什么需要状态管理 在进行项目的开发时,我们往往需要管理不同页面之间的数据共享,在页面功能复杂,状态达到几十个上百个的时候,我们会难以清楚的维护我们的数据状态,本文将以主题切换这个功能使用状态管理来讲解如何在Flutter中使用provide这个状态管理框架 为什么选择Provide 一开始项目使用的是Sc

  • Flutter实现webview与原生组件组合滑动的示例代码

    最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 . ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题. 找到支持与本地组件共存的webview控件 找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:

  • Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

  • flutter PageView实现左右滑动切换视图

    本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码,供大家参考,具体内容如下 import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/

  • Flutter pageview切换指示器的实现代码

    PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 在 PageView 里有三个构造函数: PageView - 创建一个可滚动列表. PageView.builder - 创建一个滚动列表,指定数量. PageView.custom - 创建一个可滚动的列表,自定义子项. 效果 代码 // Copyright 2017, the Flutter project authors. Please see the AUTHORS file // for de

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

    前言 这一段时间,Flutter的势头是越来越猛了,作为一个Android程序猿,我自然也是想要赶紧尝试一把.在学习到动画的这部分后,为了加深对Flutter动画实现的理解,我决定把之前写的一个卡片切换效果的开源小项目,用Flutter"翻译"一遍. 废话不多说,先来看看效果吧: Android iOS Github地址:https://github.com/BakerJQ/Flutter-InfiniteCards 思路 首先,关于卡片的层叠效果,在原Android项目中,是通过Sc

  • Android可自定义神奇动效的卡片切换视图实例

    前言 面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,what are you 弄啥咧?! "哥哥我做不到啊.....啊.....呸",做为一名有节操的程序猿,自然是不能说出这么没有出息的话,哥就满足你们,于是,出了个可自定义动效的卡片切换视图,效果如下所示 思路 首先,要展示出卡片层叠的视觉效果.在这里,我们通过方块的缩放大小差异以及在Y方向上的位置差异,来展现这种视觉效

  • Flutter使用AnimatedBuilder实现动效复用

    目录 前言 AnimatedBuilder 介绍 Transform 组件介绍 应用 总结 前言 我们之前讲述了动画构建的两种方式,Animation 和 AnimationWidget,这两种构建动画都是将组件和动画一起完成的.有些时候,我们只是想动效复用,而不关心组件构建,这个时候就可以使用 AnimatedBuilder 了. AnimatedBuilder 介绍 根据官方文档说明,AnimatedBuilder 的使用要点如下: An AnimatedBuilder understand

  • 基于Flutter实现转场动效的示例代码

    目录 前言 CupertinoFullscreenDialogTransition CupertinoPageTransition DecoratedBoxTransition FadeTransition PositionedTransition RotationTransition ScaleTransition SizeTransition SlideTransition 前言 动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,Flutter 提供了 Transi

  • vue自定义js图片碎片轮播图切换效果的实现代码

    定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参

  • Django自定义全局403、404、500错误页面的示例代码

    自定义模板 403 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>403-禁止访问</title> </head> <body> HTTP 403 - 禁止访问 </body> </html> 404 <!DOCTYPE html> <h

  • js实现鼠标移入移出卡片切换内容

    本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码,供大家参考,具体内容如下 案例动态效果图: html代码: <div class="sports-purple"> <div class="all"> <!-- 内容 --> <div class="content"> <div class="first-block"> <!-- 内容的侧边栏 --

  • 详解Flutter如何绘制曲线,折线图及波浪动效

    目录 正弦曲线绘制 波浪动效 曲线绘制 折线图 其他说明 总结 简介 上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状.本篇我们来介绍线条类图形的绘制,并且结合 Animation 实现了常见的波浪动效.通过本篇,你可以了解到: 正弦曲线的绘制 利用两条正弦曲线加上 Animation 实现波浪动效 曲线的一般绘制方法 折线图绘制 下面是最终实现的效果图,接下来我们一项

  • 基于three.js实现的3D粒子动效实例代码

    一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单个的运动,模拟出现真实的效果.three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作. (注:本文使用的关于three.js的API都是基于版本r98的.) 二.实现步骤 1. 创建渲染场景

随机推荐