The Illusion of Movement

To begin, be sure you already have a local copy of the Animation project. If needed, you can refer to instructions on how to clone a repository.

Open the Project Navigator using the Command-1 keyboard shortcut. We are going to focus on the contents of the Animation folder. Let's expand that folder now.

Begin by reviewing the Sketch.swift file. This file contains a definition of the Sketch class. The Animation project uses an instance of the Sketch class to drive animations.

The Sketch class defines a single property named currentDrawing.

On line 11, the currentDrawing property is populated with an instance of the BasicSketch class.

All of this is to say: it's the BasicSketch.swift file where there are interesting things happening. Let's see what that sketch looks like. First, make sure that the Animation target is selected. Then press the Run button in the top left corner of the Xcode window.

The first time you build an animation, it may take up to a minute or so to appear. It runs faster the next time you build an animation. Soon enough you'll see a window appear, and a black circle moving across the screen, from the centre of the window to the right-hand edge.

How does that work? Let's dig in to the BasicSketch.swift file. Please open that file.

There are three things to understand about a class, right now. A class is a way of grouping related bits of information we need to keep track of – properties – together with behaviours that we want to occur – these behaviours are defined in methods.

Every class contains three primary sections, usually in this order:

1. properties
2. an initializer
3. methods

For an animation to occur, the class must additionally conform to the Sketchable protocol. This creates two additional rules that a class must then obey:

1. a property of type Canvas named canvas must exist
2. a method named draw must exist

We can see here that the BasicSketch class obeys the rules of, or conforms to, the Sketchable protocol.

So how does the animation actually occur? Have you ever seen a physical flipbook animation?

That's exactly what is happening here. To make an animation, the Animation project uses the logic we program into a class that conforms to the Sketchable protocol.

About sixty times a second, the draw method is invoked. If the draw method changes what appears on the canvas, you get the effect of an animation.

Let's slow this down. Add the following code below line 28:

// Slow down the animation
canvas.framesPerSecond = 10

Run the program again. Notice how the animation is slower now?

Let's make one more change. Adjust the code on line 39 from this:

x += 1

... to read like this instead (note that the operator has changed):

x -= 1

Run the animation again. What's changed?

Finally, change that same line of code to read:

x -= 0

What do you think will happen when you run the animation this time?

That's enough for now. If you have questions about what you've seen here, and you're in class right now, please call me over to chat.

In the next tutorial, learn how to create a new animation.