当前位置: 首页 > news >正文

flutter 播放SVGA动图

        SVGAPlayer-Flutter:这是一个轻量级的动画渲染库,可以通过Flutter CustomPainter原生渲染动画,为您带来高性能,低成本的动画体验123。

您可以按照以下步骤使用 SVGAPlayer-Flutter 插件:

1.在 pubspec.yaml 文件中添加以下依赖项:

dependencies:svgaplayer_flutter: ^2.2.0

2.在需要使用插件的文件中导入插件:

import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';

 3.在需要播放 SVGA 动画的位置添加 SvgaPlayer 组件:这个是最简单的播放网络图

class MyWidget extends Widget {@overrideWidget build(BuildContext context) {return Container(child: SVGASimpleImage(resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"),);}}

4.播放本地SVGA动画图 

class MyWidget extends Widget {@overrideWidget build(BuildContext context) {return Container(child: const SVGASimpleImage(assetsName: '本地svga路径',));}}

这里是最简单的播放svga动画,无需其他操作。

SVGASimpleImage属性说明直接看我写的这篇文章就好

地址flutter 播放svga插件SVGAImage属性说明_flutter svga-CSDN博客

这里将一下如何自定义svga尺寸和控制svga动画播放次数和播放完成监听

1.控制svga尺寸,上述的代码会根据svga本身大小来显示,这里如果需要控制他的大小,需要在 SVGA的组件外层加一个父容器即可解决。这样就会生成一个高270.h宽270.h的一个svga动图播放

SizedBox(height: 270.h,width: 270.h,child: SVGASimpleImage(resUrl: list[i].svga_img!),)

2.控制svga播放方式,需要替换SVGASimpleImageSVGAImage,如果想控制他的播放方式需要写一个动画控制器,这里使用的repeat可以一直循环动画播放。

import 'package:flutter/material.dart';
import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}// SingleTickerProviderStateMixin 单个动画  TickerProviderStateMixin多个动画
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {SVGAAnimationController animationController;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化(可以哪里用加哪里)loadAnimation();super.initState();}@overridevoid dispose() {animationController.dispose();super.dispose();}//自定义方法void loadAnimation() async {//放入网络地址的svga动画final videoItem = await SVGAParser.shared.decodeFromURL("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");this.animationController.videoItem = videoItem;this.animationController.repeat() // Try to use .forward() .reverse() 这里是动画方式.whenComplete(() => this.animationController.videoItem = null);}@overrideWidget build(BuildContext context) {return Container(child: SVGAImage(this.animationController),);}
}//动画属性说明一下
enum AnimationStatus {/// 动画开始时结束dismissed,/// 动画开始forward,/// 逆向动画reverse,/// 动画完成结束completed,
}this.animationController ?.addStatusListener((status) => print('---status---$status'));

3.如果想播放一遍就停止,并进行你自己的操作,可以这样使用。使用forward

import 'package:flutter/material.dart';
import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}// SingleTickerProviderStateMixin 单个动画  TickerProviderStateMixin多个动画
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {SVGAAnimationController animationController;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化(可以哪里用加哪里)loadAnimation();super.initState();}@overridevoid dispose() {animationController.dispose();super.dispose();}//自定义方法void loadAnimation() async {//放入网络地址的svga动画final videoItem = await SVGAParser.shared.decodeFromURL("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");this.animationController.videoItem = videoItem;this.animationController.forward() // Try to use .forward() .reverse() 这里是动画方式.whenComplete(() => this.animationController.videoItem = null);// 监听动画animationController.addListener(() {if(animationController!.isCompleted){//动画播放完成,进行你自己的操作}});}@overrideWidget build(BuildContext context) {return Container(child: SVGAImage(this.animationController),);}
}
进阶玩法

       如果你一个页面要操作n个动画,使用同一个播放SVGA插件进行播放的时候就需要用到如下方法了。就是每次运行结束后要把动画的监听移除掉,要不然后续运行的时候会走2遍,再次运行可能就是4遍。所以必须要每次使用都要移除一遍,确保使用的这个是最新的这个!

