likes
comments
collection
share

如何在Flutter中制作一个闪屏

作者站长头像
站长
· 阅读数 37

当涉及到创建应用程序时，美学、字体选择以及应用程序的整体外观和感觉会驱动用户是否认为它是高质量的。

开场动画也可以通过设置应用程序的场景给人以良好的第一印象。在当前许多应用程序中很受欢迎，一个短小精悍的开场动画可以吸引用户，有时甚至是在不知不觉中。

虽然在Flutter中已经有一个创建动画的官方流程，可以为应用程序引入动态的开场白，但官方流程确实有一些缺点需要考虑。

  • 当为iOS创建时，您必须创建一个iOS故事板来制作应用程序的开幕动画。
  • 当为Android创建时，您必须为Android编写特定平台的代码
  • 还没有对网页开发的支持

幸运的是，Flutter有一套强大的动画选项，所以我们可以用可以在多个平台上重复使用的代码创建一个相当引人注目的开场动画，并且支持网络。

为了证明这一点，我们将为一个名为 "Chowtime "的食品订购应用程序创建一个动态开场画面。当用户打开该应用时，他们首先看到的是原生的Flutter开场白，看起来像这样。

如何在Flutter中制作一个闪屏

你也可以在你的浏览器中看到这个演示。那么，让我们开始吧!

规划开场白

在设计开场白时，我们必须考虑到这些方面。

  1. 添加一个与应用的图标相匹配的大元素，我们可以在启动时立即显示出来
  2. 如何将这个大元素与我们的开场画面的其他部分结合起来，包括应用程序的名称
  3. 在导航到应用程序的主屏幕之前显示一个快速动画
  4. 在之前的每个元素之间添加动画，以创造一种高质量的感觉

让我们来看看我们如何创建这些元素。

在Flutter中创建开场闪屏

为了创建打开应用程序后立即显示的图像，我们可以使用图形编辑工具，如GIMP，为我们的开幕式创建一个512×512的图像。在我们的例子中，我们将只使用绿色背景的字母 "C"。

如何在Flutter中制作一个闪屏

如果你在你的应用程序中追求类似的概念，你可以（也应该）使用谷歌字体来寻找最适合你的应用程序的字体，因为Flutter有一个google_fonts 包，所以你可以在Flutter应用程序中轻松使用他们的字体。

选择字体后，将其加载到图像编辑器中，然后玩弄颜色，直到你有你想要的字体和背景颜色的调色板。

你也可以使用滴管工具来选择特定的颜色。注意颜色的十六进制代码；通过使用十六进制代码，您可以在Flutter中添加这种确切的颜色，在代码前加上0xFF 。因此，如果颜色是9ae79a ，Flutter的对应代码是Color(0xFF9ae79a) 。

如何在Flutter中制作一个闪屏

将图片添加到闪屏中

首先，将flutter_native_splash 包添加到项目中，它可以让我们为Android、iOS和网络创建原生的启动画面。

将启动器图片保存在assets/newlogo.png. 然后，我们必须告诉flutter_native_splash ，在其余的可用空间中使用什么图片和背景颜色。要做到这一点，打开pubspec.yaml ，添加以下几行。

flutter_native_splash:
  color: "#9ae79a"
  image: assets/newlogo.png

这里的颜色与我们从GIMP中的颜色选择工具得到的完全一样，也就是说没有0xFF 的前缀。这是因为启动屏幕的颜色不包含阿尔法通道，没有透明度，而前缀0xFF ，定义了颜色的透明度。

现在，让我们通过在项目根部运行以下命令，在这个图片的基础上生成我们所有的跨平台启动屏幕。

flutter pub get
flutter pub run flutter_native_splash:create

有了这段代码的实施，应用程序应该以我们创建的图像打开。然而，它将突然改变为应用程序的打开画面。那么，我们如何将我们新创建的闪屏与我们的启动屏幕的其他部分联系起来呢？

将启动屏幕与我们的闪屏联系起来

看一下本文开头的完成的动画，我们可以看到字母 "C "变小了，不久之后揭开了标志的其余部分，接着是一个食物落入碗中的简短动画。

通常情况下，这些类型的动画会变得相当复杂，那么我们如何高效、轻松地实现这一目标呢？在这种情况下，我们将使用一个隐式动画。

首先，我们必须指定我们要做动画的对象；在本例中，从字母 "C "到扩展的 "CHOWTIME "标志的动画，并调整文字的大小。当文本调整大小时，我们也必须增加部件的中间对象边界，以纳入标志文本的剩余部分。

这样做使显示的标志有一个擦拭的效果。为了实现这些动画变化，我们将使用两个小组件：AnimatedDefaultTextStyle 和AnimatedCrossFade 。

