Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Dynamic Drawer

PonyCui edited this page Apr 1, 2019 · 1 revision

Additionally, you want to draw things on element in animation.

Download Sample File

You can download a sample file from SVGA-Samples to try.

Step

Load animation as usual.

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/kingset?raw=true");
    this.animationController.videoItem = videoItem;
    this
        .animationController
        .repeat()
        .whenComplete(() => this.animationController.videoItem = null);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SVGAImage(this.animationController),
    );
  }
}

Setup replacing Image.

  void loadAnimation() async {
    final videoItem = await SVGAParser.shared.decodeFromURL(
        "https://github.com/yyued/SVGA-Samples/blob/master/kingset?raw=true");
    this.animationController.videoItem = videoItem;
    this.animationController.videoItem.dynamicItem.setDynamicDrawer((canvas, frameIndex) {
      canvas.drawRect(Rect.fromLTWH(0, 0, 88, 88), Paint()..color = Colors.red); // draw by yourself.
    }, "banner");
    this
        .animationController
        .repeat()
        .whenComplete(() => this.animationController.videoItem = null);
  }

ImageKey

The imageKey is the name of png file, ask your designer tell you the file name.

For example, the layer png image file name is xxx.png, imageKey is xxx. File name should always use English name, do not use Chinese or Japanese etc.

Clone this wiki locally