Lottie Animation tutorial

Original: www.jianshu.com/p/83f6a228b…

In order to improve user experience, adding a well-designed interface animation into the interface has become a trend in APP design. I’ve heard people say that professional interface animation is composed of designers, engineers, programmers, graphic animators, etc. Think about how big a task this is. And the inside of a variety of logic processing, some of the complex animation, the average person is almost hope its neck;

But with Lottie, it makes things much easier for developers. We can import the Lottie animation file directly, set the parameters, and use the animation. To satisfy your curiosity, here are some simple examples:

I. First acquaintance with Lottie

Through the Bodymovin plugin on AE, the animation produced in AE is exported into a JSON file. Lottie implements the parsing and rendering of this JSON file on iOS, macOS, Android, and React Native platforms.

All of these animations were created in After Effects, exported using Bodymovin, and rendered natively without additional engineering work.

Bodymovin is an After Effects plugin created by Hernan Torrisi that exports files as JSON and includes a javascript web player. Its biggest advantage is that it provides a complete set of cross-platform animation implementation workflow;

From the point of view of the code, the iOS terminal is based on layer, and ultimately all operations are performed on canvas. In the middle, there is basically no performance cost except parsing JSON.

Of course, it can’t all be perfect. After all, open source is new, and it still has the following problems:

1. The Bodymovin plugin needs to be improved, but some AE effects cannot be exported successfully.
2. Lottie’s support for JSON files needs to be improved. At present, some effects that can be successfully exported into JSON files cannot be well displayed on the mobile terminal.
3. Text is not supported at present, all text must be converted into vector images to display animation normally;
4. Animation cannot be edited, that is, the mobile end cannot change the animation downloaded from the remote end to the local;
5. Documents are not updated in time; Note: iOS needs iOS8 and above, Android needs API14 and above;

How to use Bodymovin to create animation

ITerryWang explains how to animate using Bodymovin in detail in his Jian Shu blog. I won’t go into any more details and would like to thank iTerryWang for sharing. Introduction to Lottie & iOS integration

How to use Lottie

In addition to creating animations with the Bodymovin plugin, you can also download Lottie Files.

Create a new project and name it LottieTest.

Install Lottie animation library by CocoaPods: ① Enter the file directory (use your own project directory);

cd /Users/apple/Desktop/LottieTestCopy the code

(2) create podfile

pod initCopy the code

③ Open the file for editing

target 'LottieTest' do
  pod 'lottie-ios'
endCopy the code

④ Import Lottie project

pod installCopy the code

4. Before adding the Lottie animation JSON file, you have prepared this file, just import the project;

5. Create animation OC version:

#import "ViewController.h"

#import <Lottie/Lottie.h>



@interface ViewController ()



@end



@implementation ViewController



- (void)viewDidLoad {

    [super viewDidLoad];



    LOTAnimationView *lottieTest = [LOTAnimationView animationNamed:@"servishero_loading"];

    lottieTest.contentMode = LOTViewContentModeScaleAspectFill;

    lottieTest.frame = self.view.bounds;

    lottieTest.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;

    [self.view addSubview:lottieTest];

    [lottieTest play];

}



@endCopy the code

The swift version:

import UIKit
import Lottie

class ViewController: UIViewController {
    override func viewDidLoad(a) {
        super.viewDidLoad()
        if let animationView = LOTAnimationView(name: "servishero_loading") {
// if let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/LottieLogo1.json")!) {
            animationView.frame = self.view.bounds
            animationView.center = self.view.center

            animationView.loopAnimation = true
            animationView.contentMode = .scaleAspectFill
            animationView.animationSpeed = 0.5

            // Applying UIView animation
            let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)
            animationView.transform = minimizeTransform
            UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
                animationView.transform = CGAffineTransform.identity
            }, completion: nil)

            view.addSubview(animationView)

            animationView.play()
        }

    }
}Copy the code

For Android, see the github address below: Android reactNative

Extension: Airbnb Animation library Lottie