当前位置: 首页 > 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;在实际生产环…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...