当涉及到创立应用程序时，美学、字体挑选以及应用程序的整体外观和感觉会驱动用户是否以为它是高质量的。
开场动画也能够经过设置应用程序的场景给人以良好的第一印象。在当时许多应用程序中很受欢迎，一个言简意赅的开场动画能够吸引用户，有时乃至是在不知不觉中。
虽然在Flutter中已经有一个创立动画的官方流程，能够为应用程序引进动态的开场白，但官方流程确实有一些缺点需要考虑。
- 当为iOS创立时，您有必要创立一个iOS故事板来制造应用程序的开幕动画。
- 当为Android创立时，您有必要为Android编写特定平台的代码
- 还没有对网页开发的支撑
幸运的是，Flutter有一套强壮的动画选项，所以咱们能够用能够在多个平台上重复运用的代码创立一个适当有目共睹的开场动画，并且支撑网络。
为了证明这一点，咱们将为一个名为 “Chowtime “的食物订购应用程序创立一个动态开场画面。当用户翻开该应用时，他们首要看到的是原生的Flutter开场白，看起来像这样。
你也能够在你的浏览器中看到这个演示。那么，让咱们开端吧!
规划开场白
在规划开场白时，咱们有必要考虑到这些方面。
- 增加一个与应用的图标相匹配的大元素，咱们能够在发动时当即显现出来
- 如何将这个大元素与咱们的开场画面的其他部分结合起来，包括应用程序的称号
- 在导航到应用程序的主屏幕之前显现一个快速动画
- 在之前的每个元素之间增加动画，以发明一种高质量的感觉
让咱们来看看咱们如何创立这些元素。
在Flutter中创立开场闪屏
为了创立翻开应用程序后当即显现的图像，咱们能够运用图形编辑工具，如GIMP，为咱们的开幕式创立一个512512的图像。在咱们的例子中，咱们将只运用绿色背景的字母 “C”。
假如你在你的应用程序中追求相似的概念，你能够（也应该）运用谷歌字体来寻觅最适合你的应用程序的字体，由于Flutter有一个google_fonts 包，所以你能够在Flutter应用程序中轻松运用他们的字体。
挑选字体后，将其加载到图像编辑器中，然后戏弄色彩，直到你有你想要的字体和背景色彩的调色板。
你也能够运用滴管工具来挑选特定的色彩。注意色彩的十六进制代码；经过运用十六进制代码，您能够在Flutter中增加这种切当的色彩，在代码前加上0xFF 。因而，假如色彩是9ae79a ，Flutter的对应代码是Color(0xFF9ae79a) 。
将图片增加到闪屏中
首要，将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
当增加动画到咱们的开场画面时，咱们要注意以下几点。
- 设置一个宽度和高度，不然动画会过大
- 设置一个
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.
