詳解Android Flutter如何自定義動畫路由

2023-10-16 22:00:17

簡介

flutter中有預設的Route元件，叫做MaterialPageRoute，一般情況下我們在flutter中進行跳轉的話，只需要向Navigator中傳入一個MaterialPageRoute就可以了。

但是MaterialPageRoute太普通了，如果我們想要做點不同的跳轉特效應該如何處理呢？

一起來看看吧。

自定義跳轉使用

正常情況下，我們進行路由跳轉需要用到Navigator和MaterialPageRoute，如下所示：

 Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const NextPage();

如果要實現特定的路由動畫，那麼需要進行路由的自定義。

在flutter中也就是要使用PageRouteBuilder來自定義一個Route。

先來看下PageRouteBuilder的定義：

class PageRouteBuilder<T> extends PageRoute<T> {

  PageRouteBuilder({
    super.settings,
    required this.pageBuilder,
    this.transitionsBuilder = _defaultTransitionsBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.reverseTransitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
    super.fullscreenDialog,
  })

PageRouteBuilder也是PageRoute的一種，在構建PageRouteBuilder的時候，通過控制不同的屬性值，我們可以自由控制pageBuilder，transitionsBuilder，transitionDuration，reverseTransitionDuration等特性。

可以看到自由程度還是非常高的。

其中pageBuilder是路由將會跳轉的頁面，這個是必須要指定的，要不然路由也就沒有意義了。

另外路由轉換的效果可以經由transitionsBuilder來設定。

這裡的RouteTransitionsBuilder是一個Function，返回一個Widget：

typedef RouteTransitionsBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);

所以理論上，我們可以返回任何widget，但是一般來說，我們會返回一個AnimatedWidget,表示一個動畫效果。

flutter動畫基礎

flutter中有個專門的動畫包叫做flutter/animation.dart, flutter中所有動畫的核心叫做Animation。

Animation中定義了很多listener用來監控動畫的變動情況，並且還提供了一個AnimationStatus來儲存當前的動畫狀態：

abstract class Animation<T> extends Listenable implements ValueListenable<T> {
  const Animation();

  AnimationWithParentMixin<T>

  @override
  void addListener(VoidCallback listener);

  @override
  void removeListener(VoidCallback listener);

  void addStatusListener(AnimationStatusListener listener);

  void removeStatusListener(AnimationStatusListener listener);

  AnimationStatus get status;

AnimationStatus是一個列舉類，它包含了現在動畫的各種狀態：

enum AnimationStatus {
  dismissed,

  forward,

  reverse,

  completed,
}

dismissed表示動畫暫停在開頭。

forward表示動畫在從頭到尾播放。

reverse表示動畫在從尾到頭播放。

completed表示動畫播放完畢，停在了結尾。

有了動畫的表示之後，如何對動畫進行控制呢？這裡就需要用到AnimationController了。

AnimationController可以控制動畫的duration,動畫的最低值lowerBound預設是0.0，動畫的最高值upperBound預設是1.0等等。

預設情況AnimationController中從最低值到最高值是線性變化的，如果你想設定不同的Bound值,那麼可以嘗試自定義 Animatable, 如果你想動畫的變動是非線性的，那麼可以嘗試繼承Animation來實現自己的變動曲線。

實現一個自定義的route

這裡我們使用flutter中的SlideTransition，SlideTransition是一個AnimatedWidget,它表示的是一個元件的位置變化的動畫。

class SlideTransition extends AnimatedWidget {
  const SlideTransition({
    super.key,
    required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  }) : assert(position != null),
       super(listenable: position);

看下它的建構函式，可以看到SlideTransition需要一個position的屬性，這個position是一個Animation物件，裡面包含的是Offset。

同時這個position是一個listenable物件，通過監聽裡面Offset的變化，從而重新build對應的widget從而實現動畫的效果。

Offset是一個表示位置的類，(0,0) 表示這個widget的左頂點在螢幕的左上角，同樣的(1,1)表示這個widget的左頂點在螢幕的右下角。

因為route過後是一個新的頁面，我們希望出現一個頁面從右下角移動到左上角的動畫，那麼我們可以這樣做：

Route customRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.easeOut;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

這裡的begin和end表示widget從螢幕的右下角移動到了螢幕的左上角。

Tween表示的是開始值和結束值之間的線性插值，是一個動態過程，另外我們還可以這個插值變動的曲線，這裡使用了CurveTween，選中了Curves.easeOut這種曲線型別。

最後呼叫animation.drive方法把Tween和Animation關聯起來，這樣一個路由動畫就完成了。