Thursday, October 6, 2022
HomeiOS DevelopmentUtilizing Lottie and SwiftUI to Create Superior Animations

Utilizing Lottie and SwiftUI to Create Superior Animations

[ad_1]

Just a few years in the past, I wrote a tutorial concerning the Lottie library. A reader requested if he might use the library in SwiftUI tasks. So, on this tutorial, let’s revisit this wonderful library and see how we are able to use it in SwiftUI tasks.

Lottie is a cell library for Android and iOS that natively renders vector based mostly animations and artwork in realtime with minimal code.

If that is the very first time you heard of Lottie, Lottie is an iOS, macOS, Android, and React Native library, developed by Airbnb, that renders After Results animations in any native apps. Animations are exported as JSON information by way of an open-source After Results extension known as Bodymovin. Lottie masses the animation information in JSON format, and renders the animation in actual time.

The cool factor about this library is you can import the Lottie animation immediately into your Xcode challenge. With a number of traces of code, you can also make the animation work in your apps. You’ll perceive what I imply shortly.

The place can you discover Lottie Animations?

You may create your personal animation utilizing After Results and export it as a JSON file. Nonetheless, if you’re like me and haven’t any concepts about After Results, you may try the next web sites to obtain some free / paid animations.

LottieFiles

swiftui-lottie-files

Web site: https://lottiefiles.com

Drawer

Drawer Design for Lottie Files

Web site: https://drawer.design

Including the Lottie Library with Swift Bundle Supervisor

Lottie is an open-sourced challenge out there on GitHub. You may obtain the library at https://github.com/airbnb/lottie-ios and add it to your Xcode challenge manually. Having that mentioned, the best means so as to add the library is through the use of Swift Bundle Supervisor.

Assuming you’ve already created a SwiftUI challenge in Xcode, go as much as the Xcode menu and select File > Add Packages…. Then paste the repository URL (i.e. https://github.com/airbnb/lottie-ios) within the URL subject:

Add Lottie package using Swift Package Manager

Click on the Add Bundle button. Xcode will then routinely obtain the Lottie library and add it to the challenge.

Lottie library in Xcode project

Importing Lottie Recordsdata to the Xcode Undertaking

I’ve downloaded the following free animation on LottieFiles.com. The Lottie animation is out there in a number of file codecs. Please select the Lottie JSON possibility.

Download animation from Lottie Files

As soon as downloaded, return to the Xcode challenge. Drag the JSON file (i.e. contact-us.json) to the challenge navigator.

JSON file

Utilizing the Lottie File in SwiftUI

It now involves the coding half. For those who’ve learn my earlier Lottie tutorial, it’s best to know that it takes lower than 10 traces of code to load the animation. Right here is the pattern code snippet for loading the Lottie animation:

Easy, proper? Nonetheless, because the Lottie library doesn’t help SwiftUI natively, we have to wrap its UIKit view with the UIViewRepresentable protocol to make it work in SwiftUI tasks.

Now head again to your Xcode challenge and create a brand new file utilizing the Swift file template. Title the file LottieView.swift and replace its content material like this:

The LottieView struct has a property for holding the identify of the lottie file. Within the makeUIView perform, it masses the JSON file and units the animation to the animation property of the animationView. Optionally, we set the content material mode to .scaleAspectFit.

To play the animation, we name the play technique of the animation view. The remainder of the code is for configuring the format constraints of the view.

Now let’s head again to ContentView.swift to make use of the LottieView. Within the physique half, insert the next traces of code:

You simply have to move LottieView the identify of the Lottie file with out the file extension. Right here, it’s contact-us. And, we set the body measurement to 300×300 factors.

That’s it! Within the preview pane, it’s best to see a picture. For those who click on the Play button, it renders the animation.

Previewing the animation

Customizing the Animation

Did you discover that the animation solely performed as soon as? The AnimationView object offers a few properties for builders to customise the playback of the animation. To maintain enjoying the animation, you may set the loopMode property to .loop like under:

If you wish to auto reverse the animation, you may set the worth to .autoReverse.

You may also management the velocity of the animation by altering the worth of the animationSpeed property:

This may triple the velocity of the animation.

Loading the Animation Remotely

It’s not necessary to retailer the Lottie file domestically. The Animation object enables you to load a Lottie animation from a distant server. Right here is an instance:

As a substitute of utilizing the named technique, you should use the loadedFrom technique of Animation to load a distant URL. The Animation object will deal with the file obtain and allow you to know when the animation is prepared to be used within the closure.

Loading remote animations using Lottie

Abstract

The SwiftUI framework already makes it simple to create wonderful view animations. With the Lottie library, it’s even simpler to include lovely animations in your apps. I hope you discover this tutorial useful. For those who’re inquisitive about studying extra about SwiftUI animations, you may try our Mastering SwiftUI ebook.



[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Categories

Most Popular

Follow Us

45FansLike
2,500FollowersFollow
105,000SubscribersSubscribe