Flutter自定義實(shí)現(xiàn)神奇動效的卡片切換視圖的示例代碼
前言
這一段時(shí)間，F(xiàn)lutter的勢頭是越來越猛了，作為一個(gè)Android程序猿，我自然也是想要趕緊嘗試一把。在學(xué)習(xí)到動畫的這部分后，為了加深對Flutter動畫實(shí)現(xiàn)的理解，我決定把之前寫的一個(gè)卡片切換效果的開源小項(xiàng)目，用Flutter“翻譯”一遍。
廢話不多說，先來看看效果吧：
iOS
Github地址：https://github.com/BakerJQ/Flutter-InfiniteCards
思路
首先，關(guān)于卡片的層疊效果，在原Android項(xiàng)目中，是通過Scale差異以及TranslationY來體現(xiàn)的，F(xiàn)lutter可以繼續(xù)采用這種方式。
其次，對于自定義卡片的內(nèi)容，原Android項(xiàng)目是通過Adapter實(shí)現(xiàn)，對于Flutter，則可以采用IndexedWidgetBuilder實(shí)現(xiàn)。
最后，就是自定義動效的實(shí)現(xiàn)，原Android項(xiàng)目是通過一個(gè)0到1的ValueAnimator來定義動畫的展示過程，而Flutter中，正好有與之對應(yīng)的Animation和AnimationController，如此我們就可以直接自定義一個(gè)動畫過程中，具體的視圖展示方式。
組件總覽
由于卡片視圖需要根據(jù)動畫情況進(jìn)行渲染，所以顯然是一個(gè)StatefulWidget。
同時(shí)，我們給出三種基本的動畫模式：
enum AnimType {
TO_FRONT,//被選中的卡片通過自定義動效移至第一，其他的卡片通過通用動效補(bǔ)位
SWITCH,//選中的卡片和第一張卡片互換位置，并都是自定義動效
TO_END,//第一張圖片通過自定義動效移至最后，其他卡片通過通用動效補(bǔ)位
}
并通過Helper和Controller來處理所有的動畫邏輯
其中Controller由構(gòu)造方法傳入
InfiniteCards({
@required this.controller,
this.width,
this.height,
this.background,
});
Helper在initState中進(jìn)行構(gòu)建，并初始化，同時(shí)將Helper綁定給Controller：
@override
void initState() {
...
_helper = AnimHelper(
controller: widget.controller,
//傳入動畫更新監(jiān)聽，動畫時(shí)調(diào)用setState進(jìn)行實(shí)時(shí)渲染
listenerForSetState: () {
setState(() {});
});
_helper.init(this, context);
if (widget.controller != null) {
widget.controller.animHelper = _helper;
}
}
而build過程中，則通過Helper返回具體的Widget列表，而Stack則是為了實(shí)現(xiàn)層疊效果。
Widget build(BuildContext context) {
...
return Container(
...
child: Stack(
children: _helper.getCardList(_width, _height),
),
);
}
如此，基本的初始化等操作就算是完成了。下面我們來看看Controller和Helper都是怎么工作的。
Controller
我們先來看看Controller所包含的內(nèi)容：
class InfiniteCardsController {
//卡片構(gòu)造器
IndexedWidgetBuilder _itemBuilder;
//卡片個(gè)數(shù)
int _itemCount;
//動畫時(shí)長
Duration _animDuration;
//點(diǎn)擊卡片是否觸發(fā)切換動畫
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(...) {
...
//重設(shè)各參數(shù)
setControllerParams();
_animHelper.reset();
...
}
}
由此可以看到，Controller基本上就是作為參數(shù)配置器和Helper的方法代理的存在。由此童鞋們肯定就知道了，對于動效的自定義和動效的觸發(fā)等操作，都是通過Controller來完成，demo如下：
//構(gòu)建Controller _controller = InfiniteCardsController( itemBuilder: _renderItem, itemCount: 5, animType: AnimType.SWITCH, ); //調(diào)用reset _controller.reset( itemCount: 4, animType: AnimType.TO_FRONT, transformToBack: _customToBackTransform, ); //調(diào)用展示下一張卡片動畫 _controller.reset(animType: AnimType.TO_END); _controller.next();
關(guān)于具體的自定義，我們稍后再聊，咱們先來看看Helper。
Helper
Helper是整個(gè)動畫效果實(shí)現(xiàn)的核心類，我們先看幾個(gè)它所包含的核心成員：
class AnimHelper {
final InfiniteCardsController controller;
//切換動畫
AnimationController _animationController;
Animation<double> _animation;
//卡片列表
List<CardItem> _cardList = new List();
//需要向后切換的卡片，和需要向前切換的卡片
CardItem _cardToBack, _cardToFront;
//需要向后切換的卡片位置，和需要向前切換的卡片位置
int _positionToBack, _positionToFront;
}
現(xiàn)在我們來看看，如果要觸發(fā)一個(gè)切換動畫，這些成員是如何相互配合的。
當(dāng)選中一張卡片進(jìn)行切換時(shí)，這張卡片就是需要向前切換的卡片（ToFront），而第一張卡片，就是需要向后切換的卡片（ToBack）。
void _cardAnim(int index, CardItem card) {
//記錄要切換的卡片
_cardToFront = card;
_cardToBack = _cardList[0];
_positionToBack = 0;
_positionToFront = index;
//觸發(fā)動畫
_animationController.forward(from: 0.0);
}
由于設(shè)置了AnimationListener，在動畫過程中，setState就會被調(diào)用，如此就會觸發(fā)Widget的build，從而觸發(fā)Helper的getCardList方法。我們來看看在切換動畫的過程中，是如何返回卡片Widget列表的。
List<Widget> getCardList(double width, double height) {
for (int i = 0; i < controller.itemCount; i++) {
...
if (_isSwitchAnim) {
//處理切換動畫
_switchTransform(width, height, i);
}
...
}
//根據(jù)zIndex進(jìn)行排序渲染
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();
}
如上代碼所示，先進(jìn)行動畫處理，后根據(jù)zIndex進(jìn)行排序，因?yàn)橐ＷC在前面的后渲染。
而動畫是如何處理的呢，以切換到前面的卡片為例：
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。
由此，動畫展示的基本流程就描述完了，下面我們進(jìn)入最關(guān)鍵的部分--如何自定義動畫。
自定義動畫
我們以通用動畫為例，來看看自定義動畫的主要流程。
首先，AnimTransform為如下方法的定義：
typedef AnimTransform = Transform Function( Widget item,//卡片原始Widget double fraction,//動畫執(zhí)行的系數(shù) double curveFraction,//曲線轉(zhuǎn)換后的系數(shù) double cardHeight,//整體高度 double cardWidth,//整體寬度 int fromPosition,//卡片開始位置 int toPosition);//卡片要移動到的位置
該方法返回的是一個(gè)Transform，專門用于處理視圖變換的Widget，而我們要做的，就是根據(jù)傳入的參數(shù)，構(gòu)建相應(yīng)系數(shù)下的Widget。以DefaultCommonTransform為例：
Transform _defaultCommonTransform(Widget item,
double fraction, double curveFraction, double cardHeight, double cardWidth, int fromPosition, int toPosition)
//需要跨越的卡片數(shù)量{
int positionCount = fromPosition - toPosition;
//以0.8做為第一張的縮放尺寸，每向后一張縮小0.1
//(0.8 - 0.1 * fromPosition) = 當(dāng)前位置的縮放尺寸
//(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);
//返回縮放后，進(jìn)行Y方向偏移的Widget
return Transform.translate(
offset: Offset(0, translationY),
child: Transform.scale(
scale: scale,
child: item,
),
);
}
對于向第一位移動的選中卡片，也是同理，只不過是根據(jù)該卡片對應(yīng)的轉(zhuǎn)換器來進(jìn)行自定義動畫的轉(zhuǎn)換。
最后的效果，就像演示圖中第一次點(diǎn)擊，圖片向前翻轉(zhuǎn)到第一位的效果一樣。
總結(jié)
由于Flutter采用的是聲明式的視圖構(gòu)建方式，在編碼初期，多少會受到原生編碼方式的思維影響，而覺得很難受。但是在熟悉了之后，就會發(fā)現(xiàn)其實(shí)很多思想都是共通的，比如Animation，比如插值器的概念等等。
另外，研讀源碼仍然是最有效的解決問題的方式，比如相比Android中直接對ScrollView進(jìn)行animateTo操作，在Flutter中需要通過ScrollController進(jìn)行animateTo操作，正是這一點(diǎn)讓我找到了在Flutter中實(shí)現(xiàn)InfiniteCards效果的方法。
更具體的Demo請前往Github的Flutter-InfiniteCards Repo，歡迎大家star和提issue。
再次貼一下Github地址：https://github.com/BakerJQ/Flutter-InfiniteCards
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android消息個(gè)數(shù)提醒控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
支付寶咻一咻怎么用 Android幫你實(shí)現(xiàn)咻一咻
Android幫你實(shí)現(xiàn)咻一咻，這篇文章主要為大家介紹了支付寶咻一咻的幾種思路，感興趣的朋友可以參考一下2016-02-02
Android 逐幀動畫創(chuàng)建實(shí)例詳解
這篇文章主要介紹了Android 逐幀動畫創(chuàng)建實(shí)例詳解的相關(guān)資料,這里主要說明Android 動畫的創(chuàng)建及使用方法，希望通過此文能幫助到大家，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了詳解Android跨進(jìn)程通信之AIDL，想了解跨進(jìn)程的同學(xué)可以參考下2021-04-04
這篇文章主要介紹了Flutter-實(shí)現(xiàn)懸浮分組列表,我們將介紹如何使用 Flutter 實(shí)現(xiàn)一個(gè)帶有分組列表的應(yīng)用程序,我們將通過 CustomScrollView 和 Sliver 組件來實(shí)現(xiàn)該功能,需要的朋友可以參考下2024-08-08
Flutter 滾動監(jiān)聽及實(shí)戰(zhàn)appBar滾動漸變的實(shí)現(xiàn)
這篇文章主要介紹了Flutter 滾動監(jiān)聽及實(shí)戰(zhàn)appBar滾動漸變，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了Android通過單點(diǎn)觸摸移動圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Android spinner下垃菜單用法實(shí)例詳解
這篇文章主要介紹了Android spinner下垃菜單用法,詳細(xì)分析了spinner下垃菜單的定義、布局及功能實(shí)現(xiàn)相關(guān)技巧,需要的朋友可以參考下2016-07-07
Android編程實(shí)現(xiàn)調(diào)用系統(tǒng)圖庫與裁剪圖片功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)調(diào)用系統(tǒng)圖庫與裁剪圖片功能,結(jié)合實(shí)例形式分析了Android針對圖形的旋轉(zhuǎn)與剪切等具體操作技巧,需要的朋友可以參考下2017-01-01
Kotlin 創(chuàng)建接口或者抽象類的匿名對象實(shí)例
這篇文章主要介紹了Kotlin 創(chuàng)建接口或者抽象類的匿名對象實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03