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.

Today, I will try Flare animation. Those who learn Flutter are familiar with this. Flare can make cool vector animation models for apps/games/web pages, etc.

Flare animation has the advantage of effectively reducing the size of the file and obtaining excellent animation effects. It is suitable for scenes with little interaction with the scene.

I met Flare

Xiao CAI just started to learn Flare. After successfully registering an account on the official website, she can access Nima and Flare files. There are two types of Flare animations. The official website has different ICONS for different types of resources;

  1. Nima is an older format that only supports raster images; Build 2D animations for game engines and applications;
  2. Flare is a relatively new format that supports vector and raster images. Build efficient animations for apps and the Web, but also for game design;

For the animation production process, xiao CAI will not be introduced, one is that each person’s use is different, the other is that Xiao CAI is also in the process of exploring, design a satisfactory animation needs careful design and adjustment; Resources distinguish between public and private versions, can be distinguished according to whether there is a follow arrow in the lower right corner, small dishes only try open source animation;

The side dish selects an open source animation to enter the details page that can be found inopen in flutterFor custom adjustment; You can add or process the Bezier curve of the resource-style animation, and at the same time, you can reduce the processing in the code according to the need to process whether to loop;

Integrated way

Koai tries animation in Flare format, adding.flr animation resources to the local repository images; If you are using Nima animation resources, try the Nima plugin.

1. Add the dependency library to pubspec.yaml

Dependencies: flare_flutter: ^ 1.5.2Copy the code

2. Add the reference library to the file

import "package:flare_flutter/flare_actor.dart";
Copy the code

3. API call implementation

Plug-ins provide convenient widgets that can be easily called;

FlareActor('images/flare_boll.flr', animation: 'Bounce')
Copy the code

Analysis source code:

const FlareActor(this.filename,
    {this.boundsNode,
      this.animation,
      this.fit = BoxFit.contain,
      this.alignment = Alignment.center,
      this.isPaused = false,
      this.snapToEnd = false,
      this.controller,
      this.callback,
      this.color,
      this.shouldClip = true});
Copy the code

Filename is used to load local animation resources.

Animation is the name of the animation in the process of animation production and is case-sensitive, so it is recommended to make the animation name clearer when editing the animation. If there is no animation parameter or the content is wrong, the first frame of the animation will be displayed at last.

      fitAnimation fill style;

Alignment Animation alignment;

IsPause true: pause; false: continue;

SnapToEnd True: jump to the last frame of animation, false: play normally;

Color animation color, if the overall color is pure color can try to use, otherwise it will overwrite other design colors;

Controller controller, can control the playback of animation pause or specific animation node through the controller, flexible and convenient;

Callback The callback after the animation has played; When the animation is set to loop play can not listen; When the animation is in non-cyclic mode, the results can be monitored after the first play. If you play(‘animation’) again, the animation will be played again. This listening method only has one time.

class _FlareStatePage extends State<FlareStatePage> { FlareControls _controls = FlareControls(); bool isPause = false, snapToEnd = false; @override Widget build(BuildContext context) { return Scaffold( body: Column(children: <Widget>[ Expanded( child: FlareActor('images/flare_question.flr', animation: 'default', alignment: Alignment.center, fit: BoxFit.contain, controller: _controls, isPaused: isPause, snapToEnd: snapToEnd, callback: (name) { if (name == 'default') { _controls.play('default'); } }), flex: 1), Row(children: <Widget>[ _itemBtn('start'), _itemBtn('pause'), _itemBtn('resume'), _itemBtn('stop') ]), Expanded( child: Column(children: <Widget>[ Expanded( child: FlareActor('images/flare_boll.flr', animation: 'Bounce')), Expanded( child: FlareActor('images/flare_boll.flr', animation: 'Bounce', color: Colors.orange)) ]), flex: 1) ])); } Widget _itemBtn(STR) {return Expanded(child: Container(margin: EdgeInsets. All (1.0), child: FlatButton(color: FlatButton) Colors.lightBlueAccent, child: Text(str), onPressed: () { if (str == 'start') { isPause = false; snapToEnd = false; _controls.play('default'); } else if (str == 'pause') { isPause = true; } else if (str == 'resume') { isPause = false; } else if (str == 'stop') { snapToEnd = true; } setState(() {}); }))); }}Copy the code

Flare animation is an animation mode recommended by Google. It is fast and efficient for complex animation or game processing. Small dishes are still just scratching the surface of Flare, so those who are interested can try them as much as possible. If there are mistakes, please guide!

Source: Little Monk A Ce