### Start Local Docsify Server

Source: https://github.com/airbnb/lottie/blob/master/docs.md

Start a local docsify server from the root of the Lottie repository to preview documentation changes.

```bash
docsify serve .
```

--------------------------------

### Install Lottie-Web via NPM

Source: https://github.com/airbnb/lottie/blob/master/web.md

Install the lottie-web package using npm for use in your project.

```bash
npm install lottie-web
```

--------------------------------

### Install Docsify CLI

Source: https://github.com/airbnb/lottie/blob/master/docs.md

Install the docsify command-line interface globally using npm.

```bash
sudo npm install -g docsify-cli
```

--------------------------------

### Install Bodymovin via Bower

Source: https://github.com/airbnb/lottie/blob/master/web.md

Install the bodymovin package using Bower for use in your project.

```bash
bower install bodymovin
```

--------------------------------

### Install Lottie Web Dependencies (Yarn)

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Add the necessary packages for Lottie web player support using Yarn.

```bash
yarn add @dotlottie/react-player @lottiefiles/react-lottie-player
```

--------------------------------

### Setup Jest Mock for .lottie Files

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Create a mock file for `.lottie` files in `__mocks__/lottieMock.js` and configure `jest.config.js` to use this mock.

```javascript
module.exports = "lottie-test-file-stub";
```

```javascript
module.exports = {
  ...
  moduleNameMapper: {
    ...,
    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
  },
  ...
```

--------------------------------

### Import Lottie in Swift

Source: https://github.com/airbnb/lottie/blob/master/ios.md

After installing Lottie via CocoaPods, import the Lottie framework into your Swift files to start using its features.

```swift
import Lottie
```

--------------------------------

### Install Lottie React Native (Yarn)

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Use this command to add the lottie-react-native package to your project when using Yarn.

```bash
yarn add lottie-react-native
```

--------------------------------

### Add Lottie to CocoaPods Podfile

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Include the 'lottie-ios' pod in your Podfile to manage Lottie as a dependency. After adding, run 'pod install'.

```ruby
pod 'lottie-ios'
```

--------------------------------

### Load and Play Local Animation in SwiftUI

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Use LottieView to load and play a local animation file from your project's assets. The .playing() modifier starts the animation immediately.

```swift
LottieView(animation: .named("StarAnimation"))
  .playing()
```

--------------------------------

### Animate Lottie Composition Progress

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Use `animateLottieCompositionAsState` to get the current animation progress. This is useful for simple animations driven by state.

```kotlin
val progress by animateLottieCompositionAsState(composition)
```

```kotlin
val progress by animateLottieCompositionAsState(
    composition,
    iterations = LottieConstants.IterateForever,
)
```

```kotlin
val progress by animateLottieCompositionAsState(
    composition,
    clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),
)
```

--------------------------------

### Play with Progress Time

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation from a specified start progress to an end progress with optional loop mode and completion block.

```APIDOC
## Play with Progress Time

### Description
Plays the animation from a `Progress Time` to a `Progress Time` with options.

### Method Signature
`LottieAnimationView.play(fromProgress: AnimationProgressTime?, toProgress: AnimationProgressTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)`

### Parameters
* **fromProgress** (AnimationProgressTime?) - The start progress of the animation. If `nil` the animation will start at the current progress. (Optional)
* **toProgress** (AnimationProgressTime) - The end progress of the animation.
* **loopMode** (LottieLoopMode?) - The loop behavior of the animation. If `nil` the view's `loopMode` property will be used. (Optional)
* **completion** (LottieCompletionBlock?) - An optional completion closure to be called when the animation stops. (Optional)

### Example
```swift
/// Play only the last half of an animation.
animationView.play(fromProgress: 0.5, toProgress: 1)

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing(.fromProgress(0.5, toProgress: 1, loopMode: .playOnce))
```
```

--------------------------------

