flutter开发实战-svga播放svgaplayer_flutter直播礼物特效等效果使用

flutter开发实战-svga播放svgaplayer_flutter直播礼物特效等效果使用

最近开发过程中用到了SVGA进行播放动画，这里记录一下svgaplayer_flutter使用过程。svga可以做一些非常精美的动画，包括直播的刷礼物(火箭、跑车特效动画)等等。

效果图如下

在这里插入图片描述

一、SVGA与SVGAPlayer

  • SVGA是什么呢？

SVGA 是一种同时兼容 iOS、Android、Flutter、Web 多个平台的动画格式。

官网地址：https://svga.io/

  • SVGAPlayer是什么呢？

SVGAPlayer是一个轻量的动画渲染库。你可以使用工具从Adobe Animate CC 或者Adobe After Effects 中导出动画文件,然后使用 SVGAPlayer 在移动设备上渲染并播放。

二、svgaplayer_flutter

svgaplayer_flutter通过CustomPainter进行渲染动画。

2.1、引入svgaplayer_flutter

在工程中的pubspec.yaml中引入svgaplayer_flutter

  # svgsvgaplayer_flutter: ^2.2.0

2.2、使用SVGASimpleImage

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"),);}}

2.3、使用SVGAAnimationController

若要控制动画渲染，需要像Flutter常规动画一样创建SVGAAnimationController实例。分配给SVGAImage，使用SVGAParser加载和解码资源，然后使用SVGAAnimationController按需执行操作。

i

mport 'package:flutter/material.dart';
import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {SVGAAnimationController animationController;@overridevoid initState() {this.animationController = SVGAAnimationController(vsync: this);this.loadAnimation();super.initState();}@overridevoid dispose() {this.animationController.dispose();super.dispose();}void loadAnimation() async {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),);}
}

2.4、MovieEntity重用

AnimationController的dispose调用后，MovieEntity也将被dispose。在dispose后，MovieEntity不能再使用。
如果要重用MovieEntity，需要设置autorelease为false

