Airbnb open source animation library Lottie introduction and detailed examples

The front

This article focuses on what Lottie is, how to make animations for Lottie, and the application scenarios for Lottie. Suitable for designers and developers to read and practice in pairs.


Lottie introduction

Lottie is an open source animation rendering library for Airbnb, which supports both Android, iOS, and React Native platforms. Lottie currently supports rendering only After Effects animations. Lottie uses JSON data exported from bodymovin (the open source After Effects plug-in) as animation data. So the whole workflow from animation to animation is as follows:

Airbnb open source animation library Lottie introduction and detailed examples
this diagram is referenced from http://cdn.trojx.me/blog_pic/lottie_sum.png
  1. Designers use After Effects to make animations and export JSON files to developers
  2. Developers from each end render animation via Lottie rendering

Up to now, the Lottie enabled After Effects features of each platform can be obtained from the following web pages:

Http://airbnb.io/lottie/supported-features.html

Therefore, designers in the use of After Effects animation, first proposed the preview “, which should be used to know the characteristics of animation, because if the characteristics of the use of Lottie not supported, such as 3D layer, Lottie will not render correctly.

In order to promote Lottie, Airbnb has also built a Lottie animation website for users to share their own animation. Web site address:

Https://www.lottiefiles.com


Making animations for Lottie

To make animations for Lottie, you need: After Effects + bodymovin. After After Effects makes the animation, export a JSON file through the plug-in bodymovin, and then use Lottie to render the playback. The following describes how to install the plug-in and how to export the JSON file.

Install After Effects

PS: the children’s shoes that have been installed with After Effects can ignore this link

After Effects can download and install the trial from the Adobe website, the current price is: 3499 $/ year, is still relatively expensive. For children who can not afford shoes, you can also consider cracked version. Here is the download link for the cracked version of Mac:

Baidu cloud disk: https://pan.baidu.com/s/1eRMCL26
password extraction: xyu5

The downloaded folder contains the installation files After, Effects, CC, 2017.dmg, and the cracked file Adobe Zii cc2017.app compression package. After you install After Effects, unzip the Adobe Zii cc2017.app, and you can use After Effects for free. However, it is recommended that the children’s shoes or the purchase of genuine legal services, and always get a variety of upgrade services.

Install the After Effects plug-in bodymovin

1. download Plug-in bodymovin.zxp

  • Download the bodymovin zip file
  • Unpack the file and find bodymovin.zxp in the directory’/build/extension’

2. install plug-ins

  • Download the After Effects plug-in installer ZXP Installer (with Windows and Mac versions)
  • Run ZXP Installer, according to the instructions to drag bodymovin.zxp to its window, you can complete the installation, Airbnb open source animation library Lottie introduction and detailed examples
    drag installation, bodymovin.zxp.png installation success, as shown:
Airbnb open source animation library Lottie introduction and detailed examples
bodymovin.zxp installation successfully.Png

The restart After Effects, and then modify the AE settings, in’After, Effects, CC, -&gt, Preferences, -&gt, General’, open the
‘Allow Scripts to Write Files Network’ and Access

Airbnb open source animation library Lottie introduction and detailed examples
opens’Allow, Scripts, to, Write, Files, and, Access, Network’.png

Now you can start making your animation, and when you’re finished, you need to use bodymovin to go to’window -> extensions’can find bodymovin:

Airbnb open source animation library Lottie introduction and detailed examples
bodymovin.png

Making animations using After Effects

Airbnb open source animation library Lottie introduction and detailed examples
, please start your show ~!

Exporting JSON files using bodymovin

When the animation is finished, run bodymovin, select the animation you want to export, and save the JSON file directory, click’Render’to export, the specific process shown in figure:

Airbnb open source animation library Lottie introduction and detailed examples
export JSON file flow.Png

Preview the animation effects Online

Make good After Effects animation, export JSON files, of course, to verify that Lottie can properly render play.

Airbnb provides iOS, APP, Android, APP, and Lottie animation online preview sites for designers to preview animation.

In the preview of the website, the designer can see the animation effect of Lottie rendering online as long as the exported JSON file is dragged to the preview frame of the webpage.

Using the APP preview, you need to upload the JSON file to the server and preview it through the link. It is recommended that designers upload files to Airbnb’s established sharing site, lottiefiles.com.


Which scenes are suitable for Lottie?

Lottie as an animation rendering library, in the exploration process, I think it is more appropriate to solve the following problems:

  • Splash Animation: the typical scene is the playback of the APP logo animation
  • The drop-down refresh Animation: all APP all the necessary functions, using Lottie can do more simple and cool.
  • Load (loading) Animation: the typical scene is the loading animation of the network request
  • Tip (TIPS) Animation: typical scenes are hints of blank pages
  • Button (button) Animation: typical scenes such as the switch button, edit button, play button, etc. button transition animation
  • Gift Animation: the typical scene is the live class APP’s advanced animation playback
  • View transition animation

The examples of each scenario are as follows: (take iOS platform as an example)

