# Lab 4 Animations

### Core Reading

:::warning

* [Animation](https://guides.codepath.org/ios/Animation)
* Gestures
* [Using Gesture Recognizers](https://guides.codepath.org/ios/Using-Gesture-Recognizers)
* [Moving and Transforming Views with Gestures](https://guides.codepath.org/ios/Moving-and-Transforming-Views-with-Gestures)
* [Gesture Recognizer Overview](https://developer.apple.com/library/ios/documentation/EventHandling/Conceptual/EventHandlingiPhoneOS/GestureRecognizer_basics/GestureRecognizer_basics.html)

:::

### 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](https://airbnb.io/lottie/#/) that allows us to use professional animations in our apps.

:::warning
Here is a [**link**](https://medium.com/flawless-app-stories/animations-in-ios-30-beautiful-examples-80cb2663c559) with some examples of loading animations
:::

### Lottie

:::warning

- Lottie iOS [Documentation ](http://airbnb.io/lottie/#/ios)
- Lottie [Github](https://github.com/airbnb/lottie-ios)
- Lottie[ tutorial](https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-ios-app-swift)

:::

<img src="https://imgur.com/LQnFAG1.gif" />

### 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.

:::info
***Note*** Download the animation as **JSON** file and drag them and drop them into your project.
*I chose a [**food carousel**](https://lottiefiles.com/4762-food-carousel) animation that went well with the theme of yelp*
:::

<img src="https://i.imgur.com/tS1JYOQ.png" />

### 3. Calling the Animation

:::warning
Reference the documentation [Documentation](https://airbnb.io/lottie/#/ios)
:::

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

<img src="https://imgur.com/UhxBkvm.png" />

<br><br>

**We also need a stop function that needs:**

1. Stop the animation
2. Remove the animation overlay

<img src="https://imgur.com/6aZ5sn6.png" />

<br><br>

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

<img src="https://imgur.com/z8lKxMu.gif" width=250>&nbsp;<img src="https://imgur.com/oAHqfin.gif" width=250>

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

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

---

## 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.

:::warning

* Here is the [Documentation](https://github.com/Juanpe/SkeletonView)
* Using a Skeleton View in a UITableView: [Link](https://medium.com/flawless-app-stories/skeletonview-animation-ade973655d03)
* Another Guide on how to use a Skeleton View: [Link](https://medium.com/the-aesthetic-programmer/facebook-loading-labels-animation-simple-approach-for-skeleton-view-in-swift-4-4fcdfeffd121)

:::

<img src="https://github.com/Juanpe/SkeletonView/blob/develop/Assets/tableview_scheme.png?raw=true" />

### 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

<img src="https://imgur.com/6WFYhUt.png" />

<br><br>

:::info
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

<img src='https://imgur.com/uhP6oVM.png' />

### 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

<img src='https://imgur.com/R4zmoRm.png'/>

<br><br>

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

refresh = false

:::success
:+1: :smile: You have completed THE SkeletonView :smiley: :+1:
:::

<img src='https://imgur.com/EJGYjhl.gif'/>

### 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.

<img src='https://imgur.com/QpYhFub.png'/>
<img src='https://imgur.com/WyUZpXe.png'/>

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

<img src='https://imgur.com/DTJI583.png'/>

### Resources :book:

:::warning
Here are some helpful resources

- [Documentation](https://github.com/Juanpe/SkeletonView)
- [Hacking with Swift](https://www.hackingwithswift.com/articles/40/skeletonview-makes-loading-content-beautiful)
- [Medium Article 1](https://medium.com/@osamakhan_92979/skeletonview-animation-in-swift-uitableview-d5508f2a736c)
- [Medium Article 2](https://medium.com/the-aesthetic-programmer/facebook-loading-labels-animation-simple-approach-for-skeleton-view-in-swift-4-4fcdfeffd121)
- [Cocoapods Article](https://cocoapods.org/pods/SkeletonView)

:::

---

## 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.

:::warning
[UIRefreshControl Guide](https://guides.codepath.org/ios/Using-UIRefreshControl)
:::

:::info
Hint :bulb: 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

:::warning
[Flow](https://createwithflow.com/)
[Flow tutorial](https://createwithflow.com/tutorials/launchAnimationStepByStep/)
:::