SVGAPlayer-Flutter
支持本项目
如果 SVGA-Flutter 为您提供了便利与帮助,诚恳建议您通过以下方式支持作者、贡献者持续为该项目发电。
- 轻点 GitHub Star,让更多人看到该项目。
- 通过赞赏码(页面底部可见)的方式鼓励作者继续维护代码。
关注作者另外一个开源项目,MPFlutter,使用 Flutter 开发微信小程序。
Introduce
SVGAPlayer is a light-weight animation renderer. You use tools to export svga
file from Adobe Animate CC
or Adobe After Effects
, and then use SVGAPlayer to render animation on mobile application.
SVGAPlayer-Flutter
render animation natively via Flutter CustomPainter, brings you a high-performance, low-cost animation experience.
If wonder more information, go to this website.
- SVGAPlayer-Flutter supports 2.0 format only.
Usage
Here introduce SVGAPlayer-Flutter
usage. Wonder exporting usage? Click here.
Add dependency
dependencies:
svgaplayer_flutter: ^2.0.0 #latest version
Locate files
SVGAPlayer could load svga file from Flutter local assets
directory or remote server. Add file to pubspec.yaml by yourself.
Super simple to use
The simplest way to render an animation is to use SVGASimpleImage
component.
class MyWidget extends Widget {
@override
Widget build(BuildContext context) {
return Container(
child: SVGASimpleImage(
resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"),
);
}
}
Animation will run repeatedly. If you wondering a stronger animation controls, use code.
Code to use
To control an animation rendering, you need to create a SVGAAnimationController
instance just like Flutter regular animation. Assign to SVGAImage
, load and decode resource using SVGAParser
, and then do things as you want with SVGAAnimationController
.
import '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;
@override
void initState() {
this.animationController = SVGAAnimationController(vsync: this);
this.loadAnimation();
super.initState();
}
@override
void 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);
}
@override
Widget build(BuildContext context) {
return Container(
child: SVGAImage(this.animationController),
);
}
}
Reuse MovieEntity
The MovieEntity
will dispose
after AnimationController
dispose or AnimationController::videoItem
reset.
After dispose, the MovieEntity
can not reused.
If you eager to reuse the MovieEntity
, assign MovieEntity::autorelease
to false.
final videoItem = await SVGAParser.shared.decodeFromURL(
"https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
videoItem.autorelease = false;
You need to call MovieEntity::dispose()
method when no need to use.
Cache
We will not manage any caches, you need to use dio
or other libraries to handle resource caches.
Use SVGAParser.decodeFromBytes
method to decode caching data.
Features
Here are many feature samples.
- Replace an element with Bitmap.
- Add text above an element.
- Hides an element dynamicaly.
- Use a custom drawer for element.