### Play with Marker Names

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation from a named start marker to a named end marker with optional loop mode and completion block.

```APIDOC
## Play with Marker Names

### Description
Plays the animation from a named marker to another marker. Markers are point in time that are encoded into the LottieAnimation data and assigned a name.
Read more on Markers [here](#using-markers)
==NOTE==: If markers are not found the play command will exit.

### Method Signature
`LottieAnimationView.play(fromMarker: String?, toMarker: String, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)`

### Parameters
* **fromMarker** (String?) - The start marker for the animation playback. If `nil` the animation will start at the current progress. (Optional)
* **toMarker** (String) - The end marker for the animation playback.
* **loopMode** (LottieLoopMode?) - The loop behavior of the animation. If `nil` the view's `loopMode` property will be used. (Optional)
* **completion** (LottieCompletionBlock?) - An optional completion closure to be called when the animation stops. (Optional)

### Example
```swift
/// Play from marker "ftue1_begin" to marker "ftue1_end" of an animation.
animationView.play(fromMarker: "ftue1_begin", toMarker: "ftue1_end")


// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing(.fromMarker("ftue1_begin", toMarker: "ftue1_end", loopMode: .playOnce))
```
```

--------------------------------

### Play Animation by Progress

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation between specified progress times. Supports custom loop modes and an optional completion block. If fromProgress is nil, it starts from the current progress.

```swift
LottieAnimationView.play(fromProgress: AnimationProgressTime?, toProgress: AnimationProgressTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)
```

```swift
/// Play only the last half of an animation.
animationView.play(fromProgress: 0.5, toProgress: 1)
```

```swift
// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing(.fromProgress(0.5, toProgress: 1, loopMode: .playOnce))
```

--------------------------------

### Control Animation Playback with State in SwiftUI

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Control animation playback using an @State variable and LottiePlaybackMode. This example plays an animation when a button is pressed and pauses it upon completion.

```swift
@State var playbackMode = LottiePlaybackMode.paused

var body: some {
  LottieView(animation: .named("StarAnimation"))
    .playbackMode(playbackMode)
    .animationDidFinish { _ in
      playbackMode = .paused
    }
  
  Button {
    playbackMode = .playing(.fromProgress(0, toProgress: 1, loopMode: .playOnce))
  } label: {
    Image(systemName: "play.fill")
  }
}
```

--------------------------------

### Load Lottie Composition from Different Sources

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Demonstrates creating `LottieComposition` using `rememberLottieComposition` with various `LottieCompositionSpec` options: raw resource, network URL, and assets.

```kotlin
val composition1 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
val composition2 by rememberLottieComposition(LottieCompositionSpec.Url("https://..."))
// src/main/assets/animations/animation.json
val composition3 by rememberLottieComposition(LottieCompositionSpec.Asset("animations/animation.json"))
```

--------------------------------

### Set and Get Lottie Animation Current Progress (SwiftUI)

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Sets the current animation time using a progress value between 0.0 and 1.0. Setting this stops any current animation. Also shows how to get the realtime progress via a binding.

```swift
var LottieAnimationView.currentProgress: AnimationProgressTime { get set }
```

```swift
LottieView(animation: myAnimation)
  .currentProgress(0.5)
```

```swift
LottieView(animation: myAnimation)
  .playing()
  .getRealtimeAnimationProgress($progressBinding)
```

--------------------------------

### Initialize FilepathImageProvider

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Create a filepath image provider to load images from a local file URL. This allows for more flexible image sourcing.

```swift
/// Create a bundle that loads images from a local URL filepath.
let imageProvider = AnimationImageProvider(filepath: url)
/// Set the provider on an animation.
animationView.imageProvider = imageProvider
```

--------------------------------

### Stop

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Stops the currently playing animation, if any, and resets the animation view to its start frame.

