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.3.3
LottieUI is a SwiftUI wrapper for Lottie Animations for iOS
⭐️ 84
πŸ•“ 1 year ago
iOS macOS
.package(url: "https://github.com/tfmart/LottieUI.git", from: "v1.3.3")

LottieUI

LottieUI runing on both iOS and macOS

LottieUI allows you to use delightful Lottie animations with SwiftUI without having to give up on the familiar declarative API or the powerful customization settings from the animation framework

β˜‘οΈ Requirements

  • iOS 13.0 or later
  • macOS Catalina 10.15 or later NEW (Requires LottieUI 1.1 or later)

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

To display an animation from a local Lottie JSON file, use the LottieView component:

LottieView("MyAnimation")

If your JSON is stored on another bundle outside your project's, you can specify the Bundle to load the animation from or provide a file path where the animation file is located:

// 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")

πŸ›° Remote animations

For remote animations, LottieUI provides AsyncLottieView, which attemps to download an animation from a remote URL and present it if successful. You can also provide views to be displayed while the donwload is in progress or if the download fails:

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

AsyncLottieView(url: url) { phase in
    switch phase {
    case .loading:
        ProgressView()
    case .error:
        ErrorView
    case .success(let lottieView):
        lottieView
    }
}

πŸš€ Features

LottieView allows you to take control of your animations with a set of modifiers that can be applied to a LottieView:

⏯ Playback

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

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

Playback modifier demo

πŸ” Loop Mode

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

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

Speed modifier demo

πŸ–Ό Current Frame and Progress

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

Warning To make use of the Frame/Progress observers, the animation must be using the .mainThread rendering engine. This can be set by using the .renderingEngine(_:) method

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

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

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

Progress Observer modifier demo

πŸƒ Speed

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

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

Speed modifier demo

Rendering Engine

LottieUI also supports the new RenderingEngine introduced in Lottie 3.4.0, which can greatly reduce CPU usage when displaying compatible animations

By default, LottieUI uses the .automatic, which will automatically apply the new rendering engine if an animation is compatible, but you can override it with the .renderingEngine(_:) modifier:

LottieView("MyAnimation")
    .renderingEngine(.coreAnimation)

Rendering Engine modifier demo

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(_:)
  • Set the value provider for a specific keypath of the animation with .valueProvider(_: keypath:)

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

πŸ›  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: 84
Last commit: 1 year ago
Advertisement: IndiePitcher.com - Cold Email Software for Startups

Dependencies

Related Packages

Release Notes

v1.3.3 - Progress/Frame observers for macOS
1 year ago

This new release finally enables to observe the progress or frame of a Lottie animation in real time for macOS apps! In order to do so, you can use the same .onFrame(_:) or .onProgress(_:) modifiers from the iOS counterpart.

However there's a caveat...

With the introduction of Lottie 4.0, the animation observers of LottieUI stopped working properly when rendering an animation with the new CoreAnimation setting, both for iOS and macOS. If you need to make use of the .onFrame(_:) or .onProgress(_:) modifiers, make sure that you're using the Main Thread rendering engine for now. You can set it by using the .renderingEngine(_:) method:

LottieView("my-animation")
    .renderingEngine(.mainThread) // setup the mainThread engine before observing progress/framerate
    .onFrame { _ in
        // ...
    }

Gravação de Tela 2023-02-16 às 20 59 24

I've created an issue #10 to keep track of any progress on getting the animation observer working on the new rendering engine.

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