Skip to content

Commit

Permalink
spelling
Browse files Browse the repository at this point in the history
  • Loading branch information
Coeur committed Mar 12, 2019
1 parent 718f4ae commit b2bc7d5
Show file tree
Hide file tree
Showing 36 changed files with 137 additions and 137 deletions.
32 changes: 16 additions & 16 deletions Documentation/CONTRIBUTOR.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ Before submitting a PR to Lottie please run through the following checklist.
- Add any new files to all of the targets in `/Lottie.xcodeproj`
- Ensure that all targets build in `/Lottie.xcodeproj`

After making a PR please watch for PR notifications. We will run a series of tests on the PR to ensure that it does not break existing animaitons.
After making a PR please watch for PR notifications. We will run a series of tests on the PR to ensure that it does not break existing animations.

NOTE: PRs must be approved by the Maintainer of Lottie-ios before they can be merged.

## Project Structure

Lottie is available on iOS and MacOS via Cocoapods, NPM, and Carthage. Because of this, there are some things to consider when adding files to the project. All of the under-the-hood code in Lottie is written to compile in all environments. Specialty wrappers for both `iOS` and `MacOS` are written to give access to Lottie in each environment. These wrappers are designed to be as thin as possible, to avoid code fragmentation.
Lottie is available on iOS and MacOS via CocoaPods, NPM, and Carthage. Because of this, there are some things to consider when adding files to the project. All of the under-the-hood code in Lottie is written to compile in all environments. Specialty wrappers for both `iOS` and `MacOS` are written to give access to Lottie in each environment. These wrappers are designed to be as thin as possible, to avoid code fragmentation.

For example, `UIKit` is only avaible on iOS, wherase MacOS uses `AppKit`.
For example, `UIKit` is only available on iOS, whereas MacOS uses `AppKit`.

### Source Code Directory Structure
All of the source code for Lottie is located in `/lottie-swift/src` in the repo. Heres a quick run down of the directory structure:
All of the source code for Lottie is located in `/lottie-swift/src` in the repo. Here's a quick run down of the directory structure:

- `src`: The Root directory for all Lottie source files
- `Public`: Public facing files.
Expand All @@ -39,11 +39,11 @@ All of the source code for Lottie is located in `/lottie-swift/src` in the repo.

### Adding a file to the project.

Because Lottie supports multiple distrubutions/platforms, adding a file to the project takes a couple of steps.
Because Lottie supports multiple distributions/platforms, adding a file to the project takes a couple of steps.

1. Add the new source file into the appropriate directory. Think about the new source file's purpose and what platform it will be available on.
2. After adding the new file, test that it can install and compile with cocoapods. Navigate to `/Example` in terminal and run `pod install`. Afterwards open [lottie-swift.xcworkspace](/Example/lottie-swift.xcworkspace "lottie-swift.xcworkspace") and build all of the target platforms to ensure that nothing is broken.
3. Add the files to the Carthage build. Open [Lottie.xcodeproj](/Lottie.xcodeproj "Lottie.xcodeproj"). Add the new file to the project. **Uncheck Copy File when adding new files to this project**. Check the files Target Membership in the right panel and make sure it is added to the appropiate targets. There are two targets, on dynamic and one static, for each platform (iOS, tvOS, macOS). After adding the targets run through and build all of the targets.
2. After adding the new file, test that it can install and compile with CocoaPods. Navigate to `/Example` in terminal and run `pod install`. Afterwards open [lottie-swift.xcworkspace](/Example/lottie-swift.xcworkspace "lottie-swift.xcworkspace") and build all of the target platforms to ensure that nothing is broken.
3. Add the files to the Carthage build. Open [Lottie.xcodeproj](/Lottie.xcodeproj "Lottie.xcodeproj"). Add the new file to the project. **Uncheck Copy File when adding new files to this project**. Check the files Target Membership in the right panel and make sure it is added to the appropriate targets. There are two targets, on dynamic and one static, for each platform (iOS, tvOS, macOS). After adding the targets run through and build all of the targets.
4. Celebrate! You've done it!