```APIDOC
## Stop

### Description
Stops the currently playing animation, if any. The animation view is reset to its start frame. The previous animation's completion block will be closed with `false`

### Method Signature
`LottieAnimationView.stop()`

### Example
```swift
animationView.stop()
```
```

--------------------------------

### Initialize BundleImageProvider

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Create a bundle image provider to load images from a specific directory within the main bundle. This is useful for organizing animation assets.

```swift
/// Create a bundle that loads images from the Main bundle in the subdirectory "AnimationImages"
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "AnimationImages")
/// Set the provider on an animation.
animationView.imageProvider = imageProvider
```

--------------------------------

### Global Lottie Configuration

Source: https://github.com/airbnb/lottie/blob/master/android.md

Initialize Lottie with custom configurations, such as enabling systrace markers, providing a custom network fetcher or cache directory, or disabling the network cache. This should be done during application initialization.

```kotlin
Lottie.initialize(
    LottieConfig.Builder()
        .setEnableSystraceMarkers(true)
        .setNetworkFetcher(...)
        .setNetworkCacheDir(...)
        .setEnableNetworkCache(false)
)
```

--------------------------------

### Get Realtime Frame Time

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Returns the current frame time of the animation while it is playing. Useful for precise real-time tracking.

```swift
var LottieAnimationView.realtimeAnimationFrame: AnimationFrameTime { get }
```

--------------------------------

### Enable Mask and Matte Outlining

Source: https://github.com/airbnb/lottie/blob/master/android.md

For debugging, Lottie can outline all masks and mattes. Enable this feature to visualize their bounds.

```java
lottieAnimationView.setOutlineMasksAndMattes(true);
lottieDrawable.setOutlineMasksAndMattes(true);
```

--------------------------------

### Play with Frame Time

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation from a specified start frame to an end frame with optional loop mode and completion block.

```APIDOC
## Play with Frame Time

### Description
Plays the animation from a `Frame Time` to a `Frame Time` with options.

### Method Signature
`LottieAnimationView.play(fromFrame: AnimationProgressTime?, toFrame: AnimationFrameTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)`

### Parameters
* **fromFrame** (AnimationProgressTime?) - The start frame of the animation. If `nil` the animation will start at the current frame. (Optional)
* **toFrame** (AnimationFrameTime) - The end frame of the the animation.
* **loopMode** (LottieLoopMode?) - The loop behavior of the animation. If `nil` the view's `loopMode` property will be used. (Optional)
* **completion** (LottieCompletionBlock?) - An optional completion closure to be called when the animation stops. (Optional)

### Example
```swift
/// Play from frame 24 to 48 of an animation.
animationView.play(fromFrame: 24, toFrame: 48)


// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing(.fromFrame(24, toFrame: 48, loopMode: .playOnce))
```
```

--------------------------------

### Configure Lottie React Native for Windows (XML)

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Add these properties and imports to your project file for Lottie React Native integration on Windows.

```xml
<PropertyGroup Label="LottieReactNativeProps">
    <LottieReactNativeDir>$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\lottie-react-native\package.json'))\node_modules\lottie-react-native</LottieReactNativeDir>
</PropertyGroup>
<ImportGroup Label="LottieReactNativeTargets">
    <Import Project="$(LottieReactNativeDir)\src\windows\cppwinrt\PropertySheets\LottieGen.Auto.targets" />
</ImportGroup>
```

--------------------------------

### Add Lottie to Carthage Cartfile

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Specify the Lottie GitHub repository and version in your Cartfile for Carthage integration. Run 'carthage update' to fetch the framework.

```bash
github "airbnb/lottie-ios" "master"
```

--------------------------------

### Basic Lottie Animation Usage

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Displays a Lottie animation from raw resources and animates its progress. Requires `rememberLottieComposition` and `animateLottieCompositionAsState`.

```kotlin
@Composable
fun Loader() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
    val progress by animateLottieCompositionAsState(composition)
    LottieAnimation(
        composition = composition,
        progress = { progress },
    )
}
```

