We in peacetime development, to achieve an animation, most of the direct use of Gif, but Gif occupies a large space, and the need for a variety of screen size, resolution adaptation; Another is to use frame animation, but frame animation takes up much more space than Gif, but also need to do adaptation.

Add a lot of GIFs when there is a lot of animation in the project, and the resulting package will be very large. At this time, we will ask the designer to compress the size and then give it to us. In this way, the bag will be smaller, but the user experience will be poor, and the dynamic effect will be very unclear.

In this case, Lottie, turn to be (LottieFiles) appearance, ali new Ma what https://design.alipay.com/emotion is based on Lottie animation. Once the animation is done, the designer simply exports a tiny Json file, drags it into the project, reads the Json file in iOS (Android, Web) code, parses the animation structure and parameter information, and renders it.

I. Integration:

Using the SDK with iOS requires integration with Lottie (Swift version, OC version) and then directly using it in code.

1, Swift:

pod 'lottie-ios'
Copy the code

Code:

import UIKit
import Lottie

class ViewController: UIViewController {
    let lottieView = AnimationView()
    
    override func viewDidLoad() { super.viewDidLoad() lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400) LottieView.center = self.view.center LottieView.animation = animation.named (" lottieJson ")// Bind Lottie animation LottieView. LoopMode =. Loop / / animation effects to perform a single, multiple lottieView. The contentMode =. ScaleAspectFit lottieView. BackgroundBehavior = .pauseAndreStore // Set whether to pause animation sell.view.addSubView (lottieView) LottieView.play ()// Start animation //lottieView.stop()// Pause animation}}Copy the code

2, OC:

pod 'lottie-ios_Oc'
Copy the code

Code:

#import "ViewController.h"
#import <lottie_ios_Oc/LOTAnimationView.h>

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    LOTAnimationView *lottieView = [LOTAnimationView animationNamed:@"lottieJson"]; Frame = CGRectMake(0, 0, 400, 400); lottieView.center = self.view.center; lottieView.loopAnimation = YES; / / animation effects to perform a single, multiple lottieView. The contentMode = UIViewContentModeScaleAspectFit; / / default suspended animation handleWillEnterBackground into the background (no open entrances on OC edition) [self. View addSubview: lottieView]; [lottieView playWithCompletion:^(BOOL animationFinished) {// Custom operations can be performed after animation is completed}]; [lottieView play]; // start animation //[lottieView stop]; // Pause the animation} @endCopy the code

Second, the summary

1. Advantages:

  • The development cost is low, the designer can export Json file to the development.
  • Animation to achieve a high success rate, as long as designers can design can be achieved.
  • Support server URL creation, through the server configuration Json file at any time to replace the animation, do not have to re-issue version.
  • IOS, Android, and Web can use the same set of Json files.
  • Supports transition animation, Presen/Dismiss can do transition effect.

2. Disadvantages:

  • Parsing large Json files may be time-consuming and abnormal on devices with low configuration. Therefore, it is recommended for devices with better hardware performance.

Solution:

  • Mobile phone performance upgrades will effectively alleviate this aspect of the problem;
  • Pause animation after switching pages to save resources;
  • Designers pay attention to these matters Lottie pit avoidance guide, common mistakes, exceptions free summary, can also make animation more smooth;

If you found this article useful, please give it a like in the comments below. If you find something missing or wrong, please leave a comment below

Information:

From Json to Animation, Lottie -ios learning notes, playing animations with Lottie, Android integration