The Illusion of Movement
12 October, 2020
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.
Sketch class defines a single property named
On line 11, the
currentDrawing property is populated with an instance of the
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:
- an initializer
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:
- a property of type
- a method named
We can see here that the
BasicSketch class obeys the rules of, or conforms to, the
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
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.