Update Readme

README.md

@@ -1,5 +1,25 @@
 # Lottie for iOS, MacOS (and [Android](https://github.com/airbnb/lottie-android) and [React Native](https://github.com/airbnb/lottie-react-native))
 
+### Table of Contents
+- [Introduction](#introduction)
+- [Installing Lottie](#installing-lottie)
+- [iOS Sample App](#ios-sample-app)
+- [MacOS Sample App](#macos-sample-app)
+- [Objective C Examples](#objective-c-examples)
+- [Swift Examples](#swift-examples)
+- [iOS View Controller Transitioning](#ios-view-controller-transitioning)
+- [Changing Animations At Runtime](#changing-animations-at-runtime)
+- [Supported After Effects Features](#supported-after-effects-features)
+- [Currently Unsupported After Effects Features](#currently-unsupported-after-effects-features)
+- [Community Contributions](#community-contributions)
+- [Alternatives](#alternatives)
+- [Why is it called Lottie?](#why-is-it-called-lottie)
+- [Contributing](#contributing)
+- [Issues or feature requests?](#issues-or-feature-requests)
+
+
+## Introduction
+
 Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http:https://www.adobe.com/products/aftereffects.html) animations exported as json with [bodymovin](https://github.com/bodymovin/bodymovin) and renders the vector animations natively on mobile and through React Native!
 
 For the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.
@@ -20,18 +40,76 @@ Here is just a small sampling of the power of Lottie
 
 ![Abcs](_Gifs/Examples4.gif)
 
-## Using Lottie
-Lottie supports iOS 8+ and MacOS 10.10+
-Lottie animations can be loaded from any application Bundle or asynchronously from a URL
+## Installing Lottie
+
+### Github Repo
+You can pull the [Lottie Github Repo](https://github.com/airbnb/lottie-ios/) and include the Lottie.xcodeproj to build a dynamic or static library.
+
+### Cocoapods
+Get [Cocoapods](https://cocoapods.org/)
+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](https://github.com/Carthage/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](https://github.com/airbnb/lottie-ios/tree/master/Example)
+The repo can build a MacOS Example and an iOS Example
+
+The iOS Example App demos several of the features of Lottie
+
+![Example 1](_Gifs/iosexample1.png)![Example 2](_Gifs/iosexample2.png)
+![Example 3](_Gifs/iosexample3.png)
+
+The animation Explorer allows you to scrub, play, loop, and resize animations.
+Animations can be loaded from the app bundle or from [Lottie Files](http:https://www.lottiefiles.com) using the built in QR Code reader.
+
+## MacOS Sample App
+
+Clone this repo and try out [the Sample App](https://github.com/airbnb/lottie-ios/tree/master/Example)
+The repo can build a MacOS Example and an iOS Example
+
+![Lottie Viewer](_Gifs/macexample.png)
+
+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.
 
-The simplest way to use it is with LOTAnimationView:
 ```objective-c
 LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
 [self.view addSubview:animation];
 [animation playWithCompletion:^(BOOL animationFinished) {
- // Do Something
+// Do Something
 }];
 ```
 
@@ -41,7 +119,7 @@ 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
+// Do Something
 }];
 ```
 
@@ -66,74 +144,131 @@ Or you can play just a portion of the animation:
 // Do Something
 }];
 ```
+## Swift Examples
 
-Want to mask arbitrary views to animation layers in a Lottie View?
-Easy-peasy as long as you know the name of the layer from After Effects
+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.
 
-```objective-c
-UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
-[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName" applyTransform:NO];
+```swift
+let animationView = LOTAnimationView(name: "LottieLogo")
+self.view.addSubview(animationView)
+animationView.play()
 ```
 
-Or how about moving a view with a part of the animation?
-```objective-c
-UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
-[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName" applyTransform:YES];
+If your animation is in another bundle you can use
+```swift
+let animationView = LOTAnimationView(name: "LottieLogo" bundle:yourBundle)
+self.view.addSubview(animationView)
+animationView.play()
 ```
 
-Want to dynamically change the color of an animation?
-```objective-c
-[lottieAnimation setValue:[UIColor greenColor] forKeypath:@"Layer 1.Shape 1.Fill 1" atFrame:@0];
+Or you can load it asynchronously from a URL
+```swift
+let animationView = LOTAnimationView(contentsOf: WebURL)
+self.view.addSubview(animationView)
+animationView.play()
+```
+
+You can also set the animation progress interactively.
+```swift
+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:
+```swift
+animationView.play(fromProgress: 0.25, toProgress: 0.5, withCompletion: nil)
 ```
 
+## iOS View Controller Transitioning
+
 Lottie comes with a `UIViewController` animation-controller for making custom viewController transitions!
 
 ```objective-c
 #pragma mark -- View Controller Transitioning
 
 - (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;
+presentingController:(UIViewController *)presenting
+sourceController:(UIViewController *)source {
+LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
+fromLayerNamed:@"outLayer"
+toLayerNamed:@"inLayer"
+applyAnimationTransform:NO];
+return animationController;
 }
 
 - (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
- LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
- fromLayerNamed:@"outLayer"
- toLayerNamed:@"inLayer"
- applyAnimationTransform:NO];
- return animationController;
+LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
+fromLayerNamed:@"outLayer"
+toLayerNamed:@"inLayer"
+applyAnimationTransform:NO];
+return animationController;
 }
 
 ```
 
-If your animation will be frequently reused, `LOTAnimationView` has an built in LRU Caching Strategy.
+## Changing Animations At Runtime
 
-## Swift Support
-
-Lottie works just fine in Swift too!
-Simply `import Lottie` at the top of your swift class, and use Lottie as follows
+Lottie can do more than just play beautiful animations. Lottie allows you to **change** animations at runtime.
 
+### Say we want to create 4 toggle switches.
+![Toggle](_Gifs/switch_Normal.gif)
+Its easy to create the four switches and play them:
 ```swift
-let animationView = LOTAnimationView(name: "hamburger")
+let animationView = LOTAnimationView(name: "toggle");
 self.view.addSubview(animationView)
+animationView.frame.origin.x = 40
+animationView.frame.origin.y = 20
+animationView.autoReverseAnimation = true
+animationView.loopAnimation = true
+animationView.play()
+
+let animationView2 = LOTAnimationView(name: "toggle");
+self.view.addSubview(animationView2)
+animationView2.frame.origin.x = 40
+animationView2.frame.origin.y = animationView.frame.maxY + 4
+animationView2.autoReverseAnimation = true
+animationView2.loopAnimation = true
+animationView2.play()
+
+let animationView3 = LOTAnimationView(name: "toggle");
+self.view.addSubview(animationView3)
+animationView3.frame.origin.x = 40
+animationView3.frame.origin.y = animationView2.frame.maxY + 4
+animationView3.autoReverseAnimation = true
+animationView3.loopAnimation = true
+animationView3.play()
+
+let animationView4 = LOTAnimationView(name: "toggle");
+self.view.addSubview(animationView4)
+animationView4.frame.origin.x = 40
+animationView4.frame.origin.y = animationView3.frame.maxY + 4
+animationView4.autoReverseAnimation = true
+animationView4.loopAnimation = true
+animationView4.play()
+
+```
+### Now lets change their colors
+![Recolored Toggle](_Gifs/switch_BgColors.gif)
+```swift
+animationView2.setValue(UIColor.green, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
+animationView3.setValue(UIColor.red, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
+animationView4.setValue(UIColor.orange, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
+```
+The keyPath is a dot separated path of layer and property names from After Effects.
+![Key Path](_Gifs/aftereffectskeypath.png)
+"BG-On.Group 1.Fill 1.Color"
 
-animationView.play(completion: { finished in
- // Do Something
-})
+### Now lets change a couple of properties
+![Multiple Colors](_Gifs/switch_MultipleBgs.gif)
+```swift
+animationView2.setValue(UIColor.green, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
+animationView2.setValue(UIColor.red, forKeypath: "BG-Off.Group 1.Fill 1.Color", atFrame: 0)
 ```
-## Note:
-Animation file name should be first added to your project. as for the above code sample, It won't work until you add an animation file called `hamburger.json`.. 
-`let animationView = LOTAnimationView(name: "here_goes_your_json_file_name_without_.json")` 
 
-## MacOS support and Lottie View
-Lottie also fully supports MacOS, so you can add animations to your awesome Mac App!
-In the [Example Folder](Example/) you will find a Lottie Viewer Mac App. Build and run this app to preview Lottie animations straight from your desktop!
-The app supports play, scrubbing, resizing, and most importantly you can drag and drop JSON files onto the app window to open any animation.
+Lottie allows you to change **any** property that is animatable in After Effects. If a keyframe does not exist, a linear keyframe is created for you. If a keyframe does exist then just its data is replaced.
+
 
 ## Supported After Effects Features
 
@@ -190,7 +325,7 @@ The app supports play, scrubbing, resizing, and most importantly you can drag an
 * Path
 * Group Transforms (Anchor point, position, scale etc)
 * Rectangle (All properties)
-* Elipse (All properties)
+* Eclipse (All properties)
 * Multiple paths in one group
 * Even-Odd winding paths
 * Reverse Fill Rule
@@ -253,47 +388,12 @@ The app supports play, scrubbing, resizing, and most importantly you can drag an
 
 ## Currently Unsupported After Effects Features
 
-
 * Merge Shapes
 * Trim Shapes Individually feature of Trim Paths
 * Expressions
 * 3d Layer support
 * Radial Gradients
 
-
-## Install Lottie
-
-### CocoaPods
-Add the pod to your podfile
-```
-pod 'lottie-ios'
-```
-run
-```
-pod install
-```
-
-### Carthage
-Install Carthage (https://github.com/Carthage/Carthage)
-Add Lottie to your Cartfile
-```
-github "airbnb/lottie-ios" "master"
-```
-run
-```
-carthage update
-```
-
-## Try it out
-
-Lottie Uses Cocoapods!
-Get the Cocoapod or clone this repo and try out [the Example App](https://github.com/airbnb/lottie-ios/tree/master/Example)
-After installing the cocoapod into your project import Lottie with
-`#import <Lottie/Lottie.h>`
-
-Try with Carthage.
-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.
-
 ## Community Contributions
  * [Xamarin bindings](https://github.com/martijn00/LottieXamarin)
  * [NativeScript bindings](https://github.com/bradmartin/nativescript-lottie)