final videoItem = await SVGAParser.shared.decodeFromURL("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
videoItem.autorelease = false;

最后在不需要使用videoItem，调用dispose即可

2.5、使用位图替换元素

在我参照H5时候看到代码，可以使用setImage替换元素

var player = new SVGA.Player("#pCanvas");
var parser = new SVGA.Parser('#pCanvas'); 
parser.load('https://github.com/yyued/SVGA-Samples/blob/master/angel.svga', function(item) {player.loops = 1;player.clearsAfterStop = false;player.setImage("imageUrl", "imageKey");player.setVideoItem(item);player.startAnimation();player.onFrame(function (i) {    });
});

之后找到在svgaplayer_flutter也可以使用位图替换指定元素，需要使用的是SVGADynamicEntity
setImage、setImageWithUrl

void setImage(ui.Image image, String forKey) {this.dynamicImages[forKey] = image;}Future<void> setImageWithUrl(String url, String forKey) async {this.dynamicImages[forKey] =await decodeImageFromList((await get(Uri.parse(url))).bodyBytes);}

具体实现如下

Future<void> startSVGAAnim() async {animationController = SVGAAnimationController(vsync: this);var file = await CustomCacheManager().getSingleFile("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");var bodyBytes = await file.readAsBytes();final videoItem = await SVGAParser.shared.decodeFromBuffer(bodyBytes);animationController?.videoItem = videoItem;animationController?.videoItem?.dynamicItem.setImageWithUrl("图片地址", "img_key");animationController?.forward().whenComplete(() {});if (mounted) {setState(() {});}}

imageKey为SVGA动画中的图层png的文件名，图层png的文件名为abc.png，那么imageKey则为abc。

2.6、使用文本替换元素

在上面使用位图替换指定元素，也可以使用文本替换元素。

在SVGADynamicEntity，可以找到方法

void setText(TextPainter textPainter, String forKey) {if (textPainter.textDirection == null) {textPainter.textDirection = TextDirection.ltr;textPainter.layout();}this.dynamicText[forKey] = textPainter;}

具体文本替换元素的代码

Future<void> startSVGAAnim() async {animationController = SVGAAnimationController(vsync: this);var file = await CustomCacheManager().getSingleFile("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");var bodyBytes = await file.readAsBytes();final videoItem = await SVGAParser.shared.decodeFromBuffer(bodyBytes);animationController?.videoItem = videoItem;animationController?.videoItem?.dynamicItem.setText(TextPainter(text: TextSpan(text: "Flutter!",style: TextStyle(fontSize: 20,color: Colors.red,fontWeight: FontWeight.bold,))),"imageKey");animationController?.forward().whenComplete(() {});if (mounted) {setState(() {});}}

imageKey为SVGA动画中的图层png的文件名，图层png的文件名为abc.png，那么imageKey则为abc。

2.7、隐藏显示指定元素

在SVGADynamicEntity也可以隐藏显示指定元素。

SVGADynamicEntity类中找到方法

void setHidden(bool value, String forKey) {this.dynamicHidden[forKey] = value;}

具体隐藏显示指定元素的代码

Future<void> startSVGAAnim() async {animationController = SVGAAnimationController(vsync: this);var file = await CustomCacheManager().getSingleFile("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");var bodyBytes = await file.readAsBytes();final videoItem = await SVGAParser.shared.decodeFromBuffer(bodyBytes);animationController?.videoItem = videoItem;animationController?.videoItem?.dynamicItem.setHidden(true, "imageKey"); // true隐藏元素，false显示元素animationController?.forward().whenComplete(() {});if (mounted) {setState(() {});}}

imageKey为SVGA动画中的图层png的文件名，图层png的文件名为abc.png，那么imageKey则为abc。

2.8、指定元素动态绘制

在SVGADynamicEntity可以在指定元素动态绘制图形。

SVGADynamicEntity类中找到方法

void setDynamicDrawer(SVGACustomDrawer drawer, String forKey) {this.dynamicDrawer[forKey] = drawer;}

具体在指定元素动态绘制图形的代码

Future<void> startSVGAAnim() async {animationController = SVGAAnimationController(vsync: this);var file = await CustomCacheManager().getSingleFile("https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");var bodyBytes = await file.readAsBytes();final videoItem = await SVGAParser.shared.decodeFromBuffer(bodyBytes);animationController?.videoItem = videoItem;animationController?.videoItem?.dynamicItem.setDynamicDrawer((canvas, frameIndex) {canvas.drawRect(Rect.fromLTWH(50, 50, 100, 100), Paint()..color = Colors.blue);}, "forKey");animationController?.forward().whenComplete(() {});if (mounted) {setState(() {});}}

forKey为SVGA动画中的图层png的文件名，图层png的文件名为abc.png，那么imageKey则为abc。

三、小结

flutter开发实战-svga播放svgaplayer_flutter使用，svgaplayer_flutter播放SVGA，替换指定元素。

学习记录，每天不停进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/29557.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于51单片机和proteus的电流采集系统

基于51单片机和proteus的电流采集系统

此系统是基于51单片机和proteus的仿真设计&#xff0c;功能如下&#xff1a; 1. LCD1602实时显示获取到电流值及设定值。 2. 按键可调整电流设定值。 3. 电流值过高则蜂鸣器报警。 4. 指示灯指示电流及系统状态。 5. 系统信息可通过串口实时更新。 功能框图如下&#xff1…
阅读更多...
【Linux】内存使用相关

【Linux】内存使用相关

free 命令 查看内存大小 free -g :G单位 free -h : 可读性较高较理解 free -m : MB单位 total: 总内存used: 正在运行的进程使用的内存(used total – free – buff/cache)free: 未使用的内存 (free total – used – buff/cache)shared: 多个进程共享的内存buffers: 内存保留…
阅读更多...
C语言--程序环境和预处理

C语言--程序环境和预处理

翻译环境 C语言的代码是文本信息&#xff0c;对于计算机来说无法直接理解&#xff0c;需要通过翻译环境进行翻译成二进制信息&#xff1b; 我们在写代码的时候&#xff0c;一般都会写在一个源文件中&#xff0c;这时候我们就使用我们的编译器(VS)将其转换为机器代码&#xff0…
阅读更多...
数据库应用：MySQL高级语句（一）

数据库应用：MySQL高级语句（一）

目录 一、理论 1.常用查询 2.函数 3.进阶查询 二、实验 1.普通查询 2.函数 3.进阶查询 三、问题 1.MySQL || 运算符不生效 四、总结 一、理论 1.常用查询 常用查询包括&#xff1a;增、删、改、查&#xff1b; 对 MySQL 数据库的查询&#xff0c;除了基本的查询外…
阅读更多...
【OC总结- Block】

【OC总结- Block】

文章目录 前言2. Block2.1 Block的使用规范2.2 __block修饰符2.3 Block的类型2.4 Block的循环引用及解决循环引用的场景引入解决循环引用Block循环引用场景 2.5 Block的实现及其本质2.5.1 初始化部分2.5.2 调用部分2.5.3 捕获变量 Block本质2.6 Block捕获变量 和 对象2.7 Block…
阅读更多...
访问Liunx文件系统

访问Liunx文件系统

访问Liunx文件系统 识别文件系统和设备 存储管理概念 Linux服务器上文件按文件系统层次结构访问。该文件系统层次结构测试由系统可用的存储设备所提供的文件系统组装而来。每个文件系统都是一个已格式化的存储设备&#xff0c;可用于存储文件。 文件系统和挂载点 要让文件系…
阅读更多...
perl输出中文乱码【win10】

perl输出中文乱码【win10】

perl输出中文乱码 运行的时候输出的内容变成了中文乱码&#xff0c;原因首先来查找一下自己的perl的模块里面是否有Encode-CN。请运行打开你的cmd并输入perldoc -l Encode::CN 如果出现了地址 则就是有&#xff0c;如果没有需要进行该模块的安装。 安装方式有很多种&#xff0…
阅读更多...
Unity---Spine动画

Unity---Spine动画

目录 1.介绍 2.优点 3.spine导出的unity资源 4.导入 5.导入报错的解决方案 6.使用 7.代码示例 1.加载Spine骨骼动画&#xff1a; 2.控制Spine动画的播放&#xff1a; 3.暂停和恢复动画播放&#xff1a; 4.监听动画事件&#xff1a; 5.切换皮肤&#xff08;换装&…
阅读更多...
C++ vector容器注意事项

C++ vector容器注意事项

容量&#xff08;capacity&#xff09;和大小&#xff08;size&#xff09;的区别 vector 容器的容量&#xff08;用 capacity 表示&#xff09;&#xff0c;指的是在不分配更多内存的情况下&#xff0c;容器可以保存的最多元素个数&#xff1b;而 vector 容器的大小&#xff…
阅读更多...
智能ai绘画软件帮你用科技点亮创意火花

智能ai绘画软件帮你用科技点亮创意火花

李明&#xff1a;嘿&#xff0c;你听说过ai绘画软件吗&#xff1f;我最近对数字艺术产生了浓厚的兴趣 王磊&#xff1a;当然&#xff01;ai绘画软件真是太神奇了&#xff01;它可以将抽象的文字描述转换成惊人的艺术作品。 李明&#xff1a;是吗&#xff1f;它们绘制的效果怎…
阅读更多...
Kubernetes_1.27.3_Harbor结合Nacos实战

Kubernetes_1.27.3_Harbor结合Nacos实战

Nacos 实战 作者：行癫（盗版必究） 一：Nacos简介 1.简介 ​ Nacos是 Dynamic Naming and Configuration Service的首字母简称，一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台；Nacos 致力于帮助您发现、配置和管理微服务；Nacos 提供了一组简单易用的特…
阅读更多...
RabbitMQ安装

RabbitMQ安装

这里写目录标题 简介下载ELANG安装ELang配置环境变量安装RabbitMQ 简介 RabbitMQ 是一个开源的遵循 AMQP 协议实现的基于 Erlang语言编写&#xff0c;**即需要先安装部署Erlang环境再安装RabbitMQ环境。**需加注意的是&#xff0c;读者若不想跟着我的版本号下载安装&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023