使用Flutter來完成Uplabs上炫酷的交互

時間 2019-11-06

標籤 git github 編程 markdown ide 動畫網站 this google 欄目 Git 简体版

原文原文鏈接

What is Flutter?

Flutter 是 Google 用以幫助開發者在 ~~iOS 和 Android 兩個平臺~~（如今是全平臺）開發高質量原生 UI 的移動 SDK。Flutter 兼容現有的代碼，免費而且開源，在全球開發者中普遍被使用.git

What is Uplabs?

Uplabs是設計師和開發人員尋找，分享和購買靈感和資源以構建應用和網站的地方。github

在這裏，每一個人均可以：編程

1. 瀏覽並在咱們的Material Design（Android），iOS和macOS以及Site的平常展現中找到靈感。markdown

2. 搜索特定的UI元素和解決方案;ide

3. 分享她/他的做品（設計，圖書館，片斷，應用程序，網站）做爲靈感或免費贈品;動畫

4. 出售她/他的做品(主題，模板，圖標等)。網站

Uplabs上有不少免費的設計圖，開發人員能夠選取其中一個，好比說Google maps。 ui

能夠看到右邊有xd的圖標，表示該項目下載下來以後須要用Adobe XD 打開，固然也支持sketch、PS、Figma等等。this

打開以後，點擊右上角的預覽按鈕可以預覽原型交互，對於實現交互細節很是重要。google

你還能夠將設計稿經過插件（好比藍湖XD）導出到藍湖平臺，至關於一個免費的UI大師就位了。

總的來講，對於Flutter開發者而言，這裏就是一座寶庫。

許多用原生技術都難以實現或者較難實現的交互，運用Flutter，在鍛鍊你的Flutter技能同時還能有一個滿意😊的結果。

How to implement ？

咱們能夠來實現一個簡單的過渡效果

問題：如今經過UI圖能夠得知正方形的初始大小爲100，起始位置爲居中、距離底部100px，通過過渡後的位置爲居中、距離底部500px,同時大小改成300，設置圓角爲30.

知道了起點和終點，咱們能夠結合Stack和Positioned來完成位置的變化。

Stack(
        children: <Widget>[
          Positioned(
            bottom: 100,
            left: (screenWidth - 100) / 2, //center
            width: 100,
            height: 100,
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(),
                borderRadius: BorderRadius.all(Radius.circular(0)),
              ),
            ),
          ),
        ],
      )
複製代碼

接着咱們來完成動畫，你能夠選擇組合多個動畫，但這樣會稍顯麻煩，其實咱們只須要肯定一個動畫，其它的動畫只是附帶引發的變化而已。

這裏選用bottom的偏移進行動畫，開始的時候距離底部爲100，結束以後距離底部爲500，時間咱們挑選爲500毫秒。

AnimationController animationController;
Animation animation;
//offset bottom
double offset = 0;
@override
void initState() {
  super.initState();
  animationController = AnimationController(duration: Duration(milliseconds: 500), vsync: this);
  animation = Tween<double>(begin: 0.0, end: 500.0-100.0).animate(animationController)
    ..addListener(() {
        // notify ui update
      setState(() {
        offset = animation.value;
      });
    });
}
複製代碼

當動畫進行時，offset就能夠更新爲動畫這時候的值，而後經過setState通知UI更新。

這時，就須要更改bottom的表達式爲：

bottom: 100   ->   bottom:100+offset
複製代碼

可是爲了引發正方形其它參數的變化，所以，咱們最好是獲得一個offset佔總偏移量的比重。

get currentPercent => offset / (500.0-100.0);
複製代碼

接着咱們的表達式也能夠用另外一種形式來寫：

bottom: 100   ->   bottom:100+offset  -> bottom:100+(500.0-100.0)*currentPercent
複製代碼

用這樣的邏輯，咱們即可以完成上述的過渡效果。

Stack(
  children: <Widget>[
    Positioned(
      // start 100, center end 500 center
      bottom: 100 + (500 - 100) * currentPercent,
      left: (screenWidth - (100 + (300 - 100) * currentPercent)) / 2,
      width: 100 + (300 - 100) * currentPercent,
      height: 100 + (300 - 100) * currentPercent,
      child: GestureDetector(
          onTap: () {
            if (animationController.status == AnimationStatus.completed) {
              animationController.reverse();
            } else {
              animationController.forward();
            }
          },
          child: DecoratedBox(
              decoration: BoxDecoration(
                  color: Colors.red,
                  border: Border.all(),
                  borderRadius: BorderRadius.all(Radius.circular(30 * currentPercent))))),
    )
  ],
)
複製代碼

處理手勢

在上面的代碼中咱們已經套上了一層GestureDetector，而後經過onTap回調來處理點擊事件，這裏再進一步，再加上拖動效果。

垂直方向的手勢監聽能夠經過onVerticalDragUpdate來處理，根據返回的DragUpdateDetails參數，能夠獲取的滑動距離，咱們能夠根據它來改變offset。

onVerticalDragUpdate: (details) {
  // scrollUp means -=
  offset -= details.delta.dy;
  if (offset > 400) {
    offset = 400;
  } else if (offset < 0) {
    offset = 0;
  }
  setState(() {});
},
複製代碼

當手指離開屏幕的時候，咱們再根據offset的大小和狀態經過動畫移動到合適的位置。

須要注意的是動畫開始的值也就是begin是變化的，所以咱們的動畫也須要動態建立。

onVerticalDragEnd: (_) {
  if (isEnd) {
    if (currentPercent >= 0.7) {
      animate(true);
    } else {
      animate(false);
    }
  } else {
    if (currentPercent >= 0.3) {
      animate(true);
    } else {
      animate(false);
    }
  }
},
複製代碼

isEnd表明處於結束位置，再來看看動畫。

/// 滑動到開始或結束位置,Swipe to the start or end position
///
/// [end] true is the end position, otherwise the start position
/// [end] 爲true是結束位置 反之是開始位置
void animate(bool end) {
  animationController = AnimationController(
      duration: Duration(milliseconds: (1 + 500 * (isEnd ? currentPercent : (1.0 - currentPercent))).toInt()),
      vsync: this);
  animation = Tween<double>(begin: offset, end: end ? 400.0 : 0.0).animate(animationController)
    ..addListener(() {
      setState(() {
        offset = animation.value;
      });
    })
    ..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        isEnd = !isEnd;
      }
    });
  animationController.forward();
}
複製代碼