Skip to content
The SVGAPlayer implementation of Flutter using CustomPainter.
Dart Ruby Objective-C Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea feat: Add Parser, Player and Bitmap render. Mar 28, 2019
.vscode feat: Add Parser, Player and Bitmap render. Mar 28, 2019
android feat: Add Parser, Player and Bitmap render. Mar 28, 2019
example
ios feat: Add Parser, Player and Bitmap render. Mar 28, 2019
lib Fix SVGASimpleImage: 1. use animationController after it inited 2. di… Aug 21, 2019
test refactor: use AnimationController base animation. Mar 29, 2019
.gitignore feat: Add Parser, Player and Bitmap render. Mar 28, 2019
.metadata feat: Add Parser, Player and Bitmap render. Mar 28, 2019
CHANGELOG.md doc: upgrade version to 0.1.1 Sep 12, 2019
LICENSE Update LICENSE Jul 24, 2019
README.md Update README.md Jul 24, 2019
README.zh.md feat: Add zh readme. Apr 1, 2019
package.json doc: Add CHANGELOG Apr 1, 2019
pubspec.lock chore: lock protobuf version < 0.13.16, because 0.13.16 leads build f… Sep 12, 2019
pubspec.yaml doc: upgrade version to 0.1.1 Sep 12, 2019
svgaplayer_flutter.iml feat: Add Parser, Player and Bitmap render. Mar 28, 2019

README.md

SVGAPlayer-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: ^0.0.1  #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),
    );
  }
}

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.

License

996.ICU

Anti 996

You can’t perform that action at this time.