The SVGAPlayer implementation of Flutter using CustomPainter.
SVGAPlayer is a light-weight animation renderer. You use tools to export
svgafile from
Adobe Animate CCor
Adobe After Effects, and then use SVGAPlayer to render animation on mobile application.
SVGAPlayer-Flutterrender animation natively via Flutter CustomPainter, brings you a high-performance, low-cost animation experience.
If wonder more information, go to this website.
Here introduce
SVGAPlayer-Flutterusage. Wonder exporting usage? Click here.
dependencies: svgaplayer_flutter: ^0.0.1 #latest version
SVGAPlayer could load svga file from Flutter local
assetsdirectory or remote server. Add file to pubspec.yaml by yourself.
The simplest way to render an animation is to use
SVGASimpleImagecomponent.
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.
To control an animation rendering, you need to create a
SVGAAnimationControllerinstance 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 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), ); } }
We will not manage any caches, you need to use
dioor other libraries to handle resource caches.
Use
SVGAParser.decodeFromBytesmethod to decode caching data.
Here are many feature samples.