//在需要的地方进行调用即可
void showSVGA(String urlSVGA) async {// 动画正在进行中不做处理if (animationControllerSL.isAnimating) {LogE('进行中====');} else {final videoItem = await _loadSVGA(true, urlSVGA);videoItem.autorelease = false;animationControllerSL?.videoItem = videoItem;animationControllerSL?.forward() // Try to use .forward() .reverse().whenComplete(() => animationControllerSL?.videoItem = null);// 监听动画animationControllerSL?.addListener(_animListener);}}void _animListener() {//TODOif (animationControllerSL.isCompleted) {LogE('动画结束 ${DateTime.now()}');setState(() {// 动画播放到最后一帧时停止播放animationControllerSL?.stop();//移除动画监听animationControllerSL.removeListener(_animListener);});}}//播放svga的组件替换成这个
SizedBox(height: double.infinity,width: double.infinity,child: SVGAImage(animationControllerSL,    //动画控制器fit: BoxFit.fitHeight, //svga动画需要占据空间的方式),
),

到此,无论是播放本地还是网络地址,修改尺寸,控制播放次数等操作完全可以正常运行使用。

相关文章:

flutter 播放SVGA动图

SVGAPlayer-Flutter&#xff1a;这是一个轻量级的动画渲染库&#xff0c;可以通过Flutter CustomPainter原生渲染动画&#xff0c;为您带来高性能&#xff0c;低成本的动画体验123。 您可以按照以下步骤使用 SVGAPlayer-Flutter 插件&#xff1a; 1.在 pubspec.yaml 文件中添…...

鸿蒙开发软件汉化

一、打开设置 File>Settings>Plugins>Marketplace&#xff0c;输入Chinese搜索插件&#xff08;有的人是搜不到的&#xff09;&#xff0c;但别慌&#xff0c;选择Marketplace傍边的 Installed 按钮&#xff0c;里面就有Chinese插件(如果搜索出来的东西比较多往下就可…...

Three.js Tri-panner (三面贴图) 材质 两种实现方式

文章目录 介绍自定义shaderNodeMaterial骨骼材质特殊处理 介绍 Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持 需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial 下面展示两种实现方式 自定义shader /*** description: 替换三角面…...

Docker部署Flask项目

Docker部署Flask项目 一、准备项目代码二、编写Dockerfile三、服务器部署 一、准备项目代码 这里写了一个简单的Flask的demo&#xff0c;源代码如下&#xff1a; from flask import Flaskapp Flask(__name__)app.route("/") def index():return "<h1 styl…...

Git将某个文件合并到指定分支

企业开发中&#xff0c;经常会单独拉分支去做自己的需求开发&#xff0c;但是某些时候一些公共的配置我们需要从主线pull&#xff0c;这时候整个分支merge显然不合适 1.切换至待合并文件的分支 git checkout <branch>2.将目标分支的单个文件合并到当前分支 git checkou…...

Dockerfile构建镜像以及阿里云上传

前言 我们在使用docker部署微服务项目的时候会发现这样一个问题&#xff1a;每个服务构建出的镜像文件都很大&#xff0c;几百M&#xff0c;有些原始镜像也已经占据了很多内存了... 这种大的镜像往往都会导致迁移的速度变慢。其实我们启动容器主要最需要的镜像是jdk&#xff0…...

锂离子电池建模综述

锂电池很有吸引力&#xff0c;因为在元素周期表中&#xff0c;锂是一种非常正电的元素&#xff0c;它也恰好是最轻的金属&#xff0c;密度是水的一半。通常&#xff0c;电池由串联/并联的电化学电池组成。每个电池都包含一个负极&#xff08;放电时为阳极&#xff09;和一个由电…...

获取淘宝商品销量数据的方法分享(API、爬虫技术)

随着电子商务的飞速发展&#xff0c;获取淘宝商品销量数据的需求越来越强烈。无论是商家、分析师还是研究人员&#xff0c;都需要这些数据来了解市场趋势、竞争对手情况以及制定营销策略。本文将分享如何通过API和爬虫技术获取淘宝商品销量数据。 一、API获取数据 淘宝开放平…...

android 自定义八边形进度条

自定义八边形动画效果图如下 绘制步骤&#xff1a; 1.先绘制橙色底部八边形实心 2.黑色画笔绘制第二层&#xff0c;让最外层显示一条线条宽度即可 3.再用黄色画笔绘制黄色部分 4.使用渐变画笔根据当前进度绘制覆盖黄色部分 5.使用黑色画笔根据当前进度绘制刻度条 6.黑色画笔绘制…...

域名群站开源系统分享开源域名授权系统

一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则&#xff0c;否则将无法访问文章栏目页面。 三、启用伪静态功能&#xff0c;请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件&#xff0c;填入数据库的账号和…...

CTF - Web 干货

目录 1、php反序列化之pop链构造 2、常见php伪协议的使用 &#xff08;1&#xff09;php://filter &#xff08;2&#xff09;php://input 3、文件上传常规操作 (1) 前端绕过 (2) 修改文件类型 (3) 配合.user.ini 或.htaccess解析 (4) 爆破可解析后缀 (5) 针对Windows…...

mobi文件怎么转换成pdf?

mobi文件怎么转换成pdf&#xff1f;在数字化时代&#xff0c;电子书籍成为了越来越受欢迎的阅读方式。我们可以通过多种格式的电子书来获取知识和娱乐&#xff0c;其中一种常见的格式就是Mobi文件。Mobi文件是亚马逊公司开发的一种电子书格式&#xff0c;它主要用于Kindle设备和…...

spakr 提交任务

当前集群支持3中集群管理 Standalone&#xff08;spak框架自身拥有能力&#xff09;Apache Mesos Hadoop YARN Kubernetes 使用/spark-submit脚本提交任务&#xff0c;脚本后面可以接参数 ./bin/spark-submit \--class <main-class> \--master <master-url> \--de…...

What is `addFormattersdoes` in `WebMvcConfigurer` ?

addFormatters 方法在SpringMVC框架中主要用于向Spring容器注册自定义的格式化器&#xff08;Formatter&#xff09; SpringMVC内置了一系列的标准格式化器&#xff0c;用于处理日期、数字和其他常见类型的转换。 开发者也可以通过实现 WebMvcConfigurer 接口&#xff0c;并重写…...

新冠疫情数据可视化分析大屏

项目背景&#xff1a; 新冠疫情的爆发对全球造成了深远的影响&#xff0c;实时监控和数据分析成为公共卫生管理的重要组成部分。为了更好地追踪疫情动态&#xff0c;本项目旨在开发一个集疫情数据采集、处理、分析与可视化于一体的大屏监控系统。 项目介绍&#xff1a; 本项…...

c#异形窗体遮罩效果

c#异形窗体遮罩效果&#xff0c;移动&#xff0c;关闭&#xff0c;最大化&#xff0c;最小化&#xff0c;还原操作 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Drawing.Drawing2D…...

橘子学Mybatis07之Mybatis关于缓存的设计

很逆天的一件事是&#xff0c;我上一次发mybatis是在2022年10月15号&#xff0c;然后直到今天才开始总结下一篇Mybatis的东西。一年里面忙成那啥了&#xff0c;而且重心都投入在了Elasticsearch的学习上面&#xff0c;基本一年下来都在搞ES&#xff0c;并且考下了ECE认证&#…...

怎样制作一本旅游电子相册呢?

​随着数码技术的发展&#xff0c;旅游电子相册已成为越来越多旅游爱好者的必备工具。它不仅能让您随时随地欣赏自己的旅行回忆&#xff0c;还能分享给亲朋好友&#xff0c;甚至上传到社交媒体上&#xff0c;让更多人了解您的旅行故事。那么&#xff0c;如何制作一本精美的旅游…...

Windows搭建OpenCV环境(Python+Anaconda)

Windows搭建OpenCV环境(PythonAnacondapycharm) Anaconda&#xff0c;中文大蟒蛇&#xff0c;是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。其中包含python调opencv相关的依赖&#xff0c;相当于大礼包全家桶。 下载地址&#xf…...

linux-等保三级脚本(2)

该脚本主要是针对 CentOS Linux 7 合规基线加固的一些配置操作&#xff0c;包括创建用户、安全审计配置、入侵防范配置、访问控制配置、身份鉴别策略配置等。如果您需要在脚本中添加公司网址&#xff0c;您可以在适当的位置添加相应的内容。不过请注意&#xff0c;在实际生产环…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...