Swiftpack.co - tfmart/LottieUI as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by tfmart.
tfmart/LottieUI v1.2
LottieUI is a SwiftUI wrapper for Lottie Animations for iOS
⭐️ 28
πŸ•“ 2 weeks ago
iOS
.package(url: "https://github.com/tfmart/LottieUI.git", from: "v1.2")

LottieUI

LottieUI allows you to use Lottie animations and all the advanced settings of Lottie's AnimationView, without having to give up on the declarative syntax of SwiftUI. Your Lottie animations will feel right at home alongside your SwiftUI views!

βœ… Requirements

Currently, LottieUI works only with iOS 13.0 or later.

πŸ§‘β€πŸ’» Usage

You can quickly present a local Lottie JSON file in your project with:

LottieView("MyAnimation")

πŸ›° Remote animations

To load an animation from a URL, LottieUI provides AsyncLottieView that will display the animation from the provided url and a placeholder view while the animation is downloaded

let url = URL(string: "https://assets3.lottiefiles.com/packages/lf20_hbdelex6.json")!

AsyncLottieView(url: url) { lottieView in
    lottieView
} placeholder: {
    ProgressView()
}

πŸ—‚ Local files

It's also possible to load Lottie files from another Bundle or from a specific file path:

// Loads an animation from the provided bundle
LottieView("MyAnimation", bundle: DesignSystem.Bundle.main)
// Loads an animation file from the provided path
LottieView(path: "/path/to/animation.json")

πŸš€ Features

⏯ Play and Stop

By default, your animation will start playing automatically. To control whether the animation should be playing, simply use the .play(_ isPlaying) modifier:

struct ContentView: View {
    @State var isPlaying: Bool = true
    
    var body: some View {
        LottieView("MyAnimation")
            .play(isPlaying)
    }
}

πŸ” Loop Mode

To setup a Loop Mode for your animation, use .loopMode(_ mode):

struct ContentView: View {
    var body: some View {
        LottieView("MyAnimation")
            .loopMode(.loop)
    }
}

πŸ–Ό Current Frame and Progress

To observe the current frame beign displayed in the animation and perform an action based on it, use .onFrame(_ completion:)

struct ContentView: View {
    var body: some View {
        LottieView("MyAnimation")
            .onFrame { _ in
                // Perform action based on current frame
            }
    }
}

To observe the progress instead, use .onProgress(_ completion:):

struct ContentView: View {
    var body: some View {
        LottieView("MyAnimation")
            .onProgress { _ in
                // Perform action based on current progress
            }
    }
}

πŸƒ Speed

To set the speed of an animation, use .speed(_ speed):

struct ContentView: View {
    var body: some View {
        LottieView("MyAnimation")
            .speed(2.0)
    }
}

There are many other options available such as:

  • Limit the framerate of an animation with .play(fromFrame: to:)
  • Define the background behavior of the animation with .backgroundBehavior(_ backgroundBehavior)
  • Set the value provider for a specific keypath of the animation with .valueProvider(_ valueProvider: keypath:)

For more information check the included documentation in each public component and modifiers

πŸ›  Installation

Swift Package Manager

In your project's Package.swift file, add LottieUI as a dependency:

.package(name: "LottieUI", url: "https://github.com/tfmart/LottieUI", from: "1.0.0")

GitHub

link
Stars: 28
Last commit: 2 weeks ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Dependencies

Related Packages

Release Notes

v1.2 - Rendering Engine Support
2 weeks ago

Thank you for your interest in LottieUI! This release include a new modifier for LottieView, which allows you to use the new Core Animation Rendering Engine introduced in Lottie 3.4.0 earlier this month.

By using this rendering engine, the CPU load from playing an animation can be greatly reduced, even if the animation is looping:

Gravação de Tela 2022-07-26 às 20 45 17

By default, LottieView will use the previous thread, as not all animations are compatible with this engine. To opt-in simply use the new .renderingEngine modifier on your view:

LottieView("Cactus")
    .renderingEngine(.coreAnimation)

You can read more about the new Core Animation animation rendering engine here

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics