乐趣区

关于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…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

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

Flutter 零根底入门

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

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

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

Flutter 组件开发

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

Flutter Bloc

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

Flutter Getx4

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

Docker Yapi

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

退出移动版