flutter lottie animation progress bar 美丽多彩生动的动画进度条

头好晕呀2023-08-15 10:53

flutter lottie animation progress bar 美丽多彩生动的动画进度条

flutter支持使用lottie动画，有了lottie，我们也可以在flutter中实现很多炫酷的动画效果，这次为我们就来学习使用lottie动画，实现一个显示系统内存使用状态的动画进度条。本文将涉及到lottie动画播放控制、Isoalte多线程、系统信息获取等知识。

Lottie

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，是一种基于 JSON 的动画文件格式，设计师可以使用 Adobe After Effects 设计出漂亮的动画并导出成 JSON 格式，允许您在任何平台上发布动画，就像交付静态资产一样容易。它们是在任何设备上都可以使用的小文件。LottieFiles 允许您以最简单的方式创建、编辑、测试、协作和交付 Lottie。

文件大小

与其他格式（如 GIF 或 MP4）相比，Lottie 动画要小得多，同时保持相同的质量。

无限可扩展

Lottie 动画基于矢量，这意味着您可以放大和缩小它们，而不必担心分辨率。

多平台支持和库

对于所有开发人员来说，Lottie 交接非常容易。您可以在iOS，Android，Web和React Native上使用Lottie动画，而无需修改。

互动

在 Lottie 动画中，动画元素是公开的，因此您可以操作它们以使其具有交互性并响应滚动、单击和悬停等交互。

Lottie for Flutter

Lottie for Flutter适用于Android，iOS，macOS，linux，Windows和Web。插件地址：github.com/xvrh/lottie...。在flutter中使用lottie也很简单，可以使用Lottie.asset设置本地资源，也可以使用Lottie.network设置网络lottie资源。如下代码所示：

scala 复制代码 
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // Load a Lottie file from your assets
            Lottie.asset('assets/LottieLogo1.json'),

            // Load a Lottie file from a remote url
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

            // Load an animation and its images from a zip file
            Lottie.asset('assets/lottiefiles/angel.zip'),
          ],
        ),
      ),
    );
  }
}

lottie animation progress bar 动画进度条

lottie动画文件下载使用

接下来我们来实现一个动画进度条来显示内存使用情况。首先到lottiefiles.com/上找一些免费的lottie进度条动画文件下载下来使用。放到我们的本地文件夹中，还需要在pubspec.yaml文件中对本地资源进行设置。

yaml 复制代码 
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
      - assets/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

接着使用 Lottie.asset()导入本地lottie动画资源, 导入本地动画资源时还可以通过 width、height属性设置要显示的动画的大小。使用Column组件放在外层，这样我们就可以将四个lottie动画文件竖着展示出来。结合使用Padding和Center组件来调整动画显示的位置，让他看起来顺眼一些。

scala 复制代码 
 
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Padding(padding: EdgeInsets.all(20)),
            Lottie.asset(
              'assets/78495-progress.json',
              width: 150,
              height: 150,
            ),
            Lottie.asset(
              'assets/88697-neomorphism-radial-progress-bar-style-2-light-theme-01.json',
              width: 150,
              height: 150,
            ),
            Lottie.asset(
              'assets/91938-green-progress-bar-without-popover.json',
              width: 200,
              height: 150,
            ),
            Lottie.asset(
              'assets/93125-progress-bar.json',
              width: 300,
              height: 100,
            ),
          ],
        ),
      ),
    );
  }
}

效果图：

lottie动画播放控制

实际使用的环境会很复杂，我们需要控制动画的播放状态，lottie可以使用AnimationController控制动画的播放。首先定义late final AnimationController _controller;动画控制器，然后在asset中指定我们声明的控制器，这样我们就可以在外部使用_controller控制动画的播放状态。

less 复制代码 
 Lottie.asset(
    'assets/78495-progress.json',
    width: 150,
    height: 150,
    controller: _controller,
    onLoaded: (composition) {
    setState(() {
   _controller.duration = composition.duration;
     });
    },
 ),

为了控制动画播放，我们需要添加一些按钮，点击按钮时对动画的播放状态进行控制，使用Row组件横向包裹三个TextButton按钮，分别控制动画播放状态的前进、停止、后退，设置 mainAxisAlignment: MainAxisAlignment.center,居中显示按钮。只要使用_controller.forward();、_controller.stop();、 _controller.reverse();按个控制器方法就可以分别控制动画的前进、停止、后退。

less 复制代码 
Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            _controller.forward();
          },
          child: Text("前进"),
        ),
        TextButton(
          onPressed: () {
            _controller.stop();
          },
          child: Text("暂停"),
        ),
        TextButton(
          onPressed: () {
            _controller.reverse();
          },
          child: Text("后退"),
        ),
      ],
    )

