Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Xiao CAI tried Flare and Lottie animation before, and the effect was very efficient; Today small dish try another way of thinking SVGA animation; SVGA is an animation format compatible with iOS, Android, Flutter, and Web platforms.

SVGA

Basic introduction to

First of all, I would like to praise SVGA’s official website, which is very simple and easy to find the main information, and very comfortable to watch. After the designer designs and generates SVGA animation through AE and other tools, it can be delivered to the developer directly through SVGAPlayer call, integration and application are very simple;

SVGA provides online preview of animation footage and split of footage elements, as well as the flexibility to convert SVGA animations into SVG vector elements.

Case try

SVGA offers a complete integration solution in a variety of ways. Simply try the Flutter version application;

1. The integrated svgaplayer_flutter

As with all plug-ins, the widget introduces the corresponding version of Svgaplayer_flutter; Svgaplayer_flutter currently supports Flutter 2.0 air safety.

Svgaplayer_flutter: ^ 2.1.2Copy the code

2. The application plays SVGA

2.1 SVGASimpleImage loads animation

Svgaplayer_flutter supports playing local and online animations, similar to how Image loads local and online images. SVGA provides a SVGASimpleImage that encapsulates the SVGAAnimationController. According to the file type, through different parameters to display, the default animation effect is repeated;

class SVGASimpleImage extends StatefulWidget {
  final String resUrl;
  final String assetsName;
  final File file;

  SVGASimpleImage({Key key, this.resUrl, this.assetsName, this.file}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _SVGASimpleImageState();
}
Copy the code

Simple analysis of the source code can be obtained, SVGASimpleImage according to the transfer of different animation path for different ways of display, load and decode different types of network resources, local resources and File resources through svgaparser.shared;

class _SVGAPageState extends State<SVGAPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('SVGA Page')), body: Column(children: [ _itemSVGA01(false, 'images/posche.svga'), _itemSVGA01(true, 'https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true') ])); } _itemSVGA01(isUrl, svgaUrl) { return Expanded( flex: 1, child: SVGASimpleImage(assetsName: isUrl ? null : svgaUrl, resUrl: isUrl ? svgaUrl : null)); }}Copy the code

2.2 SVGAImage & SVGAAnimationController

SVGASimpleImage is an animation player that encapsulates SVGAImage and SVGAAnimationController. The playback process of animation needs to be adjusted with SVGAAnimationController.

SVGAImage(
    this._controller, {
    this.fit = BoxFit.contain,
    this.clearsAfterStop = true,
})
Copy the code

Simple analysis source code available, SVGAImage is mainly through SVGAAnimationController for animation playback; Similar to images, you can set the layout of an animation through BoxFit;

SVGAAnimationController is a layer of encapsulation and application of AnimationController. Methods and state callbacks are basically the same.

/// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus {// AnimationStatus; } this.animationController ? .addStatusListener((status) => print('---status---$status'));Copy the code

SVGAAnimationController provides common playback methods.

  • Reset Animation reset;
  • If the animation starts from the beginning, it is recommended to call reset to reset the animation to prevent other operations from affecting the starting position of the animation.
  • Stop animation stops. Different from Lottie animation, SVGAAnimationController does not provide the corresponding pause method.
  • Reverse: the animation is played backwards.
  • Repeat animation;
  • Fling uses a critically damped spring and an initial velocity to drive the animation; In forward play, the fling ends at the starting speed.
@override void initState() { super.initState(); this.animationController = SVGAAnimationController(vsync: this) .. addListener(() { if (mounted) { setState(() {}); }}); this._loadAnimation(); } @override void dispose() { this.animationController? .clear(); this.animationController? .dispose(); this.animationController = null; super.dispose(); } void _loadAnimation() async { final videoItem = await _loadSVGA(false, 'images/posche.svga'); if (mounted) setState(() { this.isLoading = false; this.animationController? .videoItem = videoItem; this.animationController ? .addStatusListener((status) => print('---status---$status')); }); } Widget _itemBtn(STR) => Expanded(child: Container(margin: EdgeInsets. All (1.0), child: FlatButton(color: FlatButton) Colors.lightBlueAccent, child: Text(str), onPressed: () { if (str == 'start') { animationController? .reset(); animationController? .forward(); } else if (str == 'reverse') { animationController? .reverse(); } else if (str == 'repeat') { animationController? .repeat(); } else if (str == 'resume') { animationController? .forward(); } else if (str == 'stop') { animationController? .stop(); } else if (str == 'fling') { animationController? .fling(); } setState(() {}); })));Copy the code

SVAG & Lottie

Xiao CAI looked up some information and simply understood the difference between SVGA and Lottie animation implementation. SVGA is the SVGA vector drawing frame by frame, by setting the frame rate, to generate a configuration file, so that each frame has a configuration, each frame is a key frame, through the frame rate to brush each frame of the picture, this idea is very similar to GIF, but through the configuration of the animation process can be reused pictures;

Lottie animation is drawn layer by layer. All animations are divided into multiple layers. Each layer has an animation configuration.

Both of the two animation modes are very mature and have a wide range of applications. For the small vegetables, the same animation elements have not been found, so accurate data analysis has not been carried out. However, the performance of the two modes is basically the same after consulting the data.

SVGA case source code

The research on SVGA of xiaocai is still very superficial, and many methods have not been studied. If there are mistakes, please give more guidance!

Source: Little Monk A Ce