共计 2585 个字符，预计需要花费 7 分钟才能阅读完成。
猫哥说
因为出差关系来了重庆，很美的一个城市，走在街道上感觉就是在爬山，生活节奏绝对比较慢，心愿疫情远离咱们。
感激群里重庆好友能抽时间进去团聚。
正题开始
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…