--------------------------------

### Play Multiple Lottie Animations

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Instantiate and add multiple Lottie animation views to the view hierarchy and play them. Ensure the animation file is correctly named.

```swift
let animationView = LottieAnimationView(name: "toggle");
self.view.addSubview(animationView)
animationView.play()

let animationView2 = LottieAnimationView(name: "toggle");
self.view.addSubview(animationView2)
animationView2.play()

let animationView3 = LottieAnimationView(name: "toggle");
self.view.addSubview(animationView3)
animationView3.play()

let animationView4 = LottieAnimationView(name: "toggle");
self.view.addSubview(animationView4)
animationView4.play()
```

--------------------------------

### Get Realtime Progress Time

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Returns the current progress time of the animation while it is playing. Useful for understanding the animation's completion percentage in real-time.

```swift
var LottieAnimationView.realtimeAnimationProgress: AnimationProgressTime { get }
```

--------------------------------

### Global Lottie Methods

Source: https://github.com/airbnb/lottie/blob/master/web.md

Utilize global lottie methods to control animations by name, search for animations, load new ones, or manage player quality.

```javascript
// Global lottie methods:
lottie.play(name)
lottie.stop(name)
lottie.setSpeed(speed, name)
lottie.setDirection(direction, name)
lottie.searchAnimations()
lottie.loadAnimation()
lottie.destroy()
lottie.registerAnimation()
lottie.setQuality(quality)
```

--------------------------------

### Configure Docsify for Lottie

Source: https://github.com/airbnb/lottie/blob/master/index.html

This snippet shows the configuration object for Docsify, a documentation site generator, used for the Lottie project. It sets various options like the repository, sidebar loading, search functionality, and theme color.

```javascript
window.$docsify = {
  name: 'Lottie',
  repo: 'https://github.com/airbnb/lottie',
  loadSidebar: true,
  homepage: 'home.md',
  subMaxLevel: 1,
  alias: {
    '/.\*\/_sidebar.md': '/\_sidebar.md'
  },
  search: {
    noData: {
      '/': 'no results'
    },
    paths: 'auto',
    placeholder: {
      '/': 'search...'
    }
  },
  auto2top: true,
  logo: '/images/logo.webp',
  themeColor: '#00D1C1'
}
```

--------------------------------

### Stop Animation Playback

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Stops the currently playing animation and resets the view to its start frame. The previous animation's completion block is called with `false` indicating interruption.

```swift
LottieAnimationView.stop()
```

```swift
animationView.stop()
```

--------------------------------

### Play Animation by Frame

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation between specified frame numbers. Supports custom loop modes and an optional completion block. If fromFrame is nil, it starts from the current frame.

```swift
LottieAnimationView.play(fromFrame: AnimationProgressTime?, toFrame: AnimationFrameTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)
```

```swift
/// Play from frame 24 to 48 of an animation.
animationView.play(fromFrame: 24, toFrame: 48)
```

```swift
// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing(.fromFrame(24, toFrame: 48, loopMode: .playOnce))
```

--------------------------------

### Load Lottie Animation by Name (UIKit)

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Instantiate an LottieAnimationView by providing the name of your animation asset. This is a quick way to load animations included in your project's assets.

```swift
let starAnimationView = LottieAnimationView(name: "StarAnimation")
```

--------------------------------

### Configure Lottie Animation Loop Mode

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Sets the loop behavior for play calls. Defaults to playOnce. Options include looping, auto-reversing, and repeating a specific number of times.

```swift
var LottieAnimationView.loopMode: LottieLoopMode { get set }
```

--------------------------------

### Configure Metro for .lottie Files

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Modify your `metro.config.js` to include the `lottie` extension in `assetExts` for handling `.lottie` files.

```javascript
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, "lottie"],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
```

--------------------------------