Airbnb open source animation library Lottie introduction and detailed examples
startup (splash) animation.Gif
Airbnb open source animation library Lottie introduction and detailed examples
drop-down refresh animation.Gif
Airbnb open source animation library Lottie introduction and detailed examples
load (loading) animation + hint (TIPS) animation.Gif
Airbnb open source animation library Lottie introduction and detailed examples
button (button) animation + gift (gift) animation.Gif
Airbnb open source animation library Lottie introduction and detailed examples
transitions animation.Gif

Access Lottie

After making the animation and exporting the JSON file, developers of iOS, Android, and React Native can use animation as if they were using static resources. Access tutorial, you can see the official website tutorial or platform Lottie project github:

  • Official website tutorial
  • Lottie-ios-git
  • Lottie-android-git
  • Lottie-react-native-git

The application example of lottie-iOS (including all of the above examples) is accessible:
https://github.com/YK-Unit/LottieExample


Lottie-ios speed manual

Install Lottie

You can import Lottie via Cocoapods or Carthage.

  • Cocoapods:pod’lottie-ios’
  • Carthage:github “airbnb/lottie-ios”, “master””

Load Lottie animation

Lottie animation supports loading from local or server JSON files.

From the local JSON LOTAnimationView *animationView / [LOTAnimationView animationNamed:@ loading = "Lottie"]; / / from the local designated bundle JSON *animationView [LOTAnimationView animationNamed:@ loading LOTAnimationView = "Lottie" inBundle:[NSBundle YOUR_BUNDLE]]; / / JSON from the server to load the LOTAnimationView *animationView alloc] initWithContentsOfURL:[NSURL [[LOTAnimationView = URLWithString:URL_TO_JSON]]; animationView.frame = CGRectMake (20, 20, 400, 300); [self.view addSubview: animationView];

Play Lottie animation

Lottie animation control, in addition to the conventional control, but also supports the progress of broadcast, frame play.

  • Play, pause, stop LOTAnimationView *animationView [LOTAnimationView animationNamed:@ = “Lottie”]; / / to play [animationView play] from the last position of animation; suspended animation player [animationView pause] / /…;…. / / stop animation, the animation progress reset to 0 [animationView stop];
  • Schedule control: can play down the reference sample LOTAnimationView *animationView = [LOTAnimationView animationNamed:@ refresh animation “RefreshHeaderAnim”]; / / play directly to the specified schedule [animationView playToProgress:0.8 withCompletion:^ (BOOL animationFinished) {/ / do / / A something}]; from the progress schedule B [animationView playFromProgress:0 to play toProgress:0.8 withCompletion:^ (BOOL animationFinished) {/ / do / / something}]; set the current progress of animationView.animationProgress = currentProgress;
  • The control frame of reference sample: switch *animationView = [LOTAnimationView animationNamed:@ LOTAnimationView animation button “Switch”]; / / play directly to the specified frame [animationView playToFrame:@ (40) withCompletion:^ (BOOL animationFinished) {}]; / / broadcast from the A frame to the B frame [animationView playFromFrame:@ (20) toFrame:@ (40) withCompletion:^ (BOOL animationFinished) {}];
  • Looping Animation: reference sample Play-Pause LOTAnimationView *animationView [LOTAnimationView animationNamed:@ animation button = “Play-Pause”]; / / animationView.loopAnimation = YES play set cycle; / / set to automatically play backwards animationView.autoReverseAnimation = YES; [animationView playFromFrame:@ (90) toFrame:@ (180) withCompletion:^ (BOOL animationFinished) {}];
  • A frame of animation editing object: reference sample switch [self.switchButton setValue:[UIColor orangeColor] forKeypath:@ animation button “Background 2.Shape 1.Fill 1.Color atFrame:@ (0)]; [self.switchButton setValue:[UIColor blueColor] forKeypath:@ Background 2.Shape 1.Fill 1.Color atFrame:@ (13)]; to modify the properties of the object, need to know the attributes of the path (Keypath). The method acquires the attribute of the path: all levels of property directly print object, obtained from log:
    [animationView logHierarchyKeypaths]; Airbnb open source animation library Lottie introduction and detailed examples
    logHierarchyKeypaths log.Png obtained by the AE 2.Shape 1.Fill 1.Color Airbnb open source animation library Lottie introduction and detailed examples file: Background
    Keypath.png
  • The view controller transition (View Controller Transitions): LOTAnimationTransitionController ID &lt provides a reference sample to generate transition
    Lottie; UIViewControllerAnimatedTransitioning> object. #pragma mark UIViewControllerTransitioningDelegate (nullable ID < UIViewControllerAnimatedTransitioning> animationControllerForPresentedController:) (UIViewController *) presented presentingController: (UIViewController * presenting) sourceController: (UIViewController * source) {LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@ “vcTransition1” fromLayerNamed:@ “outLayer” toLayerNamed:@ “inLayer” ApplyAnimationTransform:NO]; return animationController;} – (nullable ID < UIViewControllerAnimatedTransitioning> animationControllerForDismissedController:) {LOTAnimationTransitionController (UIViewController *) dismissed * animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@ “vcTransition2” fromLayerNamed:@ “outLayer” toLayerNamed:@ “inLayer” ApplyAnimationTransform:NO]; return animationController;}