doyeona
Published in

doyeona

Stunning Animation effects in iOS Apps [Lottie]

Make your app with wonderful animated effects to make your app live!

Hola! There are a bunch of animation libraries that are already provided. What we only have to do is to find the best animation that suits our app and to use it!

One of the animation libraries that i used is Lottie. Lottie is a mobile library for Android and iOS that natively renders vector based animations and art in real time with minimal code.

source: https://github.com/airbnb/lottie-ios

How to use Lottie for iOS?

Installing Lottie

For CocoaPods 👇🏻 refer to the steps below, and for Carthage or SPM click here to see more details on installing Lottie.

1️⃣ Add the pod to your Podfile

pod 'lottie-ios'

2️⃣ and then run

pod install

3️⃣ when you finally see these files, open your project with .xcworkspace

Use it in real coding

1️⃣ go to lottie files to search and download the animation

2️⃣ download it as JSON file

3️⃣ open your xcode, and add a file to your workspace.

4️⃣ import Lottie and create animationView

import UIKit
import CoreData
import Lottie
class TodoViewController: UIViewController {
let animationView = AnimationView()
override func viewDidLoad() {
super.viewDidLoad()
}
}

5️⃣ create method

func setupAnimation(){
animationView.animation = Animation.named("32585-fireworks-display")
animationView.frame = view.bounds
animationView.backgroundColor = .clear
animationView.contentMode = .scaleAspectFit
//animationView.loopMode = .loop
animationView.isUserInteractionEnabled = false
animationView.frame = CGRect(x: 50, y: 80, width: 150, height: 150)
view.addSubview(animationView)
animationView.play()
}

❗️ animationView.animation = Animation.name(“JSON file name”): the JSON filename downloaded from lottie.

❗️animationView.loopMode = .loop : it will play the animation continuously.

❗️ animationView.isUserInterationEnabled = false: the default is true, which means when there’s animation, we won’t be able to get users interaction. To avoid this, set animation’s userInteractionEnabled to false to get userInteraction from another View.

❗️ animationView.frame = CGRect(x:,y:,width:,height:): set up the location of the animation will appear.

❗️ view.addSubview(animationView): add animationView as subView

❗️ animationView.play: play() animation.

// Play the animation
animationView.play()

// Stop the animation
animationView.stop()

// Pause the animation
animationView.pause()

[option]❗ animationView.animationSpeed = 2.0 : to make the animation speed slow or fast.

6️⃣ Don’t forget to call method

setupAnimation()

Then you’ll see cute simple animation on your app! Thanks for reading

References :

--

--

--

Daily study logs about iOS development will be updated. Any recommendations or discussions are always welcome

Recommended from Medium

3 Approaches to Applying Blur Effects in iOS

Blurry rainy window

How to handle UIScrollView in Swift

Simple Todo app, EverydayTodo in Swift

Localizations in Swift

Wireframing Paypal Bigad Elsherif

Why Jetpack data store?

CAGradientLayer Swift

iOS Managing & Handling the Keyboard

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Doyeon

Doyeon

Hey! I am currently studying iOS by myself, and wanna be a cool app developer 🕶 please correct me if i’m wrong or if there’s any thing that you wanna share😊✌️

More from Medium

Is Swift the Objective Choice now?

What is the difference between Struct and Class?

Change app icon dynamically

What is CollectionView ?