How to make your own animated Ring in Figma for watchOS applications — part 3/3

Part 3: Making an animation in a watchOS app

In the last section, we build the images that will be the basis of our animation (you can download them here).

Let’s start now for the code! 😎

To show the animation of the ring, I will create a very simple project of the watchKit app in XCode.

First, let’s add our rings to the project! Enter Assets.xcassets and drag the uncompressed folder with the images into the folder.

Notice that the rings occupy the three slots (1x, 2x and 3x) automatically.

Then, go to your Interface.storyboard, hold and drag an object of type “Group” to the Interface Controller. It will look like this for now:

Select the group and change its Background image to “ring0”.

Change its width and height to “Fixed”. Make sure both are 100 in size.

Finally, change the horizontal and vertical alignment to “center”. So far, our screen looks like this:

Let’s put a button in that group. The idea is that when you click on it, the ring animation starts.

Go to the Library. Select and drag an object of type “Button” and throw it within the group.

Change the horizontal and vertical alignment to “center”. Then change the width to “Fixed” with a size of 50 and change the height to “fixed” with a size of 25.

Finally, change the title button to “Ok”. Our screen is done!

Finally, let’s move on to some code! First, let’s create an outlet for the Group. With the "option" key pressed, click on InterfaceController.swift. Thus, we will have both screens open to create the necessary outlet.

You can delete the awake(), willActivate() and didDeactivate() methods. Create the outlet by pressing the “control” key and dragging it to InterfaceController.swift. Name the group as “groupRing”.

@IBOutlet weak var groupRing: WKInterfaceGroup!

Now, create an IBAction for the button. With “control” pressed, drag to InterfaceController.swift. Change the connection to “Action” and name it “startAnimationRing”.

Thus, we will have the IBAction empty.

@IBAction func startAnimationRing() {
}

Add the following commands into the startAnimationRing() function:

// 1
let range = NSRange(location: 0, length: 101)
// 2
let duration = 1.0
// 3
let repeatCount = 1
// 4
self.groupRing.setBackgroundImageNamed("ring")
// 5
self.groupRing.startAnimatingWithImages(in: range,
                                        duration: duration,
                                        repeatCount: repeatCount)

Briefly explaining the code above:

1. determines the range of photos that will go through the animation. In our case, we go from “ring0” to “ring100”;
2. Specifies the total time in seconds that your animation will have to spend our 101 images;
3. Determines how many times your animation will repeat
4. Changes the background image of the group container to the image in the file. That is why it was important to keep the name of the standardised images;
5. Animate the specified images with the specified duration and repeat the information with the information defined in 1,2 and 3.

And done! Run the code and you will have a customised ring for yourself! 😍

If you want, I will leave the project of this tutorial available here.

I hope this article was helpful to you! Thank you and see you next time!