【Flutter 實戰】動畫序列、共享動畫、路由動畫

老孟導讀：此篇文章是 Flutter 動畫系列文章第四篇，本文介紹動畫序列、共享動畫、路由動畫。web

動畫序列

Flutter中組合動畫使用Interval，Interval繼承自Curve，用法以下：微信

Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0)));

表示_sizeAnimation動畫從0.5（一半）開始到結束，若是動畫時長爲6秒，_sizeAnimation則從第3秒開始。app

Interval中begin 和end參數值的範圍是0.0到1.0。less

下面實現一個先執行顏色變化，在執行大小變化，代碼以下：編輯器

class AnimationDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _AnimationDemo();}
class _AnimationDemo extends State<AnimationDemo> with SingleTickerProviderStateMixin { AnimationController _animationController; Animation _colorAnimation; Animation _sizeAnimation;
 @override void initState() { _animationController = AnimationController(duration: Duration(seconds: 5), vsync: this) ..addListener((){setState(() {  });});
 _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate( CurvedAnimation( parent: _animationController, curve: Interval(0.0, 0.5)));
 _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0)));
 //開始動畫 _animationController.forward(); super.initState(); }
 @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( height: _sizeAnimation.value, width: _sizeAnimation.value, color: _colorAnimation.value), ], ), ); }
 @override void dispose() { _animationController.dispose(); super.dispose(); }}

效果以下：ide

咱們也能夠設置同時動畫，只需將2個Interval的值都改成Interval(0.0, 1.0)。flex

想象下面的場景，一個紅色的盒子，動畫時長爲6秒，前40%的時間大小從100->200，而後保持200不變20%的時間，最後40%的時間大小從200->300，這種效果經過TweenSequence實現，代碼以下：動畫

_animation = TweenSequence([ TweenSequenceItem( tween: Tween(begin: 100.0, end: 200.0) .chain(CurveTween(curve: Curves.easeIn)), weight: 40), TweenSequenceItem(tween: ConstantTween<double>(200.0), weight: 20), TweenSequenceItem(tween: Tween(begin: 200.0, end: 300.0), weight: 40),]).animate(_animationController);

weight表示每個Tween的權重。ui

最終效果以下：this

共享動畫

Hero是咱們經常使用的過渡動畫，當用戶點擊一張圖片，切換到另外一個頁面時，這個頁面也有此圖，那麼使用Hero組件就在合適不過了，先看下Hero的效果圖：

上面效果實現的列表頁面代碼以下：

class HeroDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _HeroDemo();}
class _HeroDemo extends State<HeroDemo> { @override Widget build(BuildContext context) { return Scaffold( body: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3), children: List.generate(10, (index) { if (index == 6) { return InkWell( onTap: () { Navigator.push( context, new MaterialPageRoute( builder: (context) => new _Hero1Demo())); }, child: Hero( tag: 'hero', child: Container( child: Image.asset( 'images/bird.png', fit: BoxFit.fitWidth, ), ), ), ); } return Container( color: Colors.red, ); }), ), ); }}

第二個頁面代碼以下：

class _Hero1Demo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Container( alignment: Alignment.topCenter, child: Hero( tag: 'hero', child: Container( child: Image.asset( 'images/bird.png', ), ), )), ); }}

2個頁面都有Hero控件，且tag參數一致。

路由動畫

轉場就是從當前頁面跳轉到另外一個頁面，跳轉頁面在 Flutter 中經過 Navigator，跳轉到新頁面以下：

Navigator.push(context, MaterialPageRoute(builder: (context) { return _TwoPage();}));

回退到前一個頁面：

Navigator.pop(context);

Flutter 提供了兩個轉場動畫，分別爲 MaterialPageRoute 和 CupertinoPageRoute，MaterialPageRoute 根據不一樣的平臺顯示不一樣的效果，Android效果爲從下到上，iOS效果爲從左到右。CupertinoPageRoute 不分平臺，都是從左到右。

使用 MaterialPageRoute 案例以下：

class NavigationAnimation extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: OutlineButton( child: Text('跳轉'), onPressed: () { Navigator.push(context, CupertinoPageRoute(builder: (context) { return _TwoPage(); })); }, ), ), ); }}
class _TwoPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Container( color: Colors.blue, ), ); }}

iOS效果：

若是要自定義轉場動畫如何作？

自定義任何組件都是同樣的，若是系統有相似的，直接看源代碼是如何實現的，而後按照它的模版自定義組件。

回到正題，看 MaterialPageRoute 的繼承關係：

PageRoute 的繼承關係：

MaterialPageRoute 和 CupertinoPageRoute 都是繼承PageRoute，因此重點是 PageRoute，PageRoute 是一個抽象類，其子類還有一個 PageRouteBuilder，看其名字就知道這是一個能夠自定義動畫效果，PageRouteBuilder源代碼：

pageBuilder 表示跳轉的頁面。

transitionsBuilder 表示頁面的動畫效果，默認值代碼：

Widget _defaultTransitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { return child;}

經過源代碼發現，默認狀況下沒有動畫效果。

自定義轉場動畫只需修改transitionsBuilder便可：

Navigator.push( context, PageRouteBuilder(pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) { return _TwoPage(); }, transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { return SlideTransition( position: Tween(begin: Offset(-1, 0), end: Offset(0, 0)) .animate(animation), child: child, ); }));

將其封裝，方便使用：

class LeftToRightPageRoute extends PageRouteBuilder { final Widget newPage;
 LeftToRightPageRoute(this.newPage) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => newPage, transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ) => SlideTransition( position: Tween(begin: Offset(-1, 0), end: Offset(0, 0)) .animate(animation), child: child, ), );}

使用：

Navigator.push(context, LeftToRightPageRoute(_TwoPage()));

不只是這些平移動畫，前面所學的旋轉、縮放等動畫直接替換 SlideTransition 便可。

上面的動畫只對新的頁面進行了動畫，若是想實現當前頁面被新頁面從頂部頂出的效果，實現方式以下：

class CustomPageRoute extends PageRouteBuilder { final Widget currentPage; final Widget newPage;
 CustomPageRoute(this.currentPage, this.newPage) : super( pageBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) => currentPage, transitionsBuilder: ( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child, ) => Stack( children: <Widget>[ SlideTransition( position: new Tween<Offset>( begin: const Offset(0, 0), end: const Offset(0, -1), ).animate(animation), child: currentPage, ), SlideTransition( position: new Tween<Offset>( begin: const Offset(0, 1), end: Offset(0, 0), ).animate(animation), child: newPage, ) ], ), );}

本質就是對兩個頁面作動畫處理，使用：

Navigator.push(context, CustomPageRoute(this, _TwoPage()));

除了自定義路由動畫，在 Flutter 1.17 發佈大會上，Flutter 團隊還發布了新的 Animations 軟件包，該軟件包提供了實現新的 Material motion 規範的預構建動畫。

裏面提供了一系列動畫，部分效果：

詳情：Flutter 1.17 新 Material motion 規範的預構建動畫

 
   你可能還喜歡 
  

 
   關注「老孟Flutter」 
  

 
   讓你天天進步一點點 
  

本文分享自微信公衆號 - 老孟Flutter（lao_meng_qd）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。