iOS Animations: UIView (Part 1)

You are looking to add some polish to your app? The UX team reached out and wants to animate the UI? Don’t worry, UIView comes with easy and diverse animations so you can wow your users and the design team.

Let’s explore UIViewAnimation possibilities!

UIView.animate, which has been available since iOS 4, now has the benefit of support for spring damping and velocity; this support was added in iOS 7. Because the majority of the apps are only supporting the last two iOS versions we can safely assume that iOS 7 is a low enough target version.

Let’s give it a try and animate a simple view:

UIView.animate with a custom duration

There are different ways to create this animation. You can change its frame, constraints, etc… But for the sake of simplicity, we will use CGAffineTransform in this experiment. The property transform of type CGAffineTransform on UIView applies a transformation layer to potentially modify its aspect.

CGAffineTransform(scaleX: 0, y: 0) returns an affine transformation matrix constructed from scaling values. X and Y are respectively the horizontal and vertical scales at the beginning of the transformation. Setting those two to 0 will result in the equivalent of CGSize.zero.
CGAffineTransformIdentity is the equivalent of neutral transformation matrix or in terms of scales: CGAffineTransform(scaleX: 1, y: 1). it will cancel the initial transform matrix.

UIView.animate parameters

• duration: a TimeInterval value (typealias for Double) that refers to the animation duration in seconds.
• delay: the delay in seconds (TimeInterval as well) before the animation starts. If you want to start the animation immediately you can omit this parameter (only in certain cases) or set it to 0.
• dampingRatio (usingSpringWithDamping): the oscillation when your animation approaches the end (CGFloat). Ranges from 0 to 1, where 0 is the maximum damping amplitude.

damping ratio of 0.4

• velocity (initialSpringVelocity): the initial spring velocity (CGFloat). In our case, the base traveling distance is 100 as we go from 0 to 100 (view full size). If the velocity is set to 1 the total animation distance travelled in one second will be 1 x 100 = 100 pts. If you want ta slower initial velocity set it in between 0 and 1 : 0.5 x 100 = 50pts.
• options: the animation curve option out of theUIView.AnimationOptions struct. I won’t go into full details about all options but Robert Gummesson wrote a cool piece about curves (still relevant in 2018/19). Or check the official doc about animation options. Here are a couple of examples :

Linear option

Curve Ease In Out option

Auto Reverse option

• completion: an optional block to be executed at the end of the animation((Bool) -> Void)?) . The boolean indicates if the animations finished before the completion was called. That could happen if the animation had no effect: in our case, it would happen if we set myView.transform to CGAffineTransform(scaleX: 1, y: 1) initially. I recommended guarding against this case if you intended to chain animations :

Animation chaining

Where to go from here?

Now that we covered the simple use cases, we can mix the type of transformation/animation, play with the spring ratio and velocity and add some animation chaining to come up with a usable component 🎉:

This animation is the result of the following combination :

• Changing the top constraint constant of the notification view
• Delay the next animation by 2 seconds
• Changing the leading constraint constant of the notification view and setting its alpha property to 0

Now you are ready to take on any simple animation implementation! Part 2 is out and focuses on CoreAnimation usage for advanced animations.

Please let me know below what animations you created and thanks for reading this piece 🖖🏼.

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >