SVGAPlayer-Flutter

简体中文

Introduce

SVGAPlayer is a light-weight animation renderer. You use tools to export

svga

Adobe Animate CC

Adobe After Effects

SVGAPlayer-Flutter

If wonder more information, go to this website.

• SVGAPlayer-Flutter supports 2.0 format only.

Usage

Here introduce

SVGAPlayer-Flutter

Add dependency

dependencies:
  svgaplayer_flutter: ^0.0.1  #latest version

Locate files

SVGAPlayer could load svga file from Flutter local

assets

Super simple to use

The simplest way to render an animation is to use

SVGASimpleImage

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

SVGAImage

SVGAParser

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

Cache

We will not manage any caches, you need to use

dio

Use

SVGAParser.decodeFromBytes

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.

License

Anti 996