Flutter 转场动效入门

2024-01-15 13:30:03

从新手上路到专家：Flutter 转场动效大合集

引言

俗话说得好，“收藏不迷路，学习不掉队”。对于想要掌握 Flutter 转场动效的开发者来说，这句箴言再贴切不过了。转场动效不仅能提升用户体验，还能让你的应用程序更加赏心悦目。在这篇文章中，我们将深入探讨 Flutter 提供的各种转场动效，从最基本的到最复杂的，并通过生动的示例和清晰的解释，为你提供一个全面的转场动效指南。

转场动效是应用程序中用于在不同的屏幕或小部件之间切换时的视觉效果。Flutter 提供了多种开箱即用的转场动效类，可帮助你轻松创建流畅而引人注目的过渡。

最简单的转场动效是 FadeTransition，它会在新屏幕淡入的同时淡出旧屏幕。要使用 FadeTransition，你只需将它作为父小部件包裹在要切换的小部件周围，如下所示：

class FadeTransitionDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: AnimationController(
        duration: const Duration(milliseconds: 500),
      ).drive(CurveTween(curve: Curves.easeInOut)),
      child: const Text('Hello, Flutter!'),
    );
  }
}

除了基本的淡入淡出效果之外，Flutter 还提供了更高级的转场动效，如 ScaleTransition、SlideTransition 和 RotationTransition。这些动效可以让你创建更具动态性和吸引力的过渡。

例如，ScaleTransition 可用于在缩放旧屏幕的同时放大新屏幕，创建一种令人印象深刻的放大效果。要使用 ScaleTransition，只需将它作为父小部件包裹在要切换的小部件周围，如下所示：

class ScaleTransitionDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: AnimationController(
        duration: const Duration(milliseconds: 500),
      ).drive(Tween<double>(begin: 0.0, end: 1.0)),
      child: const Text('Hello, Flutter!'),
    );
  }
}

虽然 Flutter 提供了许多开箱即用的转场动效类，但你也可以创建自己的自定义转场动效。这使你能够创建完全符合你的应用程序需求和美学风格的独特过渡。

要创建自定义转场动效，你需要创建一个继承自 Animatable<T> 类的类。该类应实现 transform 方法，该方法返回一个 Matrix4 对象，应用于子小部件的转换。

例如，以下代码创建了一个自定义转场动效，它将新屏幕从屏幕底部滑动到顶部：

class SlideUpTransition extends Animatable<double> {
  @override
  Transform transform(double t) {
    return Matrix4.translationValues(0.0, 1.0 - t, 0.0);
  }
}