Flutter 中使用 AnimatedContainer 讓你的 Widget 動起來

ZeroFlutter發表於2021-06-03
FlutterAI

這是我參與更文挑戰的第3天，活動詳情檢視： 更文挑戰

前言

我是 Zero

如果你的 App 頁面簡潔、清晰、主次分明，那麼你是??

要是再加點的動畫，那麼你就是 ????

要是你覺得我的文章有所收穫並且點贊支援，那麼你就是 ??????

效果對比

下面兩種效果你會選左邊還是右邊？

01.gif02.gif
AnimatedContainerContainer

**

在差不多程式碼量的情況下，我會選擇左邊的，因為過渡帶有動畫，更加的自然流暢，反之右邊的則非常的突兀

上程式碼

先看看程式碼咋實現的

/// 這裡僅定義出核心程式碼，具體程式碼可以在 GitHub 上檢視
/// GitHub 倉庫地址： https://github.com/yy1300326388/flutter_widgets
// 定義屬性
double width = 200;
double height = 100;
double padding = 10;
Color color = Colors.blueAccent;
Alignment alignment = Alignment.center;

// 左邊
AnimatedContainer(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  duration: const Duration(milliseconds: 500),
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
)
// 右邊
Container(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
),

複製程式碼
/// 通過點選 FloatingActionButton 呼叫此方法，改變寬高
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    setState(() {});
}
複製程式碼

上面可以看出我們只是使用了 AnimatedContainer Widget 並設定了一個 duration 動畫執行時長就很簡單的實現了上面的左邊的效果，是非常簡單方便的

多種動畫組合

在實際情況下我們可能是多個屬性同時在變化，那麼 AnimatedContainer 有哪些屬性是支援動畫變換的呢？我們先看一個複雜效果 03.gif

上程式碼

/// 這裡除寬高外，增加了 padding、顏色、對齊方式
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    var padding = Random.secure().nextInt(20);
    var a = Random.secure().nextInt(256);
    var r = Random.secure().nextInt(256);
    var g = Random.secure().nextInt(256);
    var b = Random.secure().nextInt(256);
    var x = Random.secure().nextInt(3);
    var y = Random.secure().nextInt(3);

    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    this.padding = padding.toDouble();
    this.color = Color.fromARGB(255, r, g, b);
    this.alignment = Alignment(x - 1, y - 1);
    setState(() {});
  }
複製程式碼

從上面屬性可以推理出幾乎所有 AnimatedContainer 可以改變的屬性，這裡都可以做成動畫效果

屬性列表

  • width
  • height
  • padding
  • margin
  • color
  • alignment
  • border
  • borderRadius
  • boxShadow
  • image
  • gradient
  • transform
  • 等等

這裡就不一一列舉了，具體可以翻閱 AnimatedContainer 原始碼即可

動畫曲線

動畫效果要顯的靈動一些就需要用到動畫曲線，AnimatedContainer 為我們設定了 curve 屬性很方面的就可以新增上動畫曲線。

AnimatedContainer(
  ...
  duration: const Duration(milliseconds: 500),
  // 這裡設定動畫曲線
  curve: Curves.easeInBack,
  ...
)
複製程式碼

一些常見的動畫曲線可以 檢視 Curves 類，有各種動畫曲線的效果 image.png

最後來個更復雜的

04.gif 05.gif 這裡增加了 borderColor、borderWidth、radius、boxShadow 這些屬性引數進來，依然可以自然的產生過渡動畫效果，期待你使用這些引數新增上很好的創意。

原始碼倉庫

基於 Flutter 2.2.1 版本

參考連結

關注專欄

  • 此文章已收錄到下面? 的專欄，可以直接關注
  • 更多文章繼續閱讀｜系列文章持續更新

? 歡迎點贊➕收藏➕關注，有任何問題隨時在下面?評論，我會第一時間回覆哦

相關文章