## After Effects Primer
Expand Down Expand Up @@ -78,7 +78,7 @@ A set of `Shape Objects` are held in a `Group`, which can be nested inside other

## Lottie's Node System

The simpliest way to recreate After Effects' render system would be to nest all of the render instruction into a `CALayer` and have the layer draw it's contents. This wouldn't be very performant however, as a layer would have to redraw it's entire contents if there was even the slightest of updates. In fact this is how After Effects works, each frame is entirely redrawn when anything changes. After Affects can afford to work this way, as it is not a realtime renderer.
The simplest way to recreate After Effects' render system would be to nest all of the render instruction into a `CALayer` and have the layer draw it's contents. This wouldn't be very performant however, as a layer would have to redraw it's entire contents if there was even the slightest of updates. In fact this is how After Effects works, each frame is entirely redrawn when anything changes. After Affects can afford to work this way, as it is not a realtime renderer.

Lottie works in a different way. Every renderable instruction is nested in it's own `CALayer`. Every frame a `Node Tree` determines which properties have updates, and only updates the affected layers. If a renderer doesn't have any updates, it is not redrawn. This greatly improves performance and allows for realtime rendering of animations.

Expand All @@ -98,15 +98,15 @@ Every frame a `Shape Layer` asks it's root `Animator Node` to update. The `Anima

![NodePropertyMap](images/nodePropertyMap.png)

An `Animator Node` holds reference to a `Node Property Map`. The `Node Property Map` holds a list of `Node Property` objects, and is responsible for updating them each frame. Additionally the `Node Property Map` can map to its `Node Property` obects by a key.
An `Animator Node` holds reference to a `Node Property Map`. The `Node Property Map` holds a list of `Node Property` objects, and is responsible for updating them each frame. Additionally the `Node Property Map` can map to its `Node Property` objects by a key.

### Node Property

![NodeProperty](images/nodeProperty.png)

A `Node Property` holds both a `Value Provider` and a `Value Container`. During an update the `Node Property` will ask the `Value Provider` if it has an update. If it does the `Node Property` will get the new value from the `Value Provider` and store it in the `Value Container`. The property and the container will be marked as having an update.

Additionally, the `Value Provider` of a `Node Property` can be dynamically changed, allowing animaitons to be altered at runtime.
Additionally, the `Value Provider` of a `Node Property` can be dynamically changed, allowing animations to be altered at runtime.

### Value Provider

Expand Down Expand Up @@ -148,7 +148,7 @@ A `ShapeCompositionLayer` is a top level `CALayer` that holds a `Node Tree` and

*The Animator Node update cycle*

This is the update cycle for a single `Animator Node`. When the `ShapeCompositionLayer` recieves a frame it tells its root `Animator Node` to update with the frame. The `Animator Node` calls recursively upstream to start updates at the top of the tree. An `Animator Node` asks its `Node Property Map` if there are updates. The property map holds a list of `Node Property` objects. Each one is asked if it has an update. That call is passed through to the `Value Provider`, and also the `Value Container` if either return `true` then the property is marked for update. Next the `Node Property Map` loops through its properties and asks them to update if necessarry. The `Node Property` asks its `Value Provider` for its value and then stores it in the `Value Container`.
This is the update cycle for a single `Animator Node`. When the `ShapeCompositionLayer` receives a frame it tells its root `Animator Node` to update with the frame. The `Animator Node` calls recursively upstream to start updates at the top of the tree. An `Animator Node` asks its `Node Property Map` if there are updates. The property map holds a list of `Node Property` objects. Each one is asked if it has an update. That call is passed through to the `Value Provider`, and also the `Value Container` if either return `true` then the property is marked for update. Next the `Node Property Map` loops through its properties and asks them to update if necessary. The `Node Property` asks its `Value Provider` for its value and then stores it in the `Value Container`.

After all of the `Node Properties` have updates the `Animator Node` passes its update state down stream. Once the entire tree has updated its properties it starts to rebuild its outputs. Outputs are rebuilt from the bottom of the tree up to the top. If an `Animator Node` was marked as updated during its update pass it rebuilds its output. `updateOutputs` is called. Here an `Animator Node` executes its custom code for building its outputs. It reads the values of its properties `Value Container` and builds the output that is stored in its `Output Node`. Afterwards it calls up the tree to continue the update process.

