svga / svgaplayer-flutter Goto Github PK
View Code? Open in Web Editor NEWThe SVGAPlayer implementation of Flutter using CustomPainter.
License: Other
The SVGAPlayer implementation of Flutter using CustomPainter.
License: Other
could anything be done to solve the difference between the animation file and the svga file ? 👇
temp.zip
❤️
目前的svga通过PE导出的时候会有一段没有path的形状。
type: ELLIPSE
ellipse: {
}
styles: {
stroke: {
r: 0.19607843458652496
g: 0.6666666865348816
b: 1.0
a: 1.0
}
SVGAPlayer-Flutter/lib/painter.dart
Lines 324 to 330 in 9a0faac
在这一段代码中,他会画成一个方块
attach file:
shape.svga.zip
单纯的使用了SVGASimpleImage.asset进行某个动画的循环播放,但是导致了ios,Android(三星尤其)发热严重,这个主要是什么原因导致的呢,可以优化么?
不管是复杂的还是简单的都会有这个问题
如题,在如下场景,有一个头像装饰列表,里面都是svga,一个头像控件,点击头像装饰列表中的item时,将对应的item中资源加载到头像上,会切换不成功,
原因是在源码 SVGASimpleImage 的initState 中,直接通过 如下代码解析资源:
Future decode;
if (widget.resUrl != null) {
decode = SVGAParser.shared.decodeFromURL(widget.resUrl);
} else if (widget.assetsName != null) {
decode = SVGAParser.shared.decodeFromAssets(widget.assetsName);
} else if (widget.file != null) {
decode = widget.file.readAsBytes().then((bytes) {
return SVGAParser.shared.decodeFromBuffer(bytes);
});
}
decode.then((videoItem) {
if (mounted) {
this.animationController
..videoItem = videoItem
..repeat();
}
});
但是在点击列表切换的时候,这个initState并不会执行,而是会执行到 build 方法中,在 build方法中 初始化SVGAImage 时用的animationController 并没有变,不重新解析的话,animationController.videoItem 并不会改变,最终导致资源路径没有变,
目前的做法是把解析这段代码在提出来,在build中在解析一遍,不知道有没有别的更好的方法
更新了AE2020后,svga导出时会提示「将不写入渲染日志」「无法转换Unicode字符」
My project is using protobuf ^1.0.0 which is higher than your version. When I rollback to ^0.13.4, tons of error happened in proto generated dart file. I have checked the release message of dart protobuf and the 1.0.0 is released in the same month with 0.13, so I think you should update the protobuf version.
使用dynamicItem.setText设置动态文本没有任何效果,请问是什么原因?key对应正确。
SVGA设置动态文本内容在1.1.0版本无用,但是在1.0.1版本正常了,请问是不是更新1.1.0版本遗漏了什么,还是避免了什么bug
如题
flutter 只让svga 播一次,和监听是怎么做呢
版本:v2.0.0
播放SVGA动画时,出现RangeError (index): Invalid value: Not in inclusive range 0..1: 2错误
定位错误出现SVGAPainter buildDPath方法上,结合源码和SVGA数据分析后发现,buildDPath在解析带有科学计数法的数值时会出错,原因出现在下面这行代码中:
上面这段正则表达式的作用是解析SVGA DPath的数据,分析可以得出结论,当解析带有科学计数法的数值时,数值后的e会被"|||"截掉。下面是一段带有科学计数法数值的SVGA的DPath数据:
M340.262 2.842e-14 C340.262 2.842e-14 161.700 2.842e-14 161.700 2.842e-14 C147.387 2.842e-14 136.762 9.937 136.762 24 C136.762 24 136.762 256.687 136.762 256.687 C136.762 271 149.387 282 160.524 282 C160.524 282 340.450 282 340.450 282 C353.387 282 364.762 270.062 364.762 258.937 C364.762 258.937 364.762 23 364.762 23 C364.762 11.954 353.762 2.842e-14 340.262 2.842e-14 Z
通过上面的代码解析后,得到下面的内容:
|||M 340.262 2.842|||e -14 |||C 340.262 2.842|||e -14 161.700 2.842|||e -14 161.700 2.842|||e -14 |||C 147.387 2.842|||e -14 136.762 9.937 136.762 24 |||C 136.762 24 136.762 256.687 136.762 256.687 |||C 136.762 271 149.387 282 160.524 282 |||C 160.524 282 340.450 282 340.450 282 |||C 353.387 282 364.762 270.062 364.762 258.937 |||C 364.762 258.937 364.762 23 364.762 23 |||C 364.762 11.954 353.762 2.842|||e -14 340.262 2.842|||e -14 |||Z
`
可以看到带有科学计数法的数值都被截断了,所有没办法正确解析数据了,请官方尽快修复这个问题。
可以把这个库迁移到空安全不?
从本地文件读取时是否支持从本地下载的缓存路径中读取,在iOS中是可以的,android中提示unable load from assets
希望有一个好一点的API的文档,参数,事件,方法,有例子,这前看着才专业
File file = await DefaultCacheManager().getSingleFile(url);
final videoItem = await SVGAParser.shared.decodeFromAssets(file.path);
iOS success
Android error
just tested my first svga file and it's causing the app to almost crash , many frames are lost ( app frames , not just the animation )
recorded on real device ( although recording caused it to be worse but it was pretty much the same even not recording it ) :
and this is the svga file :
is this the current normal ?
I'm using svga animations in a pageView
and it seems like the ticker is leaking
where or how should I dispose it ?
should I be asking these question on stackoverflow ?
this looks to be a better place to ask you directly
We are trying to make SVGAPlayer support flutter web. Please stay turn.
Code https://github.com/yyued/SVGAPlayer-Flutter/tree/web_support
flutter build web
flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true
The regular mode draws image as a HtmlElement, which performance is not good. And cannot display bitmap as we need.
We need a way to control the CustomPainter
, access the canvas context, draw image via CanvasContext2D drawImage method.
The SVGAPlayer-Flutter plays in skia mode fine.
多个svga内存暴涨,并且是释放不干净,重复关闭又打开,内存一直往上走,直到oom
现在有计划要升级flutter新版本嘛
error: error reading '/Users/mac/Documents/soft/flutter/.pub-cache/hosted/pub.flutter-io.cn/svgaplayer_flutter-1.0.1/ios/Classes/SvgaplayerFlutterPlugin.m'
1 error generated.
painter.dart中的变换会导致部分图片出不来,改为如下可以正常显示
if(frameItem.hasTransform()) { canvas.transform(Float64List.fromList([ frameItem.transform.a, frameItem.transform.b, 0.0, 0.0, frameItem.transform.c, frameItem.transform.d, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, frameItem.transform.tx, frameItem.transform.ty, 0.0, 1.0 ].toList())); }
tried implementing the exported svga file like this :
SVGASimpleImage(assetsName: "assets/svga/first_card.svga")
animation didn't load and got this :
E/flutter (12135): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: Unable to load asset: assets/svga/first_card.svga
E/flutter (12135): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:230:7)
E/flutter (12135): <asynchronous suspension>
E/flutter (12135): #1 SVGAParser.decodeFromAssets
(package:svgaplayer_flutter/parser.dart:18:52) E/flutter (12135): <asynchronous suspension>
E/flutter (12135): #2 new _SVGASimpleImageState (package:svgaplayer_flutter/simple_player.dart:28:25)
E/flutter (12135): #3 SVGASimpleImage.createState (package:svgaplayer_flutter/simple_player.dart:11:12)
E/flutter (12135): #4 new StatefulElement (package:flutter/src/widgets/framework.dart:4041:25)
E/flutter (12135): #5 StatefulWidget.createElement (package:flutter/src/widgets/framework.dart:802:38)
E/flutter (12135): #6 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3104:40)
E/flutter (12135): #7 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #8 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5165:14)
E/flutter (12135): #9 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #10 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #11 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5165:14)
E/flutter (12135): #12 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #13 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #14 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3978:16)
E/flutter (12135): #15 Element.rebuild (package:flutter/src/widgets/framework.dart:3755:5)
E/flutter (12135): #16 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3941:5)
E/flutter (12135): #17 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3936:5)
E/flutter (12135): #18 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #19 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #20 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5165:14)
E/flutter (12135): #21 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #22 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #23 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3978:16)
E/flutter (12135): #24 Element.rebuild (package:flutter/src/widgets/framework.dart:3755:5)
E/flutter (12135): #25 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3941:5)
E/flutter (12135): #26 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4111:11)
E/flutter (12135): #27 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3936:5)
E/flutter (12135): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #30 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3978:16)
E/flutter (12135): #31 Element.rebuild (package:flutter/src/widgets/framework.dart:3755:5)
E/flutter (12135): #32 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3941:5)
E/flutter (12135): #33 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3936:5)
E/flutter (12135): #34 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3109:14)
E/flutter (12135): #35 Element.updateChild (package:flutter/src/widgets/framework.dart:2903:12)
E/flutter (12135): #36 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5165:14)
didn't find anything else about how to properly implement everything
did i miss sth ?
我把svga文件放到工程的raw,根据资源ID来访问?
Bigo员工[email protected]
Because no versions of dio match >4.0.0 <5.0.0 and dio 4.0.0 depends on http_parser ^4.0.0, dio ^4.0.0 requires http_parser ^4.0.0.
And because svgaplayer_flutter >=1.2.0 <2.0.0-nullsafety.0 depends on http ^0.12.2 which depends on http_parser >=0.0.1 <4.0.0, dio ^4.0.0 is incompatible with svgaplayer_flutter >=1.2.0 <2.0.0-nullsafety.0.
So, because creamchat depends on both svgaplayer_flutter ^1.2.0 and dio ^4.0.0, version solving failed.
pub get failed (1; So, because creamchat depends on both svgaplayer_flutter ^1.2.0 and dio ^4.0.0, version solving failed.)
场景为头像框预览,对应地,设置一个SVGASimpleImage,传入不同的svgaUrl来实现快速切换,
或者模仿SVGASimpleImage的实现方式,通过动态切换解析svga资源来替换controller的videoItem。
目前出现切换失灵的问题,解析之后替换,但svga动画没有按照预期展示
`class SVGAView extends StatefulWidget {
final String svgaUrl;
SVGAView(this.svgaUrl);
@OverRide
_SVGAViewState createState() => _SVGAViewState();
}
class _SVGAViewState extends State with TickerProviderStateMixin {
SVGAAnimationController _controller;
@OverRide
void initState() {
super.initState();
_controller = SVGAAnimationController(vsync: this);
}
@OverRide
Widget build(BuildContext context) {
prepareForPlay();
return SVGAImage(
_controller,
fit: BoxFit.fill,
);
}
void prepareForPlay() async {
MovieEntity entity = await SVGAParser.shared.decodeFromURL(widget.svgaUrl);
if (entity != null) {
print(widget.svgaUrl);
_controller.videoItem = entity;
_controller.repeat();
}
}
@OverRide
void dispose() {
_controller.stop(canceled: true);
_controller.videoItem = null;
_controller.dispose();
super.dispose();
}
}`
将prepareForPlay在initState中调用有类似的问题,所以改在build中调用
如题
本地环境:
Flutter 2.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision adc687823a (2 months ago) • 2021-04-16 09:40:20 -0700
Engine • revision b09f014e96
Tools • Dart 2.12.3
测试手机:
华为mate20 ---- android10
demo:https://github.com/LinAndroid/SVGAPlayer-Flutter-master
是不是svga文件有问题?这种现象正常么?
trying to animate texts as part of an artboard in after effects
well since texts are not supported yet with SVGA , tried converting them to outlines
but then mergedPaths come in the way which are not supported either
is there any workaround for this ?
this simple individually trimming path (ae preview):
is rendered like this (containing svga file):
test5.zip
help me out here ❤️
thanks
项目采用Bloc,正常情况下肯定是都会重新创建的
errors.dart:147 Uncaught (in promise) Error: Unsupported operation: newZLibInflateFilter
at Object.throw [as throw] (errors.dart:196)
at Function.makeZLibInflateFilter (io_patch.dart:612)
at new io.ZLibDecoderSink. (data_transformer.dart:586)
at io.ZLibDecoder.new.startChunkedConversion (data_transformer.dart:481)
at io.ZLibDecoder.new.convert (data_transformer.dart:466)
at io.ZLibCodec.new.decode (codec.dart:28)
at parser.SVGAParser.new.decodeFromBuffer (parser.dart:22)
at decodeFromBuffer.next ()
at runBody (async_patch.dart:86)
at Object._async [as async] (async_patch.dart:125)
at parser.SVGAParser.new.decodeFromBuffer (parser.dart:21)
at parser.SVGAParser.new.decodeFromAssets (parser.dart:18)
at decodeFromAssets.next ()
at onValue (async_patch.dart:47)
at _RootZone.runUnary (zone.dart:1381)
at _FutureListener.thenAwait.handleValue (future_impl.dart:139)
at handleValueCallback (future_impl.dart:680)
at Function._propagateToListeners (future_impl.dart:709)
at _Future.new.[_completeWithValue] (future_impl.dart:524)
at async._AsyncCallbackEntry.new.callback (future_impl.dart:554)
at Object._microtaskLoop (schedule_microtask.dart:43)
at _startMicrotaskLoop (schedule_microtask.dart:52)
at async_patch.dart:168
数据是这样的
M408.380 2.842e-14 C408.380 2.842e-14 229.818 2.842e-14 229.818 2.842e-14 C215.505 2.842e-14 204.880 9.937 204.880 24 C204.880 24 204.880 256.687 204.880 256.687 C204.880 271 217.505 282 228.642 282 C228.642 282 408.568 282 408.568 282 C421.505 282 432.880 270.062 432.880 258.937 C432.880 258.937 432.880 23 432.880 23 C432.880 11.954 421.880 2.842e-14 408.380 2.842e-14 Z
我也不清楚美术给的图层为什么有个科学计数法
因为这个正则的原因,把e给过滤隔开了,导致firstLetter“C”只有两个解析报错
我把正则改成RegExp('([a-df-zA-Z])')解决了问题,但是不确定这样是否真的没问题?
想调用autorelease = false这个方法,但是没有调用到。是不是版本的原因?我用的是svga_player1.2.0
Can you include this ?
Because every version of login_plugin from path depends on protoc_plugin ^19.0.1 and no versions of protoc_plugin match >19.0.1 <20.0.0, every version of frog_plugin from path requires protoc_plugin 19.0.1.
And because protoc_plugin 19.0.1 depends on protobuf >=0.14.4 <2.0.0 and svgaplayer_flutter <0.1.1 depends on protobuf ^0.13.4, frog_plugin from path is incompatible with svgaplayer_flutter <0.1.1.
我们有连送的需求,所以会连续播放多个SVGA动画,观察发现内存暴涨,而且渲染也会卡顿。SVGA是不是再生成的时候就要注意运行内存,然后如果降低运行内存,但是多个同时运行还是会出现内存暴涨的情况。这时候低性能手机就会出现OOM的崩溃。请问有什么思路或者方法可以尽量避免吗?再不改动原有逻辑需求的情况下
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.