Basic UIView Animation Tutorial: Getting Started

Gratuitous Sound Effect

To round things out, you’ll add a satisfying bug-squashing sound effect. It’s completely unnecessary but totally fun! You’ll use the sound file already in the project to do this.

Back in ViewController.swift, add the following at the top of the file:

import AVFoundation

Next, add a property to the class declaration to hold an audio player instance with your sound file:

let squishPlayer: AVAudioPlayer

Now, add the following in init(coder:), before super.init(coder: aDecoder), so that your AVAudioPlayer instance is set up before you initialize the view controller. Swift requires this in order to satisfy its initialization rules.

let squishURL = Bundle.main.url(forResource: "squish", withExtension: "caf")!
squishPlayer = try! AVAudioPlayer(contentsOf: squishURL)
squishPlayer.prepareToPlay()

Finally, add the following line to handleTap() after you set isBugDead to true:

squishPlayer.play()

This plays the sound at just the right moment. And that’s it! Build and run your code. Crank up the volume, tap on that bug, and bask in satisfaction as your bug squishes in glorious, gratuitously stereophonic sound!

Where to Go From Here?

You can download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.

You can probably think of more animations to apply to this projec, based on what you’ve just learned. You might like to close the picnic basket after you’ve squashed the bug. Or you might prefer that the picnic basket doors and napkins don’t open once the app launches and open them instead with a tap. Give it a try!

Throughout this tutorial, you’ve used animate(withDuration:delay:options:animations:completion:). UIView animation also offers several more highly useful methods:

1. animate(withDuration:animations:)
2. animate(withDuration:animations:completion:)
3. animateKeyframes(withDuration:delay:options:animations:completion:)
4. performSystemAnimation(animation:onViews:options:animations:completion:)
5. animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion)

The first two methods in this list are siblings of the animation method you used in this tutorial, minus the delay and options parameters. The third method provides keyframe-based animation, giving you the ability to orchestrate highly complex animation sequences with fine-grained control. The fourth method runs system-provided animations. The last method creates an animation using a spring-based motion curve. In other words, the animated view bounces back and forth around its destination as if it’s on a spring.

If you’d like to take a deeper dive into the full power of iOS animations, you might enjoy iOS Animations by Tutorials.

How do you use UIView animation or Core Animation in your projects? I’d love to hear from you in the forum discussion below!