Then on the top right corner, navigate to Identity Inspector, change class to LottieAnimationView and set module to Lottie. In your Storyboard or Xib file, drag and drop a UIView to your ViewController, add the desired constraints and position as you like. Adding a Lottie animation view using Interface Builder You did it! Press CMD+R and here’s what you should see:Īt this point, I really encourage you to play around with different configurations. Start LottieAnimationView with animation name (without extension)ĪnimationView!.contentMode =. Private var animationView: LottieAnimationView? In the ViewController.swift file, replace the method viewDidLoad with the following: // 1. Once downloaded, drag and drop to the project, making sure our project is selected as target and copy items if needed is selected. Once you're confident your animation looks and plays how it should, download the Lottie file. To do this, make sure you download the LottieFiles app for iOS and scan the QR code that is generated at the bottom under any animation that is either uploaded to or tested on LottieFiles. You can choose from thousands of free animation on LottieFiles but for the purpose of this tutorial we'll be doing together, we’ll be using this animation to start with.Īs sometimes not all Lottie features are supported by iOS, it's super important to test that your chosen Lottie works on iOS. Great, now for the fun part! Let’s get animated!!! Now, navigate to ViewController.swift, add the following line to the top of the file. Tap on Add Package at the bottom right corner and select your project as target. So here's how to do it: with Xcode in focus, at the top navigation bar, select File->Add Packages…, then on the top, right tap on Search or Enter Package URL and enter the URL: Note that in the video version of this tutorial above, we've used CocoaPods – you can still can use CocoaPods if you prefer, but using SPM cuts out a bit of work. There are a few ways to add Lottie to our project, but in this tutorial, we'll use Swift Package Manager (SPM). Tap Next and Create.Īwesome, we have the project ready, now let's add the Lottie library. Add the name of the project, organization and identifier. Open Xcode, select "Create new Xcode project".Ok, I’m ready! How do I start?Īwesome, let’s start by opening Xcode and creating a new iOS project. And here’s what we are building together: What is Lottie?Ī Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. What we'll cover in this articleīy the end of this article, you will understand and be able to build your own iOS app with custom Lottie animations. It's time to sprinkle on some Lottie animations to your iOS apps.Īnd how can you do this I hear you ask? Well there are many ways of course, but the one that we're going to look at here is Lottie. It's time to sprinkle on those little bits that will give your app the edge and make your users cry with joy when they see it because it’s just so darn beautiful. If you're reading this, it means you're ready to add that bit of extra magic to your iOS apps.
0 Comments
Leave a Reply. |