Lab 4 Animations

Core Reading

• Animation
• Gestures
  • Using Gesture Recognizers
  • Moving and Transforming Views with Gestures
  • Gesture Recognizer Overview

Why Animation?

Open up an app and you are likely to see an animation either in the launch screen or when you swipe to refresh. Using animations in key areas like fetching data tells the user that things are happening therefore encouraging the user to wait. It also generally makes your app look professional. In the past, it took graphic designer skills to create animations and while that is still true for custom animations we now have a tool called Lottie that allows us to use professional animations in our apps.

Here is a link with some examples of loading animations

Lottie

• Lottie iOS Documentation
• Lottie Github
• Lottie tutorial

1. Install Lottie

pod 'lottie-ios'
pod install

For every file you use Lottie

import Lottie

2. Find the animation you want

• Once you have selected the animation that you want download it and drag it into your project.

Note Download the animation as JSON file and drag them and drop them into your project.
I chose a food carousel animation that went well with the theme of yelp

3. Calling the Animation

Reference the documentation Documentation

To call the animation in General

 // create a AnimationView
 var animationView: AnimationView?
 
 override func viewDidLoad() {
 	super.viewDidLoad()
	animationView = .init(name: "animationName")
	animationView?.frame = view.bounds
	animationView?.play()
 }

For this lab we are going to create a global variable so we can call the animation

var animationView: AnimationView?

Because we will want to call animations multiple times during the program lets write a function called Start animation

What this function needs to do:

1. Set the size of the frame
2. Set the animation loop
3. Set the animation speed
4. Start the animation

We also need a stop function that needs:

1. Stop the animation
2. Remove the animation overlay

Not working? Did you call your start and stop functions?
Still not working? Think about adding a time delay to your stop function

 

You can resize you animation any way you want take some time to play around with it

You have completed this lab if you want to add extra style try adding in a Skeleton View view and a pull to refresh

---

Bonus: Skeleton View

Want to take your app to the next Level?

Skeleton View is a way to show the users that your page is loading and are fetching the data. We will implement one to display while the animation is playing.

• Here is the Documentation
• Using a Skeleton View in a UITableView: Link
• Another Guide on how to use a Skeleton View: Link

1. Instal and import Skeleton View

pod 'SkeletonView'
pod install
//For files that you want to use SkelitonView:
import SkeletonView

2. Call SkeletonView

In general you will use:

// This shows a Solid
SkeletonViewview.showSkeleton()
//Hide 
view.hideSkeleton()

Since we are working with table views we need to call the SkeletonTableViewDataSource instead of UITableViewDelegate, UITableViewDataSource and add in a function called collectionSkelitionView

Note: because we removed UITableViewDelegate from our extension RestaurantsViewController we need to add UITableViewDelegate to our class UITableViewDelegate

Now that we have our TableView set we need to call the Skeleton View in our startAnimations function and hide it in the stop Animations function

3. Set the view to Skeletonable

The last step is to go into each view and set the elements to skeletonable = on

4. Making sure the SkeletonView is called in the tableView Cell

Now that we have turned everything on let's make sure the tableView is set to show the SkeletonView. Currently, it is only being applied outside the tableView ie. the search-bar.

to do this create a global var refresh. This will be used to determine when the tableView is being refreshed.

var refresh = true

Next inside the tableView function we will add an if statement that that will

Finally we need to set refresh to false at the end of the stopAnimations function.

refresh = false

You have completed THE SkeletonView

4. Clean Up

Now we have finished our code is a little sloppy and if we want to include a pull to refresh or call the animations in different parts of the program its best to refactor out code to separate the SkeletonView from the tableView to do this we will recreate a RestaurantsViewController class with a UITableViewDelegate, and a UITableViewDataSource. once we do that we will copy all of the table view functions into it.

Finally don't forget to remove the UITableViewDataSource from our RestaurantsViewController class

Resources

Here are some helpful resources

• Documentation
• Hacking with Swift
• Medium Article 1
• Medium Article 2
• Cocoapods Article

---

Bonus: Pull To Refresh:

Now that we have done some animations our users may want to get updates data. Previously we only have the data refreshing on the startup.

UIRefreshControl Guide

Hint

Twitter part 2 goes over pull to refresh

Bonus: Launch Screen?

In iOS we cant add lottie to the launch screen storyboard but there is a tool called Flow that allows us to edit and insert animations into the launch screen

Flow
Flow tutorial