Kazumi项目中的Material You过渡动画优化实践

背景介绍

Kazumi项目在1.5.9版本中引入了Material You设计规范推荐的页面过渡动画，但在1.6.0版本中移除了这些动画效果。这一变更引发了社区讨论，开发者们对过渡动画的实现方式进行了深入探讨。

动画移除原因分析

项目维护者最初决定移除过渡动画主要基于两个考虑：

1. 性能考量：Material You推荐的过渡动画在某些情况下显得过于拖沓，特别是在加载大型页面时，缓慢的过渡动画无法掩盖加载导致的掉帧问题。

2. 用户体验：部分用户反馈认为这些动画效果影响了应用的操作流畅性，尤其是在频繁切换页面时。

Material You动画规范

根据Material Design 3规范，导航栏动画应采用Top Level动画模式，在Kotlin中称为MaterialFadeThrough。经过测试，这种动画的持续时间大约为100ms左右，属于FadeIn类型的过渡效果。

值得注意的是，Material Design 3对于导航栏(Navigation Rail)的切换动画有明确规范，建议使用70ms的fadeOutIn效果，而不是简单的fadeIn。这种细微差别对用户体验有着重要影响。

技术实现讨论

在技术实现层面，Flutter的页面过渡动画存在一些特性：

1. 页面退出动画与进入动画是绑定的，与新页面的过渡动画设定无关。这意味着如果禁用tab切换动画，从tab页面跳转到其他页面时只能得到不完整的过渡动画效果。

2. 裸Navigator 2.0也存在同样的问题，导致大多数应用选择避免在tab切换时使用过渡动画。

依赖注入的替代方案

在讨论过程中，开发者们还探讨了依赖注入的替代实现方案：

1. 使用全局数组存储控制器实例，需要时从中获取实例，这是最简单的依赖注入实现方式。

2. 与直接在文件中声明单例实例相比，全局数组方案更加灵活，可以优雅地卸载整个控制器实例以释放内存。

最终解决方案

经过深入讨论，项目决定：

1. 为tab切换添加70ms的fadeOutIn动画，这比完全没有动画提供了更好的视觉体验，同时又不会明显影响操作流畅性。

2. 恢复页面过渡动画，但采用更符合Material You规范的实现方式。

这一调整既遵循了Material Design规范，又兼顾了性能和用户体验，体现了Kazumi项目对细节的重视和对用户反馈的积极响应。