Flutter透明度漸變動畫FadeTransition實作透明度漸變動畫效果

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

**	你可能需要
CSDN	網易雲課堂教程
掘金	EDU學院教程
知乎	Flutter系列文章

在Flutter 中實作透明度漸變效果的方式可通過以下

• 通過 AnimatedOpacity 實作 點選檢視這裡
• 通過 FadeTransition實作 就是本文了
• 透明元件 Opacity 實作
• 通過顔色改變實作透明度漸變效果

本文章将實作通過 FadeTransition 實作透明度漸變動畫效果，實作效果如下

如上圖所示效果，使用 FadeTransition 元件就的實作代碼如下：

///建構漸變動畫[FadeTransition]
  Widget buildSlideTransition() {
    ///實作透明漸變動畫
    return FadeTransition(
      ///過渡
      opacity: controller,
      //将要執行動畫的子view
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    );
  }
           

使用 FadeTransition 元件時，opacity 配置的是FadeTransition元件的透明度，在這裡

opacity 屬性配置的是 Animation 類型。

AnimationController 繼承于 Animation，是以在這裡聲明了一個 AnimationController 來動态的控制 透明度動态變化規律。

一般在 initState 初始化函數中進行建立，建立 AnimationController 時需要綁定一個 Ticker 來實作動畫重新整理幀監聽，是以一般 with TickerProviderStateMixin，代碼如下（代碼清單1-2）：

///代碼清單 1-2 
class _FadeTransitionPageState extends State
    with TickerProviderStateMixin {
  //動畫控制器
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    ///在這裡 controller 的值在2秒内從0過渡到1
    controller = AnimationController(
        ///duration 為正向執行動畫的時間
        duration: Duration(seconds: 2),
        ///反向執行動畫的時間
        reverseDuration: Duration(milliseconds: 3000),
        ///controller的變化的最小值
        lowerBound: 0.0,
        ///controller變化的最大值
        upperBound: 1.0,
        ///綁定頁面的Ticker
        vsync: this);
}

 ... ... 省略
}           

然後在點選按鈕時開始動畫 如下：

RaisedButton(
     child: Text('正向開啟動畫'),
     onPressed: () {
        ///重置動畫
     controller.reset();
       ///向前執行
     controller.forward();
    },
),           

通過 forward 正向開啟動畫 ，是從 0.0 ~ 1.0 的過程，是由不透明變為透明的過渡，然後再由1.0~0.0 是由不透明變為透明的過渡 ，反向執行一下就可以，代碼如下：

RaisedButton(
    child: Text('反向開啟動畫'),
      onPressed: () {
      ///反向前執行
      controller.reverse();
     },
   )           

完畢