Android?Flutter怎么自定義動畫路由

本篇內容主要講解“Android Flutter怎么自定義動畫路由”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Android Flutter怎么自定義動畫路由”吧!

簡介

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關聯起來，這樣一個路由動畫就完成了。

到此，相信大家對“Android Flutter怎么自定義動畫路由”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！