神刀安全网

Prototyping a circular loading indicator using Principle for Mac

Prototyping a circular loading indicator using Principle for mac

Almost every app has them, but no-one wants to see them. Yet these are a fundamental element in designing a product where content loading is a consideration. These little animations that progress while content is fetched serve as a reinforcement of our expectation that something is happening, and what we are looking for will eventually arrive.

I do almost all my prototyping in Principle . It works extremely well with Sketch , and is incredibly fast to work in. Ideas can be tested, iterated or thrown away quickly with makes this an invaluable tool for testing moving elements within modern app design.

While working on an app this week I wanted a circular spinner that would fill from 0–100% based on the data received. Principle is great for linking screens and animating differences, but on first look for this type of animation the tool can be limiting.

Prototyping a circular loading indicator using Principle for Mac

With some trickery, I’m going to share how you can create an effect of a circular progress indicator, which will result in something like the above.

Drawing the shape

Ok, let’s create our shapes. Principle has sufficient drawing tools to achieve the shape in the finished example above, so this time there’s no need for Sketch or Photoshop , however this technique will work fine with raster images also.

Firstly we’re going to create a rectangle, and then set a radius so that it appears as a circle. For the purpose of this demo I’m going to set the scale value to 2 to make everything legible, but I would usually design in Principle and Sketch and 1x for iOS apps. Set the rectangle to 24pt x 24 pt, with a transparent fill, and a 10% black stroke of 2 pts.

Prototyping a circular loading indicator using Principle for Mac

Creating the fill and setting up our first mask

Next, we’re going to copy that shape and change it’s colour to the fill we want for our progress indication. We’re also going to put the shape into a rectangle that will act as a mask. Make sure ‘Clip Sublayers’ is ticked on the rectangle mask, and set it to 24 pts high, 12 pst wide at 2x scale.

Once we have our mask, duplicate it and flip that 180°.

Prototyping a circular loading indicator using Principle for Mac

We’re going to simulate the effect of the circle filling by animating the height and width of both the left and right side masks. The construction and what is actually happening is illustrated below.

Prototyping a circular loading indicator using Principle for Mac
GIF showing the mask animation

Animating the masks

Before we create multiple artboards in Principle to animate this effect, we need to change the width and height of each mask to 0. Because the left mask is a 180° duplicate of the right our starting points to grow the mask’s width and height is ideal.

Prototyping a circular loading indicator using Principle for Mac

Next, we’re going to create an additional artboard to animate the spinner to completion. Below is how the scene is set up. Firstly the circle, fill and masks have been placed into a containing group called Spinner –this will come in handy later.

I’ve adjusted the timing of the transitions so that the left side of the mask animates after the right has completed. Note that the X and Y transitions need to match the corresponding width and height transitions. I’ve set these to linear for a smoother transition, but other easings will work as long as both X, Y, Width and Height match.

Prototyping a circular loading indicator using Principle for Mac
Prototyping a circular loading indicator using Principle for Mac

And this is the result of those animations. It’s not that exciting right now, so there’s a couple of final tweaks that will give the load indicator a more natural and fluid feel.

Finishing touches

Let’s play with some rotation, scale and opacity to add to the movement. As this is 2x scale, on the first artboard we’re going to change the spinner group to 1x and the opacity to 0%. We’ll also make the angle of the spinner group -45°.

We’re going to leave the second artboard as it is with one exception, we’ll give the spinner group an angle of 135°.

Finally, duplicate the second artboard to create a third. This will be used for the exit animation. Let’s set the angle of the spinner group on the last artboard to 45° and match the scale and opacity of the first artboard (1x and 0%). Remember if you were creating this at 1x just devide by 2 and use .5 for the scale. This will create a nice effect as the spinner leaves the scene.

That has us most of the way there. I prefer to use a spring animation for most scaling effects, so let’s go ahead and do that. Also, let’s put in an auto transition from artboard 3 back to artboard 1 so it’s easy to click through it multiple times.

Prototyping a circular loading indicator using Principle for Mac

The final result

Prototyping a circular loading indicator using Principle for Mac

And this is our final result. This can easily be copied into more comprehensive prototypes and Principle will maintain the transitions and timing as it has been set here. There are many variations that could be done using this technique and manipulating the elements in different ways.

I find for smaller UI elements it can be helpful working isolation and bringing them into an app prototype once they have been adjusted to the desired behaviour.

Happy prototyping!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Prototyping a circular loading indicator using Principle for Mac

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址