歡迎光臨
每天分享高質量文章

最近 Flutter 爭氣了! Flutter 也可以做這麼炫酷的動畫

作者:BakerJQ

連結:https://juejin.im/post/5ca375f3e51d451a18362e2a

在 2019 年的谷歌 I/O 大會上,開發團隊釋出了 Flutter for web 的首個技術預覽版,宣佈 Flutter 正在為包括 Google Home Hub 在內的 Google 智慧顯示平臺提供支援,並透過結合 Chrome OS 為桌面級應用程式提供支援邁出第一步。

 

一張圖感受下

本篇作者給大家展示了一個如何用Flutter做炫酷動畫!可能很多同學對 Flutter 還不瞭解,沒關係,可以透過全文類比於 Android 上製作動畫的區別與相似之處!

前言

這一段時間,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 _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(from0.0);
}


由於設定了AnimationListener,在動畫過程中,setState就會被呼叫,如此就會觸發Widget的build,從而觸發Helper的getCardList方法。

 

我們來看看在切換動畫的過程中,是如何傳回卡片Widget串列的。

 

List getCardList(double width, double height) {
  for (int i = 0; i     ...
    if (_isSwitchAnim) {
      //處理切換動畫
      _switchTransform(width, height, i);
    }
    ...
  }
  //根據zIndex進行排序渲染
  List copy = List.from(_cardList);
  copy.sort((card1, card2) {
    return card1.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

 

作者也實現了 Android 上相同效果,歡迎一起學習:

https://github.com/BakerJQ/Android-InfiniteCards


已同步到看一看
贊(0)

分享創造快樂