### Set Play Range for Animated Button Touch Event

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Configures an AnimatedButton to play a specific segment of its animation based on marker keys when a UIControl.Event occurs. This example sets ranges for touch down and touch up events.

```swift
/// Create a button.
let twitterButton = AnimatedButton()
twitterButton.translatesAutoresizingMaskIntoConstraints = false
/// Set an animation on the button.
twitterButton.animation = LottieAnimation.named("TwitterHeartButton", subdirectory: "TestAnimations")
/// Turn off clips to bounds, as the animation goes outside of the bounds.
twitterButton.clipsToBounds = false
/// Set animation play ranges for touch states
twitterButton.setPlayRange(fromMarker: "touchDownStart", toMarker: "touchDownEnd", event: .touchDown)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpCancel", event: .touchUpOutside)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpEnd", event: .touchUpInside)
view.addSubview(twitterButton)
```

--------------------------------

### Register Lottie React Native Provider (C++)

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Append the LottieReactNative provider to your PackageProviders list for C++ applications.

```cpp
// C++ 
#include <winrt/LottieReactNative.h>
#include <winrt/AnimatedVisuals.h>

...

PackageProviders().Append(winrt::LottieReactNative::ReactPackageProvider(winrt::AnimatedVisuals::LottieCodegenSourceProvider()));
```

--------------------------------

### Play Lottie Animation with Completion Handler (UIKit)

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Initiate playback of the loaded Lottie animation. A completion closure is provided to execute code once the animation has finished playing.

```swift
starAnimationView.play { (finished) in
  /// LottieAnimation finished
}
```

--------------------------------

### Create Dynamic Properties for Lottie Animation

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

This snippet shows how to create and remember dynamic properties for a Lottie animation. It's useful for changing animation attributes like color based on runtime conditions. Ensure you have the necessary Lottie dependencies imported.

```kotlin
val dynamicProperties = rememberLottieDynamicProperties(
    rememberLottieDynamicProperty(
        property = LottieProperty.COLOR,
        value = color.toArgb(),
        keyPath = arrayOf(
            "H2",
            "Shape 1",
            "Fill 1",
        )
    ),
)
```

--------------------------------

### Add Sonatype Repository for Snapshots

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Configure your project's build.gradle to include the Sonatype repository for accessing snapshot versions.

```groovy
allprojects {
    repositories {
        ...
        maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
    }
}
```

--------------------------------

### Load Animation with Options

Source: https://github.com/airbnb/lottie/blob/master/web.md

Load a Lottie animation by providing an options object to lottie.loadAnimation. This method returns an animation instance for control.

```javascript
lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});
```

--------------------------------

### Logging Keypaths

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Log all child keypaths of the animation to the console for debugging and inspection.

```APIDOC
## Logging Keypaths

### Description
Log all child keypaths of the animation into the console. This is useful for identifying available keypaths for dynamic property manipulation.

### Methods
#### `logHierarchyKeypaths()`
- **Description**: Logs all child keypaths of the animation into the console.
- **Receiver**: `LottieAnimationView` (UIKit) or `LottieView` (SwiftUI)

### Example
```swift
// UIKit LottieAnimationView API
LottieAnimationView.logHierarchyKeypaths()

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing()
  .configure { lottieAnimationView in
    lottieAnimationView.logHierarchyKeypaths()
  }
```
```

--------------------------------

### Load Lottie Animation and Set Later (UIKit)

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Create an empty LottieAnimationView and assign an LottieAnimation object to it later. This allows for more control over when the animation is loaded and set.

```swift
let starAnimationView = LottieAnimationView()
/// Some time later
let starAnimation = LottieAnimation.named("StarAnimation")
starAnimationView.animation = starAnimation
```

--------------------------------

### Load LottieAnimation from Subdirectory

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load a LottieAnimation model from a subdirectory within a bundle. This helps organize your animation files.

```swift
let animation = LottieAnimation.named("StarAnimation", subdirectory: "Animations")
```

