Skip to content

SwiftUI View to display a Lottie animation using a UIViewRepresentable to wrap the view and be able to use it in SwiftUI

License

Notifications You must be signed in to change notification settings

GeraDNG/LottieView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LottieView

SwiftPM Platform Swift Versions

About LottieView

This package contains the necessary to create a SwiftUI view in which an animation will be displayed with the help of the Lottie iOS library.

Example2

Requirements

Deployment target: iOS 13.

Installing LottieView

Swift Package Manager

To install LottieView using Swift Package Manager you can follow the tutorial published by Apple using the URL for the LottieView repo with the current version:

  1. In Xcode, select “File” → “Swift Packages” → “Add Package Dependency”.
  2. Enter https://github.com/GeraDNG/LottieView.

You can also add LottieView as a dependency to your Package.swift:

dependencies: [
  .package(url: "https://github.com/GeraDNG/LottieView", from: "1.0.0")
]

Usign LottieView

First, you need to download an animation. You can find a lot at: https://lottiefiles.com. After that, you need to add the file to your Xcode project. To display this animation in your SwiftUI view, you need to import this library, by adding:

import LottieView

An entity of type LottieData must be created, which contains the necessary configuration parameters, but only the file name is required. You can configure parameters like:

  • fileName: name of the file (Lottie animation).
  • speed: speed of the animation. Default value is 1.0.
  • loop: Defines animation loop behavior. Default value is .loop.
  • startProgress: The start progress of the animation. Default value is 0.0.
  • endProgress: The end progress of the animation. Default value is 1.0.
  • backgroundBehavior: Describes the behavior of an AnimationView when the app is moved to the background. Default value is .pauseAndRestore.
  • completion: An optional completion closure ((Bool) -> Void) to be called when the animation stops. Default is nil.

So, you can use something like this to display a Lottie animation in your SwiftUI view:

let lottieAnimation = LottieData(fileName: "animation.json")
LottieView(lottieData: lottieAnimation)

If you want to control more parameters, you can do it like this:

let lottieAnimation = LottieData(fileName: "animation.json", speed: 0.75, loop: .playOnce, startProgress: 0.1, endProgress: 0.9, backgroundBehavior: .continuePlaying, completion: { didAnimationCompletedPlaying in
    // TODO: write your code here
})
LottieView(lottieData: lottieAnimation)

Dependencies

These third-party SDK are used:

Data collection

The Lottie and LottieView SDK does not collect any data. We provide this notice to help you fill out App Privacy Details.

About

SwiftUI View to display a Lottie animation using a UIViewRepresentable to wrap the view and be able to use it in SwiftUI

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages