The opening

In our daily development, in order to create a better image for our products, the output of better user experience, animation 🖼 is an indispensable part. A good animation can make the interaction more concise and let the user better understand our intention. So how to add animation, add what kind of animation has always been the problem of our programmers 🔧, in fact, before meBlog about drawing,A blog about bezier curvesThere are some hints of animation already, but it hasn’t been developed yet.



But I do not know if you have thought about such a problem, we contact the App in those cool animation, is it only the output of programmers 🤔? Is there a moment, you will doubt, there are some he certainly not with the code out of 😑? Like this?If you tell me that you are a pure code tracing path ➕ system has animation control, I absolutely do not believe 🤣, even if you can achieve it, it will greatly slow down the development progress, so that we begin to doubt whether the income of adding animation is positive income 📌. So how do most of these complex animations work better? You know, we’re oneTeamNot alone, we forgot a very important partner 👬 — the artists. Today we are going to introduce tools that allow us to collaborate with artists to create cool and diverse animationsFlare!

The text start

The origin of

Actually, the reason why I found Flare is that I used an animation library when I was doing iOS development. Those who have done iOS development may be familiar with Lottie of Airbnb. In fact, Flare and Lottie are very similar to each other in that they are designed to better integrate the work of designers and developers 🐳.

Rive brings your app to life

  RiveThis website is our origin point, enter the website, register an account, there will be a personal workbench 🚀Then click on the upper right corner to create a new project to open the artboard 🖼Open is to open, but ~ a face meng force 🙃, have? But don’t panic, I introduce the above steps to artists, from this point on it’s up to artists to design and draw animation. Art partners who do not use this artboard or website-like tools suggestGoogleThere are many tutorials. In my impression, many artists just cut and copy pictures. I don’t think they are artists or qualified designers. If an artist wants to stand out, be recognized, or have a better career, as in any profession, he or she should keep learning. Close test! The artists I’ve worked with before picked up the art board very quickly, so don’t worry about the cost of learning 👀.

Explore beauty

After the art partners have done the animation, it’s our turn to work 💪. We can find a GIF in Explore in the upper left corner of the site to do a demonstration.Let’s pick the one on the rightOPEN IN RiveButton 🔘 to open the animation file in the artboard.There are two things to note here:

  • You can select it in the upper right cornerExportTo export, remember that ❗️ is selectedJSONFormat. So it’s going to be one.flrFile.

  • Notice the two in the lower leftAnimationsThe name will come in handy 🔮.

So far our contact with the artist has been established, the artist’s task has been completed, can leave the office 😂.

Coding creates possibilities

We have got a.flr file above, how to embed it in our APP and combine it with our business? The first step is to use an official Flare Plugin🎁

  flare_flutter: ^2.06.
Copy the code

After the plug-in is imported, we have two small steps:

  • I’m going to take what I just got.flrFiles placed in the projectassetsDirectory (create a new directory without this directory)

  • in.ymalResources are declared to reference in the file

Next comes the core code section of this article, which is short 🔧

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FlareActor(
            "assets/Like.flr", alignment:Alignment.center, fit:BoxFit.contain, ), ), floatingActionButton: FloatingActionButton( onPressed: (){ setState(() { isCheck = ! isCheck; }); }, tooltip:'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
Copy the code

At this point, we have actually completed all the steps of the official Demo, but you will be surprised to find that your animation ~ does not move… 😅What’s going on here? Get what? Don’t worry, we’ve already laid the groundwork 🖌️, inFlareActorThere is one more parameter inanimation:

  /// The name of the animation to play.
  final String animation;
Copy the code

This is actually aString? This is what name ah, we also dare not disorderly spread, through the study found that the truth is only one! The name 🤠 is the name that we had in the bottom left corner of the palette.Pass in the corresponding name can play animation normally! In order to animate the animation, we add a click component, and then add a state control parameter, it is complete 🔎. Complete page code:

Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.cyan, appBar: AppBar( title: Text(widget.title), ), body: Center( child: GestureDetector( onTap: (){ setState(() { isLike = ! isLike; }); }, child: FlareActor( "assets/Like.flr", alignment:Alignment.center, fit:BoxFit.contain, animation: isLike ? Callback: (name){debugPrint(" name: ${name.tostring ()}"); }, ), ), ), floatingActionButton: FloatingActionButton( onPressed: (){ setState(() { isLike = ! isLike; }); }, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }Copy the code

There is also a callback function that can be called at the end of the animation, which should satisfy most of your business needs. End result:Such a thumbs-up animation can be applied to all thumbs-up 👍 related business scenes, animation process is not stuck, full playFlutterIn theSkiaThe advantage of very cool 🎊.

The end of the

Animation libraries such as Flare can optimize user experience very well 🏄🏻♂️ and shorten the distance between designers and developers, which is a very good solution. In fact, this animation library is very complex, including the use and expansion of built-in controller, animation control, etc. There will be time for in-depth study and then write blog to share with you! Welcome to my blog 🎨 ~