--------------------------------

### Initialize AnimationKeypath for Fill Color

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Creates an AnimationKeypath instance to target the 'Color' property of any layer named 'Fill 1' within the animation, searching recursively through all depths.

```swift
/// A keypath that finds the color value for all `Fill 1` nodes.  
let fillKeypath =  AnimationKeypath(keypath:  "**.Fill 1.Color")
```

--------------------------------

### Load Animation in XML

Source: https://github.com/airbnb/lottie/blob/master/android.md

Use `LottieAnimationView` in your XML layout to display animations. You can specify the animation using `lottie_rawRes` for resources or `lottie_fileName` for assets. Loop and autoplay can also be configured.

```xml
<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:lottie_rawRes="@raw/hello_world"
        // or
        app:lottie_fileName="hello_world.json"

        // Loop indefinitely
        app:lottie_loop="true"
        // Start playing as soon as the animation is loaded
        app:lottie_autoPlay="true" />
```

--------------------------------

### Simplified Lottie Animation Usage

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

A simpler way to display a Lottie animation from raw resources using an overload of `LottieAnimation` that implicitly handles composition and progress.

```kotlin
@Composable
fun Loader() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
    LottieAnimation(composition)
}
```

--------------------------------

### Load LottieAnimation from Filepath

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load a LottieAnimation model directly from an absolute file path. This is useful for animations loaded dynamically from the file system.

```swift
let animation = LottieAnimation(filepathURL.path, animationCache: LRUAnimationCache.sharedCache)
```

--------------------------------

### Load LottieAnimation with Cache

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load a LottieAnimation model and utilize an AnimationCacheProvider for improved performance by caching deserialized animations.

```swift
let animation = LottieAnimation.named("StarAnimation", animationCache: LRUAnimationCache.sharedCache)
```

--------------------------------

### Register Lottie React Native Provider (C#)

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Include the LottieReactNative provider in your React Native Windows PackageProviders list for C# applications.

```csharp
// C#
PackageProviders.Add(new LottieReactNative.ReactPackageProvider(new AnimatedVisuals.LottieCodegenSourceProvider()));
```

--------------------------------

### Add Lottie Dependency

Source: https://github.com/airbnb/lottie/blob/master/android.md

Add the Lottie implementation dependency to your project's build.gradle file. Ensure you replace `lottieVersion` with the actual version.

```groovy
dependencies {
    ... 
    implementation "com.airbnb.android:lottie:$lottieVersion"
    ...
}
```

--------------------------------

### Handling Network or File Load Failures with Retries

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Implements retry logic for Lottie composition loading, especially useful for network or file-based sources that might fail. Uses `rememberLottieRetrySignal` and `onRetry` callback.

```kotlin
val retrySignal = rememberLottieRetrySignal()
val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("not a url"),
    onRetry = { failCount, exception ->
        retrySignal.awaitRetry()
        // Continue retrying. Return false to stop trying.
        true
    }
)
```

--------------------------------

### Load and Play Remote Animation in SwiftUI

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load animations asynchronously from a URL using LottieView. Ensure the URL points to a valid Lottie JSON file. The animation will play once loaded.

```swift
LottieView { 
  try await LottieAnimation.loadedFrom(url: myAnimationDownloadURL)
}
.playing()
```

--------------------------------

### Log Animation Keypaths

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Logs all child keypaths of the animation to the console, aiding in identifying properties that can be dynamically controlled.

```swift
// UIKit LottieAnimationView API
LottieAnimationView.logHierarchyKeypaths()

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing()
  .configure { lottieAnimationView in
    lottieAnimationView.logHierarchyKeypaths()
  }
```

--------------------------------

### Load LottieAnimation from Main Bundle

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load a LottieAnimation model from the main application bundle by its name. Ensure the JSON file is included in your project's assets.

```swift
let animation = LottieAnimation.named("StarAnimation")
```

