Published on December 7, 2023
Before diving into using Lottie animations in watchOS, let’s explore what watchOS is and how it can benefit you.
What is watchOS?
On 24th April 2015, Apple Watch was released, and with that came watchOS. Basically, watchOS is the operating system of the Apple Watch, which happens to be the only device that runs it. It was developed by Apple Inc. And just like how all-things-Apple is based on iOS, which is the operating system used by the iPhone and iPod Touch, watchOS is also built using it.
Why Lottie for watchOS?
Because Lottie animations are compatible across a myriad of platforms and every animator can be at ease knowing that their quality won’t be ruined because of its minimal size and light-weightiness.
Taking off with one bad news and good one
So, let’s get the bad news on the table first. Lottie Library by Airbnb does not support watchOS. All because watchOS requires CoreGraphics to render the animations. The framework, however, is not part of the watchOS bundle.
Now, now, don’t get so downtrodden.
We’ve got some good news too.
An alternative for the unsupportable framework.
What you need to do is to create a new Xcode project for watchOS. Be it a Standalone app or an extension of your iOS app, you’re free to decide how you want to do it.
After the project is created, you need to close it and hover over to the terminal, where you would need to navigate to the root folder of the project. Later on, you initiate CocoaPods for your newly created project with the following code: pod init
Afterward, using your editor of choice, you need to open the Podfile. In this segment, you are going to add the necessary pods in order to target the watchOS extension target.
After you’re all done and dusted with installing the dependencies, you need to open your project using the xcworkspace file. This stage requires you to ensure everything is in order. You can ascertain this by building the project using CMD+B.
Although there might repercussions while compiling the pods such as the one shown below.
In case you find yourself in this unwelcomed scenario, you’re required to simply navigate to rlottie_capi.h file and replace the following line.
Implementing on watchOS with Storyboards
Now that you’re all set with the codes and have encountered any complications that can come by, you may allow yourself a bit of fun.
You can begin by opening the storyboard, introducing an Interfemale, and linking it with your Interface Controller class.
Moving forward, you need to navigate to Interface Controller. swift and initiate importing SDWebImage Lottie Coder.
We’ve now arrived at the stage where you can finally add your animation configuration.
The first and foremost step of this stage is to add all the supportable variables to keep your implementation in check. Add them immediately after the closure of the awake func.
