Adding the animating variables

As we have done before, we start off by adding the properties needed to keep track of the different parts we want to animate. In our case, we need three properties:

• One property for the girl image, aptly called girl
• One for the left leg, called leftLeg
• One for the right leg, called rightLeg

Even though we are using one image for both the right and left legs, we still need two separate leg properties for the animation to work because the legs will be moving at different times and speeds.

All of these properties will be State properties, so they will update the view instantly as their values change. Put the following code into the ContentView file, just above the body property:

    @State private var girl = false
    @State private var leftLeg = false
    @State private var rightLeg = false

As usual, all the properties are all set to false so the animation won’...