Shut up and take my money!

Animaciones suaves y customizadas en iOS

Lo sentimos, este post sólo está disponible en inglés.

Animations are cool. They add some magic to our app, and sometimes make it viral. But they also add functional features. Few weeks ago I read an article on medium by Pasquale D’Silva where he explains the important of making transitional interfaces. He defends that animations help the user to contextualize their actions, they offer a visual path from the initial state to the finish state, which helps to understand what its happening in the app. In this post, I will explain how to make a custom animations with CoreAnimation framework in iOS and how to make it smooth.

Custom animation with bezier curve

Working with CoreAnimation

In this section we will learn how to define a basic custom animation and apply it to a UIView Layer.

The CABasicAnimations, as inherits from CAPropertyAnimations, is a kind of animations that is applied directly to a CALayer, working directly on its properties. In order to use it we must add QuartzCore framework to our project and link it on the .h/.m files where we will make the custom animations.

The value that will be changed on the custom animation must be specified on the declaration function. You can view a list of animatable properties on Core Animation Programming Guide. We can set some animation properties as repeatability, duration and many others.

Once we have set our animation we can make it doing its magic by adding it on a view’s layer. As you can see we can add it with a name, this is for labeling purposes. If we want to stop or control the animation in a future state we could access it via this name.

Linear custom animation demonstration

Making it smooth

Cool. But you said smooth on the title. Bring back my money! Of course, with this we created a basic linear animation. I will introduce you the timing function in animations. As we said, an animation is a change in a layer property from state A to B. But there is another thing to take in account, is the duration, it defines the time that the property can take to variate betweet this two states. By default, all animations have a linear function, what defines that the property changes continuosly at same speed across this time.

There are many timing functions declared on CoreAnimation framework as ease in, ease out or both. This timing functions describe a movement similar to accelerating or decelerating. For example. Ease in makes the object to accelerate slowly at the start of animation, maintaining the rest of the animation linearly.

To apply this on our animation we only have to add this line before adding it to the layer.

Ease in out custom animation demonstration

Pimp my curve! — Custom animations with timing functions

Shut up and take my money!

Not yet. There is another trick we can do to make our animations do the magic: we can define a custom timing function.

In CoreAnimations, curves are defined as Bézier Curves. This curves are defined by two points in coordinate sytem, where the path is described by the tangent of a point travelling between this points. But its always better with a gif

Source — Wikipedia

You can use cubic-bezier tool to create get this points easily.

Once you designed your amazing animation, take the points coordinates and put it in the code this way:

Custom animation with bezier curve

And we’re done! We added some magic to our app!

No Comments

Post a Comment