效果图：

内存使用状态展示

我们使用system_info2插件来读取内存使用状态，本来想同时显示CPU使用率，但是找了半天没找到Windows下读取CPU使用率的插件，还是很遗憾的。因为使用system_info2读取内存比较耗费时间，导致我们的UI会有卡顿，所以我要新建一个Isolate来读取我们的内存状态，在新isolate中设置定时器，定时读取内存状态，计算出内存使用率，并将结果发回到UI Isoalte，通知UI进行页面更新。在UI Isolate中 使用receivePort.listen监听新isolate发回来的结果，利用此结果控制动画的播放。_controller.animateTo和_controller.animateBack可以控制动画正向或者逆向播放到某一帧，这正是我所需要的。

ini 复制代码 
void makenewisolate() {
  ReceivePort receivePort = ReceivePort();
  Isolate.spawn(newisolate, receivePort.sendPort);
  receivePort.listen((message) {
    if (message > _controller.value) {
      _controller.animateTo(message);
    }
    if (message < _controller.value) {
      _controller.animateBack(message);
    }
  });
}

void newisolate(SendPort sendPort) {
  var timer = Timer.periodic(const Duration(seconds: 2), (timer) {
    const int megaByte = 1024 * 1024;
    var last = 1 -
        ((SysInfo.getFreePhysicalMemory() ~/ megaByte) /
            (SysInfo.getTotalPhysicalMemory() ~/ megaByte));
    sendPort.send(last);
  });
}

效果图：

可以看到，我们的进度条会随着内存的使用情况进行变化，反应出内存的使用情况。图中四个进度条只有后两个比较如实的反应内存使用情况，前两个动画显示的百分比不是很正确，这是由于前两个动画不是从0%开始的，都有一个前摇，导致百分比无法完全对应，后续可以针对问题再进行优化。

总结

这次简单的学习了lottie动画在flutetr中的使用、控制方法，效果还是很不错的。同时还涉及到了flutter多线程Isolate的使用。后续让我们一起继续深入学习吧。

完整代码：

less 复制代码 
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:system_info2/system_info2.dart';
import 'package:lottie/lottie.dart';
import 'dart:isolate';

late final AnimationController _controller;

void main() async {
  makenewisolate();
  runApp(const Homepage());
}

void makenewisolate() {
  ReceivePort receivePort = ReceivePort();
  Isolate.spawn(newisolate, receivePort.sendPort);
  receivePort.listen((message) {
    if (message > _controller.value) {
      _controller.animateTo(message);
    }
    if (message < _controller.value) {
      _controller.animateBack(message);
    }
  });
}

void newisolate(SendPort sendPort) {
  var timer = Timer.periodic(const Duration(seconds: 2), (timer) {
    const int megaByte = 1024 * 1024;
    var last = 1 -
        ((SysInfo.getFreePhysicalMemory() ~/ megaByte) /
            (SysInfo.getTotalPhysicalMemory() ~/ megaByte));
    sendPort.send(last);
  });
}

class Homepage extends StatelessWidget {
  const Homepage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const Scaffold(
        body: MyApp(),
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Padding(padding: EdgeInsets.all(20)),
            Lottie.asset(
              'assets/78495-progress.json',
              width: 150,
              height: 150,
              controller: _controller,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Lottie.asset(
              'assets/88697-neomorphism-radial-progress-bar-style-2-light-theme-01.json',
              width: 150,
              height: 150,
              controller: _controller,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Lottie.asset(
              'assets/91938-green-progress-bar-without-popover.json',
              width: 200,
              height: 150,
              controller: _controller,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Lottie.asset(
              'assets/93125-progress-bar.json',
              width: 300,
              height: 100,
              controller: _controller,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: () {
                    _controller.forward();
                  },
                  child: Text("前进"),
                ),
                TextButton(
                  onPressed: () {
                    _controller.stop();
                  },
                  child: Text("暂停"),
                ),
                TextButton(
                  onPressed: () {
                    _controller.reverse();
                  },
                  child: Text("后退"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
相关推荐
2401_882727571 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder1 小时前
CSS系列（36）-- Containment详解
前端·css
anyup_前端梦工厂2 小时前
初始 ShellJS：一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand2 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL2 小时前
vue3入门教程：ref能否完全替代reactive？
前端·javascript·vue.js
六卿2 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫2 小时前
【前端】详解前端三大主流框架：React、Vue与Angular的比较与选择
前端·vue.js·react.js
zhangphil3 小时前
Android绘图Path基于LinearGradient线性动画渐变，Kotlin（2）
android·kotlin
m0_748256143 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
watl03 小时前
【Android】unzip aar删除冲突classes再zip
android·linux·运维
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10STM32 无法烧录