AnimatedDefaultTextStyle 小组件

为了随时间调整文本的大小，我们使用AnimatedDefaultTextStyle 小工具。就像大多数以Animated 为前缀的小组件一样，我们必须指定一个目标尺寸。当小组件的尺寸发生变化时，Flutter会在定义的时间内自动调整我们的文本尺寸。在这种情况下，它看起来像这样。

AnimatedDefaultTextStyle(
  duration: transitionDuration, //a duration, set to one second
  curve: Curves.fastOutSlowIn,
  style: TextStyle(
    color: Color(0xFF4e954e), // our color from above, prefixed with 0xFF
    fontSize: !expanded ? _bigFontSize : 50, // change font size depending on expanded state
    fontFamily: 'Montserrat', // the font from Google Fonts
    fontWeight: FontWeight.w600, // 
  ),
  child: Text(
    "C",
  ),
)

当expanded 布尔值切换并调用setState ，小组件自由地将尺寸变化从大到小做成动画。很好。

AnimatedCrossFade 小部件

现在，"C "的动画是正确的，我们想在文本大小调整时显示我们的标志的其余部分。为了达到这个目的，我们要在一个空的Container 和一个包含我们的标志文本和我们的动画的Row 之间进行渐变。

AnimatedCrossFade(
  firstCurve: Curves.fastOutSlowIn, // the same curve as above
  crossFadeState: !expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  duration: transitionDuration, // the same duration as above
  firstChild: Container(), // an empty container
  secondChild: _logoRemainder(), // a Row containing rest of our logo
  alignment: Alignment.centerLeft, // "reveal" the logo from the center left
  sizeCurve: Curves.easeInOut,
),

同样，随着expanded 布尔值的切换，这个小部件在一个空盒子和标志的其余部分之间进行动画，根据需要调整容器的大小。

在Flutter中添加食物动画

现在，我们的标志可以适当地调整大小，我们可以找到一个最能代表我们应用程序所提供的服务的动画。在添加动画时，我们可以创建自己的动画或从lottiefiles.com下载一个预制的动画；为了提高效率，我们将使用预制的动画。

在寻找动画时，最好选择一个最多持续两到三秒的动画，从一个空画布开始，并且有一个透明的背景。

这个食物动画符合我们的标准，并与应用程序的服务相一致，因此，下载lottie动画文件，格式为.json ，并将其弹入我们的assets 文件夹，pubspec.yaml 。

同样，在应用程序的根文件夹中，运行以下命令将lottie ，安装在我们的项目中 。

flutter pub add lottie

当添加动画到我们的开场画面时，我们要注意以下几点。

  1. 设置一个宽度和高度，否则动画会过大
  2. 设置一个AnimationController ，以便在动画结束时重定向到应用程序的主页上。

我们的LottieBuilder.asset 小组件看起来像这样。

LottieBuilder.asset(
  'assets/food.json',
  onLoaded: (composition) {
    _lottieAnimation..duration = composition.duration; // set the duration of our AnimationController to the length of the lottie animation
  },
  frameRate: FrameRate.max, // makes the animation smoother
  repeat: false,
  animate: false, // don't start the animation immediately
  height: 100,
  width: 100,
  controller: _lottieAnimation,
)

设置动画时间

现在唯一要做的是通过实现以下持续时间为动画添加适当的时间。

  • 显示一秒钟的初始飞溅
  • 将expanded 改为true，并调用setState ，以同时运行隐性动画和交叉淡入。
  • 等待文本大小的调整和交叉渐变的完成
  • 启动食物碗动画
  • 重定向用户到主屏幕

在程序上，它看起来像这样。

Future.delayed(Duration(seconds: 1))
    .then((value) => setState(() => expanded = true))
    .then((value) => Duration(seconds: 1))
    .then(
      (value) => Future.delayed(Duration(seconds: 1)).then(
        (value) => _lottieAnimation.forward().then(
              (value) => Navigator.of(context)
                  .pushAndRemoveUntil(MaterialPageRoute(builder: (context) => HomePage()), (route) => false),
            ),
      ),
    );

这就是它!我们现在有了一个完全动画的应用程序的闪屏，它可以在iOS、Android和网络上使用，并且在我们打开它的时候会有动画。

收尾工作

使用Flutter的内置动画工具为用户创建一个具有视觉吸引力的启动屏幕是相当容易的。有了Flutter的flutter_native_splash 支持，我们不需要为我们的应用程序在每个平台上使用编写我们的动画。

你可以在这里找到样本应用程序的完整源代码，你可以叉开它，尽情地玩耍。愉快的黑客行为!

The postHow to make a splash screen in Flutterappeared first onLogRocket Blog.

转载自:https://juejin.cn/post/7061867840915111966
评论
请登录