Flutter使用AnimatedSwitcher實現場景切換動畫

2022-03-23 19:01:04

前言

在應用中，我們經常會遇到切換元件的場景，比如點選一個按鈕後，將當前的圖片為另一張圖片；或者是翻轉卡片，顯示卡片詳情。在 Flutter 中提供了 AnimatedSwitcher 這個動畫元件來實現頁面內的場景切換。

AnimatedSwitcher.gif

AnimatedSwitcher 介紹

AnimatedSwitcher 通過動效完成其子元件的切換，預設的效果是 FadeTransition。當其子元件發生改變的時候，就會按設定的轉變效果進行轉換。AnimatedSwitcher的構造方法如下：

const AnimatedSwitcher({
  Key? key,
  this.child,
  required this.duration,
  this.reverseDuration,
  this.switchInCurve = Curves.linear,
  this.switchOutCurve = Curves.linear,
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
})

與之前其他的動畫元件不同，AnimatedSwitcher的引數除了 duration 之外，其他的有所不同，具體如下：

reverseDuration：反向時長，也就是切換為舊元件的時長，不設定的話就和 duration 一致。
switchInCurve：切入動畫曲線，也就是新元件切換進入的曲線；
switchOutCurve：切出動畫曲線，也就是舊元件切換出去時的曲線；
transitionBuilder：切換轉變動畫構建，是一個函數，定義如下，可以用這個方法來構建自己的切換動效。

typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);

layoutBuilder：可以設定新元件在元件樹中的佈局，也是一個函數：

typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);

預設佈局為 defaultLayoutBuilder，也就是將當前元件放置在最頂層：

static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
  return Stack(
    children: <Widget>[
      ...previousChildren,
      if (currentChild != null) currentChild,
    ],
    alignment: Alignment.center,
  );
}

關於AnimatedSwitcher有一個地方需要特別注意，那就是如果切換的兩個元件相同的話，AnimatedSwitcher會以為元件沒有改變，而不會進行動效切換。檔案說明如下：

The child is considered to be "new" if it has a different type or [Key]

實際上是根據 Widget 的 canUpdate 判斷的：

static int _debugConcreteSubtype(Widget widget) {
  return widget is StatefulWidget ? 1 :
         widget is StatelessWidget ? 2 :
         0;
}

因此，如果兩個元件型別相同，需要使用不同的 Key 來區分，通常是使用 ValueKey。

應用

下面我們來實現開篇的動效，這個使用的是 SizeTransition 尺寸變化轉變動效完成兩張圖片的切換，這樣會讓元件的尺寸從小變到大，有一種掀開面紗的感覺。程式碼如下：

class AnimatedSwitcherDemo extends StatefulWidget {
  AnimatedSwitcherDemo({Key? key}) : super(key: key);

  @override
  _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
}

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
  Widget? _animatedWidget;
  bool test = false;

  @override
  void initState() {
    super.initState();
    _animatedWidget = ClipOval(
      child: Image.asset('images/beauty.jpeg'),
      key: ValueKey(1),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSwticher'),
        brightness: Brightness.dark,
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: AnimatedSwitcher(
            child: _animatedWidget,
            duration: const Duration(milliseconds: 1000),
            transitionBuilder: (child, animation) {
              return SizeTransition(
                sizeFactor: animation,
                child: child,
              );
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () {
          setState(() {
            test = !test;
            _animatedWidget = test
                ? ClipOval(
                    child: Image.asset('images/beauty2.jpeg'),
                    key: ValueKey(2),
                  )
                : ClipOval(
                    child: Image.asset('images/beauty.jpeg'),
                    key: ValueKey(1),
                  );
          });
        },
      ),
    );
  }
}

總結

本篇介紹了 AnimatedSwitcher 動畫元件的使用。AnimatedSwitcher可以用於介面中元件的切換過渡動效，並且可以控制切入切出的時長、動畫取消、過渡效果和佈局，從而可以實現一些有趣的切換效果。另外，需要注意的是，如果要切換的子元件型別相同，則需要使用 Key 進行區分，否則動效不會呈現出來。

到此這篇關於Flutter使用AnimatedSwitcher實現場景切換動畫的文章就介紹到這了,更多相關Flutter場景切換動畫內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Flutter使用AnimatedSwitcher實現場景切換動畫

目錄

前言

AnimatedSwitcher 介紹

應用

總結

熱門文章