Yalantis: iOS, Android And Web App Development Company

How We Developed ColorMatchTabs Animation for iOS

There are multiple ways to organize navigation in apps: tab bars, side menus, Tinder-like swipes between screens. An issue with most existing solutions, however, is that they are inconvenient for phones with large screens. Users have to constantly stretch their thumbs to the icon to go to the next screen.

We decided to share the user interface animation concept we created that solves this problem of in-app navigation on large screens.

animated user interface

[ColorMatchTab animation. See it on Dribbble and Github]

What’s the ColorMatchTab animation about?

This animation was developed to illustrate a concept we developed for a review app. The review app would show users interesting places around them and let them leave reviews and read reviews that were left by others. The animation shows four different categories – products, places, reviews, and friends – as four different screens.

We created this animation in Relativewave's Form, a great tool for creating native prototypes.

In our ColorMatchTabs animation we used a tab bar with colored icons to help users distinguish among different categories. Each icon, as well as each color, are unique to a particular category to avoid confusion. When a category item in the tab bar becomes active, it’s highlighted by a bevelled rectangle filled with the corresponding color, and text appears with the category title. This makes it very clear which tab is currently active.

Users have to see all screens as part of a whole, and each screen has to guide the user further through the app. Call-to-action buttons are easy to spot, and help users find their way around the app.

We used an FAB (Floating Action Button) to create a call-to-action that is difficult to miss. This button is centered on the bottom portion of the screen to be easily reachable, especially on devices with bigger screens.

After our designers created the concept, it was our developers’ turn to bring the animation to life.

As you can see below, we developed several animation components: a bottom bar, a top bar, pages with content, and transitions between screens. Each component had its own development challenges.  

Bottom Button

To implement the bottom button we had to adjust elements so they were equidistant from the center of the circle. Developers can change the radius of the circle according to their needs, thus adjusting the location of elements spread around the circle. You can also adjust the size and duration of the animation, and pick any images you like for the icons.

UI animation concept for review apps on iOS

Top Bar

A year ago Apple announced a new UI component called UIStackView (see the WWDC session and the Apple’s documentation). UIStackView allows you to create several elements without any constraints. You just set distribution mode and it works. Under the hood it’s based on auto layout. But what does it mean for you? It means that you don’t have to add constraints, but you can if needed. And UIStackView automatically adjusts the constraints if the view is hidden.

The implementation is very simple – we show various UIViews in UIStackView.

You probably noticed that the top menu is part of the navigation bar. There are several ways to implement a custom navigation bar. Apple has an excellent sample project showing how to create custom navigation bars (especially extended and custom navigation bars). We decided to use an extended navigation bar, but you can choose a custom navigation bar to provide more native behavior.

Pages with content

Pages are built with a UIScrollView with view controllers inside.

To detect the current index we use content offset. When a view appears for more than 50 percent of the screen, the index changes correctly. And then we observe a current content offset to detect changes.

To avoid blinking when we switch from the first to the fourth tab, we hide all content between the screen and then show all content again. This is part of the ColorMatchTabs animation. We don’t use UIPageViewController, which may seem like an obvious choice, because it doesn’t let us achieve the same smooth performance.

We also don’t reuse view controllers because the tab bar is not expected to have more than five screens (just like UITabBarController). This interface of this class is also similar to the tab bar controller – all you need to do is to set an array of view controllers.

UI animation concept for iOS review apps

Transition

By transition we mean switching between screens when a user presses the bottom button (the pink button).

The new screen appears from the center of the bottom button, gradually expanding until it replaces the previous screen. To implement this transition we used the CircleTransition class that implements UIViewControllerAnimatedTransitioning protocol.

The circle is implemented as a mask property of the CALayer class, which shows everything within the circle and hides everything beyond it. To get this effect we created two circles using two instances of UIBezierPath, one of a minimal size and the other large enough to cover the whole screen. We also created a new CAShapeLayer to present a circle mask. The final animation happens between these two trajectories.

The Controller has to be animated using UIViewControllerTransitioningDelegate protocol. The protocol accepts the controller ,which we have to show or hide, and requires us to return an object which implements UIViewControllerAnimatedTransition protocol.  

This transition has the following properties:

  • startPoint – a point where the animated appearance results in the disappearance of the screen. With our animation this point is in the center of the button.

  • duration – how long it lasts

  • mode – a list of possible modes of animation (.Hide and .Show)

Dropping items

Dropping items is probably the most interesting part of our ColorMatchTabs animation. We needed to be able to move icons from one element of the animation to the other. To do that we decided to use temporary icons. As soon as temporary icons reach their destination on the screen, we hide them and show the real icons that are present in components of the animation.

To make sure these icons are displayed correctly on different screen sizes we had to do the following:

  1. Display the temporary icons on top of the tab bar

  2. Hide tab bar icons

  3. Animate the transition of temporary icons on the main screen

  4. Display the temporary icons on the modal view controller

  5. Animate the transition of temporary icons on modal view controller

  6. Hide temporary icons on the modal view controller

MenuViewController

If you want to completely reuse the screen with all animations, you just have to set data source for the MenuViewController and display it. The data source allows you to customize view controller, title, colors, icons: 

public protocol ColorMatchTabsViewControllerDataSource: class {
    
    func numberOfItems(inController controller: ColorMatchTabsViewController) -> Int
    
    func tabsViewController(controller: ColorMatchTabsViewController, viewControllerAt index: Int) -> UIViewController
    
    func tabsViewController(controller: ColorMatchTabsViewController, titleAt index: Int) -> String
    func tabsViewController(controller: ColorMatchTabsViewController, iconAt index: Int) -> UIImage
    func tabsViewController(controller: ColorMatchTabsViewController, hightlightedIconAt index: Int) -> UIImage
    func tabsViewController(controller: ColorMatchTabsViewController, tintColorAt index: Int) -> UIColor

}

Also we provide an example app, so you can open it, run and learn how to integrate it in your app.

Conclusion

We hope that our implementation of this tab bar will be useful for you, especially seeing as it includes the popular swipe to move between screens. We divided the component’s description into several parts so that you can use it as separate elements or as a whole screen.

We would be delighted if you used some of our solutions in your mobile apps. We love sharing our experience, and are always happy to discuss our work. If you decide to implement our components in your app, don’t hesitate to contact us and we will add you to our readme file. If you happen to have any problems with our components, create an issue in the github repository and we will gladly help you out!

Check out this ColorMatchTabs animation on Dribbble and GitHub.

 
Insights

Concierge App Development: Delivering Human Experience

Tech

“Tree of Models” as an Alternative App Architecture Model

Design

How We Created Tab Bar Animation for iOS

Design

UIDynamics, UIKit or OpenGL? 3 Types of iOS Animations for the Star Wars

Design

Eat. Drink. Track. How We Created Eat Fit iOS Animation Inspired by Google Fit

Excited to create something outstanding?

We share the same interests.

Let's team up!