Defining an Animation

Before following this tutorial, be sure you've created a new animation file to work within.

Drawing on the Canvas

Say that we want a square to appear on the canvas of this animation.

Anything we want to be animated must be specified in the draw function.

Add this code at line 30:

// Draw a square in the middle of the canvas
canvas.drawRectangle(at: Point(x: 250, y: 250), width: 50, height: 50, anchoredBy: .centre)

Run the animation. It appears to be static – the square does not move.

Remember, though – what's actually happening is that a new square is being drawn about sixty times per second over the prior square.

It's just that right now, the square is always drawn in the same position.

Defining a Property

Let's add a property. After line 17, add this property:

// Vertical position
var y = 250

The scope of this property is the entire MovingSquare class – we can change it's value anywhere inside the class.

Adjust the line of code that draws the rectangle, so that the point the square is drawn at is no longer:

Point(x: 250, y: 250)

... but is instead:

Point(x: 250, y: y)

Now run the animation. What's changed?

Nothing – the y property is initialized at 250, and never changes.

Changing a Property to Drive the Animation

Add the following line of code above the line where the square is drawn, inside the draw method:

// Change the vertical position
y += 1

Now run the animation. Why does the square move?

Remember, the draw function is automatically run about sixty times per second by the Animation project.

Since we are changing the y property (adding 1 to its value each time), and the square is drawn using that property, the square moves.

If you're still not quite sure what's going on, add this line of code inside the draw function:

print("The y position is: \(y)")