Flutter lottie开机启动动画

最新推荐文章于 2024-05-04 15:54:01 发布

ywolfsmc

最新推荐文章于 2024-05-04 15:54:01 发布

阅读量916

点赞数

分类专栏： Flutter 文章标签： android

本文链接：https://blog.csdn.net/fastxun/article/details/126534725

版权

Flutter 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一款app在启动预加载数据时，少不了采用开机启动动画方案。今天介绍lottie制作开机启动动画。

Lottie官网地址：https://lottiefiles.com/

项目源码：

Flutter手机端 lottie实现开机启动动画源码-前端元素由前端元素eleui.cn整理，由lottie实现flutter手机端开机启动动画，包含源代码https://www.eleui.cn/detail/72818ea6fb909253.html

第一步：在pubspec.yaml中用lottie

lottie: ^1.3.0

第二步：在主目录下创建assets文件夹并将水滴json放入文件夹中，并在pubspec.yaml中引用

flutter:

  assets:
    - assets/water-drop.json

第三步：代码结构

（1）先创建一个启动页面，然后在main中先引用这个启动界面

（2）在启动页面中引用lottie包

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

import 'index_page.dart';

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: const Duration(seconds: (5)),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/water-drop.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) => const IndexPage()),
            ));
        },
      ),
    );
  }
}

Lottie.assets 加载动画，onLoaded回调动画加载完成后的处理，这里动画加载完，直接进入首页面。

源码上方有链接。