lottie-ios - npm Package Compare versions

Comparing version 2.0.1 to 2.0.5

package.json

 {
   "name": "lottie-ios",
-  "version": "2.0.1",
+  "version": "2.0.5",
   "description": "Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # 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)
+- [Debugging Lottie](#debugging)
+- [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://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!
@@ -23,9 +44,67 @@
 
-## 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://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
@@ -35,3 +114,3 @@ LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
 [animation playWithCompletion:^(BOOL animationFinished) {
-  // Do Something
+// Do Something
 }];
@@ -46,3 +125,3 @@ ```
 [animation playWithCompletion:^(BOOL animationFinished) {
-  // Do Something
+// Do Something
 }];
@@ -72,43 +151,79 @@ ```
 ```
+## 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{ (finished) in
+      // Do Something
+}
 ```
 
-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!
 
+![Transition1](_Gifs/transitionMasked.gif)
+![Transition2](_Gifs/transitionPosition.gif)
+
+Just become the delegate for a transition
+
 ```objective-c
+- (void)_showTransitionA {
+  ToAnimationViewController *vc = [[ToAnimationViewController alloc] init];
+  vc.transitioningDelegate = self;
+  [self presentViewController:vc animated:YES completion:NULL];
+}
+```
+
+And implement the delegate methods with a `LOTAnimationTransitionController`
+
+```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;
 }
@@ -118,26 +233,86 @@
 
-If your animation will be frequently reused, `LOTAnimationView` has an built in LRU Caching Strategy.
+By setting `applyAnimationTransform` to YES you can make the Lottie animation move the from and to view controllers. They will be positioned at the origin of the layer. When set to NO Lottie just masks the view controller with the specified layer while resepecting z order.
 
-## Swift Support
+## Debugging
+Lottie has a couple of debugging features to know about. 
+When an animation is loaded unsupported features are logged out in the console with their function names.
 
-Lottie works just fine in Swift too!
-Simply `import Lottie` at the top of your swift class, and use Lottie as follows
+If you checkout LOTHelpers.h you will see two debug flags. `ENABLE_DEBUG_LOGGING` and `ENABLE_DEBUG_SHAPES`. 
+`ENABLE_DEBUG_LOGGING` increases the verbosity of Lottie Logging. It logs anytime an animation node is set during animation. If your animation if not working, turn this on and play your animation. The console log might give you some clues as to whats going on.
 
+`ENABLE_DEBUG_SHAPES` Draws a colored square for the anchor-point of every layer and shape. This is helpful to see if anything is on screen.
+
+### Keypaths
+
+LOTAnimationView provides `- (void)logHierarchyKeypaths` which will recursively log all settable keypaths for the animation. This is helpful for changing animationations at runtime.
+
+## Changing Animations At Runtime
+
+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()
 
-animationView.play(completion: { finished in
-    // Do Something
-})
+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()
+
 ```
-## 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")` 
+### 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)
+```
 
-## 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.
+```objective-c
+[animationView2 setValue:[UIColor greenColor]
+              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.
+LOTAnimationView provides `- (void)logHierarchyKeypaths` which will recursively log all settable keypaths for the animation.
+![Key Path](_Gifs/aftereffectskeypath.png)
+"BG-On.Group 1.Fill 1.Color"
 
+### 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)
+```
+
+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
@@ -198,3 +373,3 @@
 * Rectangle (All properties)
-* Elipse (All properties)
+* Eclipse (All properties)
 * Multiple paths in one group
@@ -241,2 +416,3 @@ * Even-Odd winding paths
 * Support for Linear Gradients
+* Support for Radial Gradients
 
@@ -263,3 +439,2 @@ ### Polystar and Polygon
 
-
 * Merge Shapes
@@ -269,38 +444,3 @@ * Trim Shapes Individually feature of Trim Paths
 * 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
@@ -328,3 +468,3 @@ * [Xamarin bindings](https://github.com/martijn00/LottieXamarin)
 ## Issues or feature requests?
-File github issues for anything that is unexpectedly broken. If an After Effects file is not working, please attach it to your issue. Debugging without the original file is much more difficult.
+File github issues for anything that is unexpectedly broken. If an After Effects file is not working, please attach it to your issue. Debugging without the original file is much more difficult. Lottie is developed and maintained by [Brandon Withrow](mailto:[e-mail]). Feel free to reach out via email or [Twitter](https://twitter.com/theWithra)
 
@@ -331,0 +471,0 @@ ## Roadmap (In no particular order)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

464

increased by43.21%

Worsened metrics

Total package byte prevSize

561208

decreased by-95.83%

Number of package files

131

decreased by-57.61%

Lines of code

1

decreased by-99.96%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes