Master UIView Animation
Making things look nice in Swift’s UIKit
Animation is one of those potential blind spots for iOS developers, and is one I’ve touched on before. However, there is plenty of fun to have here, so get started with this article!
Difficulty: Beginner | Easy | Normal | Challenging
- You can use a Single View Application or Playgrounds application showing the view controller. In either case Auto Layout is a big part of this. Tutorials? Playgrounds with the UI and Single View Application and Auto Layout.
UIView: An object that manages the content for a rectangular area on the screen
I’ve used Playgrounds with the UI to create a UIViewController that will hold my animations. What will they look like? Here is the finished product (shudder).
Where should animations take place? The most canonical, sensible answer is within your
viewDidAppear(_:) since the frames of the subview are set, and you don’t want your nice animation to take place where and when the user can’t see it (do you?)
This gives us the following shell App
Remembering that the animation will be placed within the
A fading curtain: constraints
I wanted to create a subview that scrolls upwards in a nice animation before the rest of the App starts. The result looks something like the following:
This involves setting up the following within the view controllers
This is fully explained in my previous article — the difference here is that we are also animating the alpha to make the view appear to disappear.
animateWithDuration:animations:completion: is used to animate the change in alpha, the change in constraint and then force the view to update immediately (coverView is a subview so will be updated when view is updated),
The view would still be there, but not be visible. This means that it would be a good idea for us to remove the view from the screen. Luckily by definition
animateWithDuration:animations:completion: has a completion handler; what a great place to get rid of that pesky view!
The underscored variable is a boolean representing a Bool if the animation is complete — in this case I’m going to remove the view from the superview whether or not the animation is truly finished when the closure is called.
Moving objects with animations is going to use the same
animateWithDuration:animations:completion: method as shown above.
With the center property of a UIView
Moving objects with the center property is a relatively easy one.
With the following code:
Where moveCenter is a UIView that has been added to the superview. I’ve called this after the previous animations, see the Playground at the bottom of this article for more information.
This is similar to the curtains example above, but can be used with any object at all. So let us move a simple UIView box doing the same thing!
This is performed with the following code:
Objects can be transformed and animated, and even multiple animations can be combined together!
Let us try this for a nice little
UIView, powered by the following code:
There are a few parameters we can use with an animation through
delay: The time before an animation starts
usingSpringWithDamping: The higher the value, the more springing is damped
initialSpringVelocity: The initial velocity
The code? Oh yes:
Those who have skipped ahead to the full code at the end of this article will already know: There is a problem here.
Chaining animations with completion handlers is…
With completion handlers
…Ok for a couple of animations
But what if we went ahead and had some animations within animations?
This is…well. Not great.
I have made a full guide on Keyframes, so to cut this story a little shorter I’ll place a little solution for this The functions are not used in some cases as they call
The full code
This solution uses
UIView.animate but feel free to use the Gist and copy-paste the keyframes solution from above.
Making your Apps better by using little flourishes give your customer a delightful experience. Animation can do just that, and although it make take a little effort to implement. If you want to get in touch, hit me up on Twitter.