Flutter-转场动画(页面跳转动画)


在Android中专场动画比较常见,就是从一个Activity/Fragment跳转到另一个Activity/Fragment之间的过渡状态.Flutter也提供了对转场动画的支持.

路由跳转的一般方式

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return targetPage;
    }));

还可以使用PageRouteBuilder:

    final router = PageRouteBuilder(
      pageBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        // child是pageBuilder中返回的,一般在这里处理转场动画
        return child;
      },
    );
    Navigator.of(context).push(router);

pageBuilder中return的page会作为transionBuilder中的child参数传入,而且pageBuilder仅在router被创建时调用一次.

至于animation,secondaryAnimation参数,就是在push router的时候从0变化到1,pop的时候从1变化到0.

下面看下如何控制页面进入/退出的方向;

控制页面进入/退出的方向

  Route _createPageRouter(SlideDirection slideDirection) {
    return PageRouteBuilder(pageBuilder: (BuildContext context,
        Animation animation, Animation secondaryAnimation) {
      return ImageDemo();
    }, transitionsBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      var begin = Offset(0, 1);
      if (slideDirection == SlideDirection.right2left) {
        begin = Offset(1, 0);
      }
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      var offsetAnimation = animation.drive(tween);
      return SlideTransition(
        child: child,
        position: offsetAnimation,
      );
    });
  }

这里利用了Animation + SlideTransition来实现效果,其中SlideTransition用于一个widget从相对于正常位置的一个偏移动画到正常位置.

源码项目

[https://github.com/jiangkang/flutter-system

效果


文章作者: 姜康
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 姜康 !
评论
 上一篇
Flutter-路由跳转 Flutter-路由跳转
前端页面开发中,路由的概念并不陌生,比如Android中经常会封装一些路由框架,通过一个name跳转指定的Acitivity以进行一定程度的解耦. 在Flutter中同样也有路由的概念,但是由于Dart语言比较古老落后,Flutter的路
2020-07-12
下一篇 
Android系统启动流程-桌面程序的启动 Android系统启动流程-桌面程序的启动
在Android启动流程-SystemServer分析中有提到,在SystemServer启动“Other”类型服务的时候,最后阶段会执行ActivityManagerService的systemReady()方法,这里就是启动桌面程序的入
2020-06-29
  目录