开屏动画

给你的 Flame 游戏装饰上一个漂亮的开屏动画

FlameSplashScreen 是一个非常可定制的开屏动画包。

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen')
);

安装

在 pubspec.yaml 文件中添加 flame_splash_screen 依赖。

导入 widget:

import 'package:flame_splash_screen/flame_splash_screen.dart';

使用方法

flame_splash_screen 是一个用来显示初始屏幕部件。

简单用法

这里需要两个必要参数:

onFinish, 当初始屏幕的所有动画结束时执行的回调方法。
theme, 比如 FlameSplashTheme.dark 或 FlameSplashTheme.white.

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen')
)

添加容器

你可以将自己的logo显示在Flame动画之前或之后。

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  showBefore: (BuildContext context) {
    return Text("在Flame动画之前显示");
  },
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  showAfter: (BuildContext context) {
    return Text("在Flame动画之后显示");
  },
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

请记住：您还可以同时指定showBefore和showAfter。

变更 theme

默认情况下，初始屏幕是一个黑暗的背景。您可以通过指定白色主题来更改它。

除了 FlameSplashTheme.dark, 你可以通过 FlameSplashTheme.white 设置白色背景

FlameSplashScreen(
  theme: FlameSplashTheme.white,
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

您可以创建自己的主题传递一个自定义徽标生成器(改变为另一个Flame徽标)和背景装饰

控制器中使用

在启动时，利用 FlameSplashController 可以使 FlameSplashScreen 具有自定义动画时长的能力。

这里有时长参数及 autoStart (自动播放，默认为true)

使用控制器动画的方式与widget状态一样:

class SplashScreenGameState extends State<SplashScreenGame> {
  FlameSplashController controller;
  @override
  void initState() {
      super.initState();
      controller = FlameSplashController(
        fadeInDuration: Duration(seconds: 1),
        fadeOutDuration: Duration(milliseconds: 250),
        waitDuration: Duration(seconds: 2),
        autoStart: false
      );
  }

  @override
  void dispose() {
    controller.dispose(); // 必要时清除
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlameSplashScreen(
        showBefore: (BuildContext context) {
          return Text("Before the logo");
        },
        showAfter: (BuildContext context) {
          return Text("After the logo");
       },
       theme: FlameSplashTheme.white,
       onFinish: (context) => Navigator.pushNamed(context, '/the-game-initial-screen'),
        controller: controller,
      ),
    );
  }
}

有关更多详细信息，请查看 package's repo 和 pub page

启动界面