--------------------------------

### HTML Structure for Auto-Loading Animations

Source: https://github.com/airbnb/lottie/blob/master/web.md

Define a div with the class 'lottie' and a 'data-animation-path' attribute to enable automatic animation loading. Optional attributes like 'data-anim-loop' and 'data-name' can further customize behavior.

```html
<div style="width:1067px;height:600px" class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>
```

--------------------------------

### XAML AnimatedVisualPlayer with JSON Source

Source: https://github.com/airbnb/lottie/blob/master/windows.md

Use an AnimatedVisualPlayer with a LottieVisualSource to display a Lottie animation from a JSON file. The UriSource points to the animation file.

```xaml
    <!--  AnimatedVisualPlayer with AutoPlay  -->
    <winui:AnimatedVisualPlayer x:Name="LottiePlayer">
        <!--  LottieVisualSource that parses a JSON Uri at run-time  -->
        <lottie:LottieVisualSource UriSource="ms-appx:///AnimatedVisuals/LottieLogo1.json" />
    </winui:AnimatedVisualPlayer>
```

--------------------------------

### Set Image Assets Folder

Source: https://github.com/airbnb/lottie/blob/master/android.md

Specify the folder containing image assets for Lottie animations. This can be done programmatically or via XML attributes.

```java
lottieAnimationView.setImageAssetsFolder("folderName/");
lottieDrawable.setImageAssetsFolder("folderName/");
```

```xml
app:lottie_imageAssetsFolder="folderName/"
```

--------------------------------

### XAML AnimatedVisualPlayer with Codegen Source

Source: https://github.com/airbnb/lottie/blob/master/windows.md

Configure an AnimatedVisualPlayer to use a generated C# class for Lottie animations. This approach offers better performance by avoiding runtime JSON parsing.

```xaml
    <!--  AnimatedVisualPlayer with AutoPlay  -->
    <winui:AnimatedVisualPlayer x:Name="LottiePlayer">
        <!--  Codegen source with C# class: AnimatedVisuals/LottieLogo1.cs  -->
        <animatedvisuals:LottieLogo1 />
    </winui:AnimatedVisualPlayer>
```

--------------------------------

### Basic Playing

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Plays the animation from its current state to the end of its timeline. Calls the completion block when the animation is stopped.

```APIDOC
## Basic Playing

### Description
Plays the animation from its current state to the end of its timeline. Calls the completion block when the animation is stopped.

### Method Signature
`LottieAnimationView.play(completion: LottieCompletionBlock?)`

### Parameters
* **completion** (LottieCompletionBlock?) - A completion block that is called when the animation completes. The block will be passed `true` if the animation completes and `false` if the animation was interrupted. Optional.

### Example
```swift
starAnimationView.play { finished in
  /// LottieAnimation stopped
}

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing()
  .animationDidFinish { finished in
    /// LottieAnimation did finish
  }
```
```

--------------------------------

### Using LottieCompositionResult for State and Error Handling

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Shows how to use `LottieCompositionResult` to access the composition value, loading state, and errors. The `await()` function can be used in coroutines.

```kotlin
val compositionResult: LottieCompositionResult = rememberLottieComposition(spec)
```

--------------------------------

### Add Lottie Compose Dependency

Source: https://github.com/airbnb/lottie/blob/master/android-compose.md

Add this dependency to your app's build.gradle file to include Lottie Compose.

```groovy
dependencies {
    ... 
    implementation "com.airbnb.android:lottie-compose:$lottieVersion"
    ...
}
```

--------------------------------

### Load LottieAnimation from Specific Bundle

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Load a LottieAnimation model from a specific Bundle. This is useful if your animations are not in the main bundle.

```swift
let animation = LottieAnimation.named("StarAnimation", bundle: myBundle)
```

--------------------------------

### Setting Dynamic Properties

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Dynamically update animation properties at runtime by setting a ValueProvider for a specific keypath.

