Adding animation to the iOS app is easier than ever!

Thursday, 13/06/2019

Tram Ho

Animation is an indispensable part of mobile application. Combining animation with user interface (UI) and user experience design (UX) is essential, as it plays an important role in improving how people respond to applications or websites.

We can create animations simply by changing the position or size of frames. But to create complex and eye-catching animations is not easy. In this article, I will tell everyone about a useful library for animation, Lottie

1. Introduce Lottie

This is a library that supports both Android and iOS, which is used to simply render animations and art vectors. Lottie loads and renders animations and vectors from the bodymovin JSON file, this type of file can be created by After Effects, Sketch, … This will become a link between the developer and the designer very helpful.

2. Create demo application

Prepare json file:

If you can’t create the Json file yourself, you can go to Lottie ‘s homepage to download the desired animation.

Select the desired animation -> copy the code -> save as .json

Create project:

Create a single app with Xcode

Then add the json file you just created above to your project.

Add libraries to the project:

Next you need to create Podfile and add lottie. In the project I added the SnapKit library to support constraint views

Initialize Lottie View:

Creating a swift file to initialize the lottie view, here will load the json file and add some config for the view

<span class="token keyword">import</span> <span class="token builtin">Lottie</span> <span class="token keyword">final</span> <span class="token keyword">class</span> <span class="token class-name">LottieNinjaView</span> <span class="token punctuation">:</span> <span class="token builtin">UIView</span> <span class="token punctuation">{</span> fileprivate <span class="token keyword">let</span> animationView <span class="token operator">=</span> <span class="token function">AnimationView</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">func</span> <span class="token function">configView</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> loadingAnimation <span class="token operator">=</span> <span class="token builtin">Animation</span> <span class="token punctuation">.</span> <span class="token function">named</span> <span class="token punctuation">(</span> <span class="token string">"ninja"</span> <span class="token punctuation">)</span> animationView <span class="token punctuation">.</span> animation <span class="token operator">=</span> loadingAnimation animationView <span class="token punctuation">.</span> contentMode <span class="token operator">=</span> <span class="token punctuation">.</span> scaleAspectFit animationView <span class="token punctuation">.</span> backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span> clear <span class="token keyword">self</span> <span class="token punctuation">.</span> backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span> clear <span class="token keyword">self</span> <span class="token punctuation">.</span> <span class="token function">addSubview</span> <span class="token punctuation">(</span> animationView <span class="token punctuation">)</span> <span class="token keyword">self</span> <span class="token punctuation">.</span> <span class="token function">bringSubviewToFront</span> <span class="token punctuation">(</span> animationView <span class="token punctuation">)</span> animationView <span class="token punctuation">.</span> frame <span class="token operator">=</span> <span class="token function">CGRect</span> <span class="token punctuation">(</span> x <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">,</span> y <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> height <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">)</span> animationView <span class="token punctuation">.</span> <span class="token function">play</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> animationView <span class="token punctuation">.</span> loopMode <span class="token operator">=</span> <span class="token punctuation">.</span> loop <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">startAnimating</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token builtin">DispatchQueue</span> <span class="token punctuation">.</span> main <span class="token punctuation">.</span> async <span class="token punctuation">{</span> <span class="token keyword">self</span> <span class="token punctuation">.</span> animationView <span class="token punctuation">.</span> <span class="token function">pause</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">self</span> <span class="token punctuation">.</span> animationView <span class="token punctuation">.</span> <span class="token function">play</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">stopAnimating</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token builtin">DispatchQueue</span> <span class="token punctuation">.</span> main <span class="token punctuation">.</span> async <span class="token punctuation">{</span> <span class="token keyword">self</span> <span class="token punctuation">.</span> animationView <span class="token punctuation">.</span> <span class="token function">pause</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

import Lottie final class LottieNinjaView : UIView { fileprivate let animationView = AnimationView ( ) func configView ( ) { let loadingAnimation = Animation . named ( "ninja" ) animationView . animation = loadingAnimation animationView . contentMode = . scaleAspectFit animationView . backgroundColor = . clear self . backgroundColor = . clear self . addSubview ( animationView ) self . bringSubviewToFront ( animationView ) animationView . frame = CGRect ( x : 0 , y : 0 , width : 200 , height : 200 ) animationView . play ( ) animationView . loopMode = . loop } func startAnimating ( ) { DispatchQueue . main . async { self . animationView . pause ( ) self . animationView . play ( ) } } func stopAnimating ( ) { DispatchQueue . main . async { self . animationView . pause ( ) } } }

Add view to Viewcontroller:

Next we return to the Viewcontroller file to initialize the object and add the supperView:

<span class="token keyword">import</span> <span class="token builtin">UIKit</span> <span class="token keyword">import</span> <span class="token builtin">Lottie</span> <span class="token keyword">import</span> <span class="token builtin">SnapKit</span> <span class="token keyword">class</span> <span class="token class-name">ViewController</span> <span class="token punctuation">:</span> <span class="token builtin">UIViewController</span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">viewDidLoad</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">viewDidLoad</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">let</span> ninjaView <span class="token operator">=</span> <span class="token function">LottieNinjaView</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> ninjaView <span class="token punctuation">.</span> <span class="token function">configView</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> view <span class="token punctuation">.</span> <span class="token function">addSubview</span> <span class="token punctuation">(</span> ninjaView <span class="token punctuation">)</span> ninjaView <span class="token punctuation">.</span> snp <span class="token punctuation">.</span> makeConstraints <span class="token punctuation">{</span> <span class="token punctuation">(</span> make <span class="token punctuation">)</span> <span class="token keyword">in</span> make <span class="token punctuation">.</span> centerY <span class="token punctuation">.</span> centerX <span class="token punctuation">.</span> <span class="token function">equalTo</span> <span class="token punctuation">(</span> view <span class="token punctuation">)</span> make <span class="token punctuation">.</span> width <span class="token punctuation">.</span> width <span class="token punctuation">.</span> <span class="token function">equalTo</span> <span class="token punctuation">(</span> <span class="token number">200</span> <span class="token punctuation">)</span> make <span class="token punctuation">.</span> width <span class="token punctuation">.</span> height <span class="token punctuation">.</span> <span class="token function">equalTo</span> <span class="token punctuation">(</span> <span class="token number">200</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

import UIKit import Lottie import SnapKit class ViewController : UIViewController { override func viewDidLoad ( ) { super . viewDidLoad ( ) let ninjaView = LottieNinjaView ( ) ninjaView . configView ( ) view . addSubview ( ninjaView ) ninjaView . snp . makeConstraints { ( make ) in make . centerY . centerX . equalTo ( view ) make . width . width . equalTo ( 200 ) make . width . height . equalTo ( 200 ) } } }

Result:

The results are as follows:

3. Conclusion

This is just a simple example of Lottie, and there are many other great things.

Find out more at: https://github.com/airbnb/lottie-ios

Share the news now

Source : Viblo