The author | | vlad source vlad (public number: fulade_me)

Lottie animation

In mobile development, we always need to show some animation effects. As programmers, we are not good at using code to make animation. Even if some animation can be realized, it will be different in different platforms due to API differences in the process of cross-platform animation. So to free the programmer’s hands from the agony of writing animation parameters, Airbnb has opened source an animation solution specifically designed for cross-platform use: Lottie. Lottie can parse Adobe After Effects animations exported as JSON using Bodymovin and displayed on mobile and Web. In this way, we can give the work of animation to professional animation colleagues to complete, we only need to use the import json file, which will greatly reduce the workload of programmers, and can: achieve professional people to do professional things.

Import the Lottie framework

The open source Lottie library already exists in Flutter, so we only need to import the dependencies in Pubspec.yaml

dependencies:
  lottie: ^ 0.7.0              
Copy the code

The use of Lottie library

Import the header file in the Widget that needs to display Lottie animations

import 'package:lottie/lottie.dart';
Copy the code

Local JSON files are read by default

    Lottie.asset("json/fun_do_like.json"),
Copy the code

It’s easy to display Lottie animations in just one sentence. Let’s look at the other properties

  • Whether the repeat is repeated. The default is true, if false, the animation will stop once executed
  • Reverse Indicates whether to play in reverse order. The default is false. If set to true, the animation will be played once in positive order and then again in reverse order
  • Animate Whether to allow animation to play. The default is true, and if set to false, no animation will be played

Read the JSON file from the network

Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",),
Copy the code

We can also set the callback after obtaining network resources

Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",
    onLoaded: (LottieComposition composition) {
        print("onLoaded"); },),Copy the code

Ok, so that concludes the use of lotties.

To see how the above example works, go to my Github repository project flutter_app->lib-> Routes -> Lottie_demo_page.dart and download it and run it.