introduce

SVGAPlayer is a lightweight animation rendering library. You can use tools to export animation files from Adobe Animate CC or Adobe After Effects and render and play them on mobile devices using SVGAPlayer.

SVGAPlayer-Android renders animations using the native Android Canvas library, providing you with a high performance, low overhead animation experience.

If you want more details, please visit the official website.

  • Svgaplayer-flutter supports only version 2.0.

usage

Here we introduce the use of svGaPlayer-Android. To find out how to export animations, click here.

Add the dependent

Dependencies: svgaplayer_flutter: ^ 0.0.1#latest version
Copy the code

Place the SVGA file

SVGAPlayer can load animation files from local assets or a remote server.

Simple and easy usage

Animation rendering using the SVGASimpleImage component is easiest.

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")); }}Copy the code

The animation will play in a loop, so if you want to control the animation more directly, you can use code.

Use the code

To control the rendering operation of the animation, you need to create an instance of SVGAAnimationController, which is no different from normal Flutter animations. Give this instance to SVGAImage, load and decode the resource using SVGAParser, and then play the animation using Controller.

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

The cache

The animation library does not manage any caches, you need to use a network library such as DIO to handle them yourself.

Using SVGAParser decodeFromBytes method decodes the data.

Function of sample

  • Replaces the specified element with a bitmap.
  • Draws text on the specified element.
  • Hides the specified element.
  • Freely draws on the specified element.