```APIDOC
## Setting Dynamic Properties

### Description
Dynamically update animation properties at runtime by setting a ValueProvider for a specific keypath. The value provider will be set on all properties that match the keypath.

### Methods
#### `setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath)`
- **Description**: Sets a ValueProvider for the specified keypath.
- **Receiver**: `LottieAnimationView`
- **Parameters**:
  - **valueProvider**: The new value provider for the property.
  - **keypath**: The keypath used to search for properties.

### Example
```swift
// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))

// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing()
  .valueProvider(redValueProvider, for: fillKeypath)
```
```

--------------------------------

### Reading LottieAnimation Properties

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Read the value of a specific animation property at a given frame time using a keypath.

```APIDOC
## Reading LottieAnimation Properties

### Description
Read the value of a specific animation property at a given frame time using a keypath. Only supported by the Main Thread rendering engine. Returns nil if no property is found.

### Methods
#### `getValue(for keypath: AnimationKeypath, atFrame: AnimationFrameTime?) -> Any?`
- **Description**: Reads the value of a property specified by the Keypath.
- **Receiver**: `LottieAnimationView`
- **Parameters**:
  - **for**: The keypath used to search for the property.
  - **atFrame**: The Frame Time of the value to query. If nil then the current frame is used.
- **Returns**: `Any?`

### Example
```swift
// A keypath that finds the Position of `Group 1` in `Layer 1`
let fillKeypath = AnimationKeypath(keypath: "Layer 1.Group 1.Transform.Position")
let position = animationView.getValue(for: fillKeypath, atFrame: nil)
// Returns Vector(10, 10, 0) for currentFrame. 
```
```

--------------------------------

### Basic Lottie Animation in React Native

Source: https://github.com/airbnb/lottie/blob/master/react-native.md

Use this snippet for a declarative way to display Lottie animations. Ensure the animation JSON file is correctly imported.

```jsx
import React from "react";
import LottieView from "lottie-react-native";

export default function Animation() {
  return (
    <LottieView
      source={require("../path/to/animation.json")}
      style={{width: "100%", height: "100%"}}
      autoPlay
      loop
    />
  );
}
```

--------------------------------

### Load Animation with Renderer Settings

Source: https://github.com/airbnb/lottie/blob/master/web.md

Use this configuration to load an animation, specifying an existing canvas element and custom renderer settings. Ensure you handle canvas clearing after each frame.

```javascript
lottie.loadAnimation({
  container: element, // the dom element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  rendererSettings: {
    context: canvasContext, // the canvas context
    scaleMode: 'noScale',
    clearCanvas: false,
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
  }
});
```

--------------------------------

### Load and Play Animation

Source: https://github.com/airbnb/lottie/blob/master/web.md

Use the bodymovin.loadAnimation function to load and play a Lottie animation. Specify the container element, animation path, and renderer. Loop and autoplay are optional.

```javascript
var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})
```

--------------------------------

### Resolve KeyPaths to Discover Animation Structure

Source: https://github.com/airbnb/lottie/blob/master/android.md

Use `resolveKeyPath()` with a wildcard KeyPath to discover the structure of your animation. This method returns a list of resolved KeyPaths, each pointing to a single piece of content within the animation, useful for understanding and targeting specific elements for dynamic updates.

```java
List<KeyPath> keypaths = lottieDrawable.resolveKeyPath(new KeyPath("**"));
```

--------------------------------

### Set Dynamic Animation Properties

Source: https://github.com/airbnb/lottie/blob/master/ios.md

Sets a ValueProvider for a specified keypath, allowing dynamic modification of animation properties at runtime. This affects all properties matching the keypath.

```swift
LottieAnimationView.setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath)
```

```swift
/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))

/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)

// SwiftUI LottieView API
LottieView(animation: myAnimation)
  .playing()
  .valueProvider(redValueProvider, for: fillKeypath)
```