Crafting Delightful Animations in iOS 10

Beauty is more than skin deep. In fact, researchers have shown that dynamic qualities — the way someone moves, talks and shows emotion — work together with purely physical qualities — things like body shape and eye color — to influence what we think is beautiful.

The same is true for mobile design. Beauty for a mobile application means not only remarkable style and detailed visual design, but also compelling transitions, unique user interfaces, and stunning effects.

Beauty, by design

At Handsome, we create beautiful digital experiences that drive successful businesses. And beautiful, engaging animations are an essential part of our process (check out our dribbble page for some examples).

Animations realized in bthere

The powerful animation SDK of the iOS platform lets us create incredible animations on different levels. We use many types of animation in our work: view property, spring, transition, as well as extremely powerful 3D and particle animations.

At the WWDC 2016, Apple announced its iOS 10 Animation API, which revamps animations in a pretty amazing way by giving much more granular control over UI transformations. Here are some of the major updates that became available for developers to utilize:

1. Timing functions. iOS developers were looking forward to this feature for a while, since implementation of custom-easing functions was not obvious and quite difficult before. Now it’s a piece of cake to create, use and reuse desired timing curves.
2. Control over the animation object. Now developers can stop, pause, resume or change direction of an existing animation block. It’s possible to add a complete action to an object, even after the animation starts.
3. Modifying an animation on the fly. The new SDK provides a lot of possibilities to update animation parameters dynamically. For example, a developer can add new animation blocks to a partially complete animation or modify its timing and duration.
4. Transition animation features. Now it’s easy and steady to implement interactive transition animations using interruptible animator.

It didn’t take us long to try the new SDK features and create several advanced animations with it:

Here are some of the things that you’ll find in our publicly shared repository:

1. Animating objects using custom timing functions:

• Cubic Bézier curves;
• New Spring Timing Parameters that allow manipulating the mass, stiffness, damping, and initial velocity parameters to mimic behavior of a real-world spring;

2. Adding new animation blocks to existing objects on the fly;

3. Adding completion actions on the fly;

4. Animating by creating one long, smooth sequence of a series of separate animations.

View on Github

The new framework is handy and powerful. Animation objects can be used repeatedly, as developers can add actual animation blocks and update completion actions. As a result, there is no need to create a lot of repetitive animations, which makes the code clear and readable.

Gracefull fallback

Keep in mind, just like any new API in iOS, these new animation features don’t have backward compatibility. Make sure to use #available operator to create a fallback solution.

These new technologies let us create animations in a new exciting way, and delight users with beauty that is more than just skin deep!

Originally published at handsome.is on April 25, 2017.