A tutorial for using Lottie animation with watchOS in SwiftUI

Evandro Harrison Hoffmann

Last update: Sep 19, 2022

Related tags

SwiftUI App LottieTutorialWatchOS-SwiftUI

Overview

Lottie Tutorial for watchOS with SwiftUI

About

This example demonstrates the usage of Lottie animations for watchOS with SwiftUI.

Steps to add it to your project:

Add SwiftPackage: https://github.com/SDWebImage/SDWebImageLottieCoder
Import LottieViewModel (found in project files)
In your SwiftUI class, add as following:

struct ContentView: View {
    @ObservedObject var viewModel: LottieViewModel = .init()
    
    var body: some View {
        Image(uiImage: viewModel.image)
            .resizable()
            .scaledToFit()
            .onAppear {
                       self.viewModel.loadAnimation(url: URL(string: "https://assets8.lottiefiles.com/packages/lf20_Zz37yH.json")!)
                   }
    }
}

Requirements

Swift 5.0
watchOS 6.0+

Happy coding! 😀

You might also like...

SwiftUI iOS Widget and WatchOS app that randomly shows a word of the day with description and example.

Word Of The Day iOS Widget and WatchOS app made in SwiftUI that displays a random word of the day with description and example of usuage. Requirements

53 Nov 29, 2022

Pro Counter, SwiftUI WatchOS, Open Source Project

Countio | SwiftUI WatchOS App App Screenshots || What is Countio Countio is simple WatchOS App made with Swiftly SwiftUI. You can count anything quick

4 Feb 7, 2022

Control Room : a macOS app that lets you control the simulators for iOS, tvOS, and watchOS

Control Room is a macOS app that lets you control the simulators for iOS, tvOS, and watchOS – their UI appearance, status bar configuration, and more.

0 Nov 30, 2021

🍅Pomosh is your next awesome Pomodoro Technique assistant on 📱iOS and ⌚️ WatchOS 🙌.

🍅Pomosh is your next awesome Pomodoro Technique assistant on 📱iOS and ⌚️ WatchOS 🙌. It's native and lightweight. Uses SwiftUI. has a nice tomato icon and also ready for macOS too🔥

60 Dec 8, 2022

A simple SwiftUI Application to demonstrate creation of UI using SwiftUI.

WatchShop_UI A simple SwiftUI Application to demonstrate creation of UI using SwiftUI. How to run the project ? Fork the project. Run the project usin

12 Apr 15, 2022

Weather-swiftui - An example of using SwiftUI

weather-swiftui An example of using SwiftUI Installation Get openweather api key

0 Jan 1, 2022

SwiftUI-MSALSample - Sample project to login with MSAL using SwiftUI

SwiftUI-MSALSample I could not find a good walkthrough on how to implement MSAL

10 Nov 7, 2022

SwiftUI-Card - Simple card ui designed using SwiftUI

SwiftUI - Card Simple card ui designed using SwiftUI Preview

0 Feb 5, 2022

Github repo search with using mvvm-c and clean architecture and using combine swift

GitSearchWithMVVM-C-CleanArchitecture Github repo search with using mvvm-c and clean architecture and using combine swift. Content Overview How To Run

1 Mar 16, 2022

Comments

feat: loop prop and public methods

Adds loop prop so you can play the animation once or allow looping.
Move play/pause methods to public for more control of playback.

This allows the following behavior:

 Image(uiImage: self.lottie.image)
                        .resizable()
                        .scaledToFit()
                        .onAppear {
                            self.lottie.loop = false
                            self.lottie.loadAnimationFromFile(filename: "green-success")
                            
                            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                                self.lottie.play()
                                self.lottie.loop = true
                            }
                        }

So the animation plays once (since loop is false) then after a delay play() is called to start the animation again and loop = true to allow looping to occur.

opened by bradmartin 0

Owner

Evandro Harrison Hoffmann

iOS Wizard

GitHub

ScrumdingerTCA - Apple’s tutorial app recreated using The Composable Architecture

ScrumdingerTCA Apple’s tutorial app recreated using The Composable Architecture

9 Nov 29, 2022

In this tutorial, you’ll write your very first Core Data application with SwiftUI in Xcode

TodoApp-IOS In this tutorial, you’ll write your very first Core Data application with SwiftUI in Xcode. You’ll see how easy it is to get started with

1 Dec 13, 2021

DEVOTE In this SwiftUI tutorial, we will develop a task manager iOS application with Core Data integration.

DEVOTE In this SwiftUI tutorial, we will develop a task manager iOS application with Core Data integration. This is not a project with a boring user interface. This iOS and iPadOS application provides a personal touch and feel.

1 Dec 21, 2021

Tutorial GraphQL + Node Express + MySQL, and sample for Android / iOS client

GraphQL-tutorial Tutorial for GraphQL + Node Express + MySQL, and sample for Android / iOS client Blog NeoRoman's GraphQL-tutorial (Korean) Materials

4 Oct 20, 2022

Starter Project for YT tutorial

Hey there Foodee is an app for food lovers build in SwiftUI. The YT tutorials can be found on my channel. Figma and bonus video on my Patreon page. Ab

16 Dec 13, 2022

Coreml createml tutorial for you

https://www.youtube.com/watch?v=x9_BG2q7XYw&t=4258s // CreateML => Makes Model // CoreML => Consumes Model import CreateML import Foundation // Load

0 Dec 12, 2021

This is my copy of the "Ultimate Portfolio Project" tutorial series in Hacking with Swift+.

UltimatePortfolio This is my version of the "Ultimate Portfolio Project" tutorial series in Hacking with Swift+. I What have I learned in this series?

0 Jun 16, 2022

This To-Do app was developed using Swift and SwiftUI and works on iOS, MacOS (Apple Silicon) and WatchOS. The tasks are kept on storage even when the app is restarted.

ToDo-SwiftUI This app has a lot of sentimental value for me, given that it helped me a lot to understand the process of doing an iOS app and became th

6 Jul 12, 2022

Watchos-navlink-swiftui-bug - Example Project to demonstrate bug in SwiftUI when NavigationLink is activated inside a TabView

SwiftUI Bug using NavigationLink inside a TabView on watchOS 8.1+ When a Navigat

0 Jan 25, 2022

A SwiftUI app that reads iOS/watchOS/tvOS device model information from Xcode you select.

iVariant A SwiftUI app that reads iOS/watchOS/tvOS device model information from Xcode you select. Preview License iVariant is licensed under MIT. Cop

20 Aug 4, 2022