关于flutter:flutter-启动屏幕使用-Lottie-动画

猫哥说

因为出差关系来了重庆，很美的一个城市，走在街道上感觉就是在爬山，生活节奏绝对比较慢，心愿疫情远离咱们。

感激群里重庆好友能抽时间进去团聚。

正题开始

lottie 是一个夸平台的动画库，用这个能够做出酷炫动画。

其实作为一个前端还是要略微会一点点美术、动画、几何数学。

https://lottiefiles.com/

https://github.com/airbnb/lot...

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

https://mamuseferha.medium.co...

代码

https://github.com/debbsefe/L...

参考

https://lottiefiles.com/
https://github.com/airbnb/lot...
https://github.com/debbsefe/L...

注释

在构建挪动应用程序时，启动画面十分常见。它们通常是在应用程序开始时显示的动态屏幕。这个屏幕能够帮忙你通知你的用户应用程序是对于什么的，通过显示你的应用程序标记或应用程序名称。

如果你想更进一步，真正吸引用户的注意力，能够思考在启动画面上应用动画图片。应用 Lottie 显示一个动画图像就像在你的应用程序中应用 Image 小部件一样简略。

开始

首先，创立一个新的 flutter 我的项目。

flutter pub add lottie

通过粘贴以下代码创立启动画面小部件。

class SplashScreen extends StatefulWidget {  const SplashScreen({Key key}) : super(key: key);  @override  _SplashScreenState createState() => _SplashScreenState();}class _SplashScreenState extends State<SplashScreen>    with TickerProviderStateMixin {  AnimationController _controller;  @override  void initState() {    super.initState();    _controller = AnimationController(      duration: Duration(seconds: (5)),      vsync: this,    );  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Lottie.asset(        'assets/splash_lottie.json',        controller: _controller,        height: MediaQuery.of(context).size.height * 1,        animate: true,        onLoaded: (composition) {          _controller            ..duration = composition.duration            ..forward().whenComplete(() => Navigator.pushReplacement(                  context,                  MaterialPageRoute(builder: (context) => HomePage()),                ));        },      ),    );  }}

Splash screen 小部件是一个有状态小部件，它在其 build 办法中保留 Lottie 文件。动画控制器在 initState 中创立，并在控制器属性中应用。

若要在动画实现后导航到下一个页面，请应用带有 LottieComposition 的 onLoaded 回调。这容许您有更多的信息和管制的 Lottie 文件。

onLoaded: (composition) {  _controller  ..duration = composition.duration  ..forward().whenComplete(() => Navigator.pushReplacement(    context,    MaterialPageRoute(builder: (context) => HomePage()),));    },

动画实现后，导航到下一页。

我在代码中增加了一个启动画面导航到的主页小部件。

class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(child: Text('Homepage')),    );  }}

以 scaffold 为核心的简略文本小部件。

当初你能够持续为你的用户创立更具视觉吸引力的利用了。

不要遗记将 Lottie 文件作为资产增加到 pubspec.yaml 中，否则，动画将不会显示。你也能够在 GitHub 上找到残缺的我的项目。

https://github.com/debbsefe/L...

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...