Expand All @@ -162,7 +162,7 @@ The `Shape Composition Layer` tells it's `Shape Container Layer` to mark it's up

Each `Shape Render Layer` holds reference to a `Renderer`. A `Renderer` is a type of `Output Node` that has render instructions in addition to an `outputPath`. The `Shape Render Layer` asks its renderer if there are updates for the frame. If the renderer returns `true` the `Shape Render Layer` calls `setNeedsDisplay` on itself which loops into `CALayer` update system.

When `dispaly` is called on the `Shape Render Layer` it asks its render for render instructions and the layer is redrawn.
When `display` is called on the `Shape Render Layer` it asks its render for render instructions and the layer is redrawn.

🎉🎉🎉

Expand Down Expand Up @@ -207,7 +207,7 @@ class FillNodeProperties: NodePropertyMap, KeypathSearchable {
self.color = NodeProperty(provider: KeyframeInterpolator(keyframes: fill.color.keyframes))
/// Create a Node Property with a group of Float Keyframes
self.opacity = NodeProperty(provider: KeyframeInterpolator(keyframes: fill.opacity.keyframes))
/// Set the fill rulle.
/// Set the fill rule.
self.type = fill.fillRule
/// Make a key map of the properties, enabling dynamic property setting.
self.keypathProperties = [
Expand Down Expand Up @@ -290,7 +290,7 @@ Now we have a `Renderer` `OutputNode` capable of rendering a fill. We are now re

```swift

/// An `Animator Node` capbable of fill rendering.
/// An `Animator Node` capable of fill rendering.
class FillNode: AnimatorNode, RenderNode {

/// The fill renderer.
Expand Down Expand Up @@ -340,8 +340,8 @@ class FillNode: AnimatorNode, RenderNode {
}
```

And thats that!
Now, when conected to a Node Tree, the fill node will render its contents only when its contents, or its upstream nodes, have updated.
And that's that!
Now, when connected to a Node Tree, the fill node will render its contents only when its contents, or its upstream nodes, have updated.



Expand Down
6 changes: 3 additions & 3 deletions Documentation/MIGRATING.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Migrating from Lottie 2.5.3(OBJC) -> 3.0 (SWIFT)

Lottie 3.0 is a complete rewrite of Lottie in swift. Because of this there are some minor API changes. This guide should help you through migrating code from Lottie 2.5.2 to 3.0
Lottie 3.0 is a complete rewrite of Lottie in Swift. Because of this there are some minor API changes. This guide should help you through migrating code from Lottie 2.5.2 to 3.0

For continued supprt and contribution to Objective-C please point to the official Lottie Objective-C Branch [Here](https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC)
For continued support and contribution to Objective-C please point to the official Lottie Objective-C Branch [Here](https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC)

Swift discourages the use of Prefix for names. A lot of the api changes are just the removal of `LOT` from the class name. Below is a complete list of API changes.

To use Lottie Swift in an Objective-C project read Apple's offical documentation [here](https://developer.apple.com/documentation/swift/imported_c_and_objective-c_apis/importing_swift_into_objective-c)
To use Lottie Swift in an Objective-C project read Apple's official documentation [here](https://developer.apple.com/documentation/swift/imported_c_and_objective-c_apis/importing_swift_into_objective-c)

## Class Changes
| Lottie 2.5.2 | Lottie 3.0+ |
Expand Down
16 changes: 8 additions & 8 deletions Example/Pods/Pods.xcodeproj/project.pbxproj

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Example/lottie-swift/ViewController.swift
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class ViewController: UIViewController {
slider.maximumValue = 1
slider.value = 0
view.addSubview(slider)
animationView.backgroundBehvior = .pauseAndRestore
animationView.backgroundBehavior = .pauseAndRestore
animationView.translatesAutoresizingMaskIntoConstraints = false
animationView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor).isActive = true
animationView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor).isActive = true
Expand Down
Loading

0 comments on commit b2bc7d5

Please sign in to comment.