本頭條核心宗旨

歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。

技術剛剛好經歷

近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！

做開發很多時候會接觸動畫運用，作為前端開發人員難免跑不掉動畫運用，之前做安卓開發，必須項目裡面需要一個登錄界面的過渡動畫，再比如加載網絡數據的時候，由於等待時間較短，這個時候可能就需要用動畫來完美等待。

動畫這一詞早在計算機WEB前端得時候就有運用，那個時候可能是一些簡單的flash網頁動畫，現如今手機已經普及到老人和小孩的手上，所以動畫也運用的比較普遍了，很多時候為了有一個好的用戶體驗，動畫有是少不了的角色。

今天我就帶大家簡單的學習一下Flutter當中動畫是什麼樣子的，應該怎麼運用，用一個簡單的例子帶大家入門Flutter動畫，希望你在學習Flutter的時候能夠有所幫助，本人也是在學習當中，如有不對的地方還望大家指正。

首先學習知識肯定少不了去官網查資料，本人也是一樣，學習程序開發第一份資料就是官網文檔API。當我們打開官網文檔，進入動畫API頁面如下圖：

Flutter動畫API

第一行就說到我們要使用動畫第一步是導入動畫庫；package:flutter/animation.dart。該庫提供了在Flutter中實現動畫的基本構建塊，其實一組動畫的核心就是一堆不停變化的數值組織在一起就形成了動畫。這個時候我們就要用到這個「Animation」API.這個API可以存儲一堆動畫的值，使得動畫能夠順利的執行。儘管您不能直接實例化Animation（這是一個抽象類），但是可以使用AnimationController創建一個實例。

剛我們提到了「AnimationController」這個是一個動畫控制器，可以由他來掌管整個動畫的執行順序和執行效果。

平移動畫例子

首先使用有狀態的StatefulWidget,創建AnimationController和Animation,並在initState中初始化這兩個對象. vsync需要使用with TickerProviderStateMixin,這樣才是正常的進行動畫的操作. 在initState方法中,聲明這個動畫執行時間為2秒.給animation添加一個監聽事件,在動畫完成後,將移除這個簡單,並將AnimationController還原為初始狀態,在執行一次動畫.

<code>AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    ); 

    _animation = Tween(begin: -1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.fastOutSlowIn,
      ),
    )..addStatusListener(_handler);
  }

  _handler(status) {
    if (status == AnimationStatus.completed) {
      _animation.removeStatusListener(_handler);
      _controller.reset();
      _animation = Tween(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn),
      )..addStatusListener(
          (status) {
            if (status == AnimationStatus.completed) {
              Navigator.pop(context);
            }
          },
        );
      _controller.forward();
    }
  }/<code>