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

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

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

正题开始

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

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

https://lottiefiles.com/

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

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

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

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

猫哥说

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

微信 flutter 研修群 ducafecat

原文

代码

参考

注释

开始

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

猫哥说

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