Flutter – 动画启动画面

在很多应用中，启动画面是程序的第一个印象。一个好看的、有趣的启动画面可以让用户对应用留下深刻的印象。Flutter 提供了各种方式来创建启动画面，其中包括动画启动画面。

什么是动画启动画面

动画启动画面是指应用在启动时展示的一个有动画效果的画面。通常用来表示应用正在载入数据等操作，以及为用户提供一种较好的视觉体验。

Flutter 中的动画启动画面是利用 AnimatedContainer 或 Hero 等 Widgets 来实现的。

利用 AnimatedContainer 实现动画启动画面

利用 AnimatedContainer 实现动画启动画面非常简单。只需要定义两个 Container，分别表示起始状态和结束状态，然后在渲染时区别处理，就可以实现一个简单的动画启动画面。

class AnimatedSplashScreen extends StatefulWidget {
  @override
  _AnimatedSplashScreenState createState() => _AnimatedSplashScreenState();
}

class _AnimatedSplashScreenState extends State<AnimatedSplashScreen> {
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Future<void> loadData() async {
    setState(() {
      _isLoading = true;
    });
    // simulate loading data
    await Future.delayed(const Duration(seconds: 3));
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 4),
      color: Colors.white,
      child: Center(
        child: _isLoading
            ? const CircularProgressIndicator()
            : const Text('Splash Screen'),
      ),
    );
  }
}

上述代码中，我们定义了一个 AnimatedContainer，然后在 build 方法中根据 _isLoading 变量决定显示 CircularProgressIndicator 或者 Text。

利用 Hero 实现动画启动画面

Hero 是 Flutter 中的一个强大的动画效果库，利用 Hero 可以实现各种有趣的动画效果，包括动画启动画面。我们可以在启动画面中设置一个 Hero Widget，然后在主界面中也设置一个相同的 Hero Widget，这样在启动画面和主界面切换时就会有一个有趣的动画效果。

class AnimatedSplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Hero(
            tag: 'splash_screen',
            child: Text(
              'Splash Screen',
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Hero(
            tag: 'splash_screen',
            child: Text(
              'Home Screen',
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

上述代码中，我们在启动画面和主界面中都设置了一个 Hero Widget，并设置了相同的 tag。在启动画面和主界面切换时，就会有一个有趣的动画效果。