页面切换过渡动画¶
在 Flutter 中实现自定义的、高质量的页面切换过渡动画,以替代默认的 MaterialPageRoute动画效果。
文章的核心内容包括以下几个部分:
常见错误与解决方案:首先指出了直接使用默认 Navigator.push和 MaterialPageRoute的做法无法实现定制化和层级感。接着,文章介绍了三种正确的实现方法:
- 方法一:自定义
PageRouteBuilder:以“淡入 + 上移”效果为例,详细展示了如何使用PageRouteBuilder的transitionsBuilder方法,通过组合FadeTransition和SlideTransition以及Tween.chain(CurveTween(...))的优雅写法来创建自定义动画。 - 方法二:仿 iOS 风格侧滑进入:通过一个示例演示了如何实现从右侧滑入并带有前一个页面轻微左移的视差效果,利用
secondaryAnimation控制旧页面的退出动画。 - 方法三:封装成全局统一管理:这是推荐的最佳实践。通过创建一个
AppRoute工厂类,并使用enum定义不同的过渡类型(如淡入、上滑、右侧滑入),可以实现在任何页面通过一行代码(如AppRoute.to(DetailPage(), type: TransitionType.fade))来应用指定的动画效果,极大提高了代码的复用性和可维护性。
进阶优化:提供了两个优化方向:
- 在
MaterialApp的onGenerateRoute中全局应用自定义路由,统一整个 App 的页面切换风格。 - 性能优化提示:强调在
transitionsBuilder中应避免每帧创建新对象(如Tween),而应将其提到外部缓存,对于复杂动画优先使用AnimatedBuilder。
关键总结:文章最后提炼了几个要点,包括 PageRouteBuilder是核心入口、注意 transitionsBuilder的性能陷阱、利用 secondaryAnimation控制退出动画、推荐通过工厂方法封装管理,以及推荐使用 Curves.easeOutCubic等曲线以获得接近原生的手感。