面试题：Flutter MaterialPageRoute 动画的定制方法与实践

Question

假设你需要为 MaterialPageRoute 定制一个水平方向的淡入淡出且伴有缩放效果的转场动画，描述实现这一定制动画的具体步骤，包括涉及到的类和方法的使用。

Answer 1

1. 定义自定义转场类：
   • 继承自 PageTransitionsBuilder 类。该类用于定义页面转场的构建逻辑。

   class CustomHorizontalFadeScaleTransition extends PageTransitionsBuilder {
     @override
     Widget buildTransitions<T>(
       BuildContext context,
       Animation<double> animation,
       Animation<double> secondaryAnimation,
       Widget child,
     ) {
       // 具体实现逻辑在下面步骤中填充
     }
   }
   

2. 构建动画效果：
   • 在 buildTransitions 方法中，利用 Tween 来定义动画的变化范围。
   • 对于淡入淡出效果，使用 Opacity 组件结合动画值来控制透明度。
   • 对于缩放效果，使用 Transform.scale 组件结合动画值来控制缩放比例。

   class CustomHorizontalFadeScaleTransition extends PageTransitionsBuilder {
     @override
     Widget buildTransitions<T>(
       BuildContext context,
       Animation<double> animation,
       Animation<double> secondaryAnimation,
       Widget child,
     ) {
       return SlideTransition(
         position: Tween<Offset>(
           begin: const Offset(1.0, 0.0),
           end: Offset.zero,
         ).animate(animation),
         child: FadeTransition(
           opacity: animation,
           child: Transform.scale(
             scale: Tween<double>(
               begin: 0.8,
               end: 1.0,
             ).animate(animation),
             child: child,
           ),
         ),
       );
     }
   }
   

3. 使用自定义转场：
   • 在使用 MaterialPageRoute 时，通过 transitionsBuilder 参数指定我们自定义的转场类。

   Navigator.push(
     context,
     MaterialPageRoute(
       builder: (context) => NextPage(),
       transitionsBuilder: (context, animation, secondaryAnimation, child) {
         return CustomHorizontalFadeScaleTransition().buildTransitions(
           context,
           animation,
           secondaryAnimation,
           child,
         );
       },
     ),
   );
   

在上述实现中：

• SlideTransition 实现了水平方向的滑动，Tween 定义了从右侧（Offset(1.0, 0.0)）滑入到原点（Offset.zero）。
• FadeTransition 实现了淡入效果，opacity 直接使用 animation，使得透明度从 0 到 1 变化。
• Transform.scale 实现了缩放效果，Tween 定义了从 0.8 缩放至 1.0。
• 最后在 MaterialPageRoute 的 transitionsBuilder 中使用自定义的 CustomHorizontalFadeScaleTransition 来构建转场动画。