iOS/MacOS

Getting Started

Lottie Uses Cocoapods, Carthage, Static and Dynamic modules. Lottie supports iOS 8+ and MacOS 10.10+

Installing Lottie

Github Repo

You can pull the Lottie Github Repo and include the Lottie.xcodeproj to build a dynamic or static library.

Cocoapods

Get Cocoapods Add the pod to your podfile

pod 'lottie-ios'

run

pod install

After installing the cocoapod into your project import Lottie with Objective C #import <Lottie/Lottie.h> Swift import Lottie

Carthage

Get Carthage

Add Lottie to your Cartfile

github "airbnb/lottie-ios" "master"

run

carthage update

In your application targets “General” tab under the “Linked Frameworks and Libraries” section, drag and drop lottie-ios.framework from the Carthage/Build/iOS directory that carthage update produced.

iOS Sample App

Clone this repo and try out the Sample App The repo can build a MacOS Example and an iOS Example

The iOS Example App demos several of the features of Lottie

Example 1

Example 2

Example 3

The animation Explorer allows you to scrub, play, loop, and resize animations. Animations can be loaded from the app bundle or from Lottie Files using the built in QR Code reader.

MacOS Sample App

Clone this repo and try out the Sample App The repo can build a MacOS Example and an iOS Example

Lottie Viewer

The Lottie Viewer for MacOS allows you to drag and drop JSON files to open, play, scrub and loop animations. This app is backed by the same animation code as the iOS app, so you will get an accurate representation of Mac and iOS animations.

Objective C Examples

Lottie animations can be loaded from bundled JSON or from a URL To bundle JSON just add it and any images that the animation requires to your target in xcode.

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

If you are working with multiple bundles you can use.

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

Or you can load it programmatically from a NSURL

LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

Lottie supports the iOS UIViewContentModes aspectFit, aspectFill and scaleFill

You can also set the animation progress interactively.

CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;

Or you can play just a portion of the animation:

[lottieAnimation playFromProgress:0.25 toProgress:0.5 withCompletion:^(BOOL animationFinished) {
// Do Something
}];

Swift Examples

Lottie animations can be loaded from bundled JSON or from a URL To bundle JSON just add it and any images that the animation requires to your target in xcode.

let animationView = LOTAnimationView(name: "LottieLogo")
self.view.addSubview(animationView)
animationView.play()

If your animation is in another bundle you can use

let animationView = LOTAnimationView(name: "LottieLogo" bundle:yourBundle)
self.view.addSubview(animationView)
animationView.play()

Or you can load it asynchronously from a URL

let animationView = LOTAnimationView(contentsOf: WebURL)
self.view.addSubview(animationView)
animationView.play()

You can also set the animation progress interactively.

let translation = gesture.getTranslationInView(self.view)
let progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress

Or you can play just a portion of the animation:

animationView.play(fromProgress: 0.25, toProgress: 0.5, withCompletion: nil)