Animations as a part of your daily job

Good design is one of the most important things in mobile applications. It is very valuable for end users, defines how the application looks and feels like and defines how the application works.

However, nowadays it is not enough to only have good design in your applications for the perfect UX/UI. Nowadays we have to make one step forward and make animations a part of UX/UI. In my opinion, every mobile application should contain animations.

Why should we use animations?

Animation in mobile apps has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establishes a better recall in spatial relations. And… There is one more thing. Animation brings user interface to life and also makes users happy. :)

In this blog post I will show you three animations you can include in almost every application. Source code is available on github and is separated in the AFEA-StarterProject that does not include animations, and the AFEA-EndProject that includes animations.

On-boarding

On-boarding is a human resources term borrowed by UX designers as a way of getting someone “up and running” with a site, app or service. It is the process of increasing the likelihood that the first-time users will become full-time users when adopting your product.

No animation

In the iOS, on-boarding tour can easily be made by using theUIScrollView class and UIStackView. Each step in on-boarding is a full screen UIViewController (can also beonly UIView). It looks like this:

With real-time interactive animation

We distinguish real-time animations and non real-time animations. Real-time means that the user is directly interacting with the objects in the user interface. Non real-time means that the object behavior is post-interactive: it occurs after a user’s action and it is transitional. In the on-boarding tour we want to achieve real-time animation, i.e. have an animation while user slides through the tour.

In the iOS we can implement it again by using theUIScrollView and UIStackView, but this time we have to implement the UIScrollViewDelegatefunction scrollViewDidScroll(_ scrollView: UIScrollView). UIScrollView tells us the current offset. We can get current percentage using this code:

let firstPagePercentage = scrollView.contentOffset.x/scrollView.frame.width

Based on the percentage, we will animate our screens. For example, moving from step1 to step2, the percentage will go from 0 to 1 and we want to scale the first image to size (0,0). The code looks like this:

The whole animation code is in theOnboardingViewController, in thescrollViewDidScroll(_ scrollView: UIScrollView) function.

Pull to refresh

Pull-to-refresh is a touchscreen gesture which consists of touching the screen of a computing device with a finger or pressing a button on a pointing device, dragging the screen downward with a finger or a pointing device, and then releasing it as a signal to the application to refresh the contents of the screen.

Out of the box solution

In the iOS it is very easy to implement the pull to refresh gesture. There is a UIRefreshControlcomponent that is very easy to inject inside theUITableView or UICollectionView. A few lines of code and it looks like this.

Solution using a custom refresh view

To make a custom pull to refresh animation we have to create a custom view. Before we get into the implementation, we can divide pull to refresh into 3 steps:

1. pulling step: real-time animation that occurs while theuser is pulling UICollectionView or UITableView
2. waiting step: non real-time animation that is shown to the users while they are waiting, this is similar to thestartAnimating() function on theUIActivityIndicatorView class
3. ending animation: non real-time animation that starts when the waiting is finished, similar to thestopAnimating() function on theUIActivityIndicatorView class

The basic idea on how to implement this is to create a custom view and place it above theUICollectionView. Custom refresh view implementsthescrollViewDidScroll(_ scrollView: UIScrollView) so it knows how to position itself and make real-time interactive animation based on the users’ pull. So, the pulling step is implemented in the AFEA-EndProject in the scrollViewDidScroll(_ scrollView: UIScrollView) function in theRefreshView class.

Once the user pulls down the UICollectionView over some threshold, we are going into the waiting step. The waiting step is repeatable animation that lasts until some task is finished (e.g. API response). In the AFEA-EndProject it is implemented in thebeginRefreshing() function in theRefreshViewclass.

Once some asynchronous task is finished, by calling theendRefreshing() function on theRefreshView class, ending animation will start. It is a non real-time animation with a purpose of ending the refreshing and hiding the loading/waiting indicator.

List to details

Almost every application has a screen where the list is shown on the screen. Clicking the item on the list opens a new screen with item details.

Native iOS push transition

In the iOS pushing a new screen is made by calling thepushViewController(_ viewController: UIViewController, animated: Bool) function on the UINavigationController class. By calling this function we will get a transition like this.

Custom iOS push transition

In our application we do not want to make the standard transition. We want to make something better, something that will make our users happy.

Here, we want to make custom push transition. Again, to achieve this, we have to call thepushViewController(_ viewController: UIViewController, animated: Bool) function on theUINavigationController class, but this time we have to set the delegate property that implements theUINavigationControllerDelegate protocol on theUINavigationController class that will be responsible for navigation. Right now, the only function that has to be implemented is navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning?. By implementing this function we are returning the object that implements UIViewControllerAnimatedTransitioning protocol which is responsible for the transition. In short, the code for this looks something like this:

The whole code is written in the ListToDetailsSegue and animation looks like this:

Where to go from here?

• to become familiar with all kinds of animations, I recommend the iOS Animations by Tutorials book
• to be inspired, I recommend to check this site and follow the UI Interactions of the week
• include animations as a part of your every day job
• comment, share or write your own blog about animations and inspire the community

Thanks to Sinisa Cvahte for the design.

Thank you for reading. Please comment, like or share it with your friends and we hope to see you soon.

Would you like to join us? Check out the open positions at our Careers page.

Undabot and Trikoder are partner organisations. We analyze, strategize, design, code and develop native mobile apps and complex web systems.