Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a loading animation using variables in your prototypes

Learn how to create a loading animation (such as a progress wheel or bar) using variables and OnVariableChange events with the help of this tutorial.

Loading animations can add vivacity and personality to your web and mobile apps. Let’s take a look at how we can create a loading animation in an iPhone mobile app prototype.

You can download the below example here

Loading animations in your prototypes

Creating an interactive loading animation in your interactive mobile prototypes

1. In a new iPhone mobile app prototype, drag a dynamic panel to the canvas, resize it to match our example (132 x 240px), and place it in the center of the screen.

2. Add 4 additional panels by clicking the ‘+’ button at the top of the dynamic panel.

3. Drag an image widget into each panel and change each image by choosing the relevant image from the Assets folder provided in our tutorial. E.g. frame1 should be placed in Panel 1, frame2 in Panel 2 and so on. Resize each image to match the size of its container panel.

interactive-prototypes-assets-frame-animation

4. Next, drag another image widget onto the screen and place it at the bottom of the screen, as in our example. Select the logo image from the Assets folder. Ensure that the image widget is placed outside of the dynamic panel, and rearrange it in the Outline tab if necessary.

5. Drag a text box to the canvas and place it on the screen as we have in our example. Type ‘LOADING…’ into the text box. Ensure that the text widget is placed outside of the dynamic panel, and rearrange it in the Outline tab if necessary.

6. Finally, create a variable, by clicking the ‘+’ button in the Variables tab, next to the Outline tab.

interactive-prototypes-variables-frame-animation

7. Name it ‘loop’ and make the Default Value 0.

Adding interaction to your animation

1. Select Panel 1 in the dynamic panel and go to the Events tab.

2. Add an ‘On Page Load’ + ‘Set Value’ event, selecting the variable, from the Variables tab, as the component you wish to add the event to.

3. At the bottom of the dialog, the value should be Fixed; 1. Click OK.

interactive-prototypes-events-set-value-variables

This event ensures that the ‘loop’ variable is set to begin the chain of interactions that we will map out in the below events. Now, let’s set the relevant panels within the dynamic panels to animate at the correct time.

4. Select Panel 1 in the dynamic panel again and go back to the Events tab.

5. Add another event: this will be an ‘On Variable Change’ + ‘Set Active Panel’ event. In the Events tab, click ‘Add Event’. Add the trigger ‘On Variable Change’ and from the ‘Select a Variable’ drop down, select the ‘loop’ variable. From the actions drop down, add the ‘Set Active Panel’ action. Select Panel 1 as the component you wish to add the event to. Click OK.

interactive-prototypes-events-set-active-panel-dynamic-content

6. Repeat this step for the rest of the panels, by right clicking on the event you’ve just created and selecting the ‘Add action after selected’ option. Remember to change the relevant panel each time. In between each action, select the ‘Time AFTER previous started’ option and change the milliseconds to 200.

interactive-prototypes-change-link-movement-event

7. Finally, add one more action after these. It will be an ‘On Variable Change’ + ‘Set Value’ event. Select the ‘loop’ variable as the component you wish to add the event to.

8. At the bottom of the dialog, make the value calculated and click on the ‘Add Expression’ link.

9. In the expression builder, create the following expression:

Drag and drop the ‘loop’ variable from the Variables tab into the builder, followed by the ‘+’ function and then type ‘1’ into the text box. Click OK twice.

 

interactive-prototypes-expression-builder-variables

These events will ensure that the relevant animation in each panel becomes active at the relevant time.


Some tricks and tips

To make the image move vertically up and down the screen, as our example does, follow these steps:

1. Select the dynamic panel and move it down in the screen, to match our example. This step is to ensure that the animation can be viewed adequately as it moves up the screen upon simulation.

2. In the Events tab, right click on your ‘On Page Load’ + ‘Set Value’ event and select the ‘Add action after selected’ option. Add an ‘On Page Load’ + ‘Move’ event. From the Outline tab, select the dynamic panel as the component you wish to add the event to.

3. At the bottom of the dialog, set the left position as Current and the top as Fixed; 77 pixels.

4. Add a Linear easing affect at 5000 milliseconds. Click OK.

interactive-prototypes-events-move-extra-interaction

To make the image more horizontally across the screen, simply switch the settings for the left and top positions in the events dialog.

To make your animation perform the interaction continuously on a loop, follow these steps:

1. In the Events tab, navigate to the ‘On Variable Change’ events you created. On the right of the first event, (‘On Variable Change’ + ‘Set Active Panel’ event), click the ‘Add condition’ option. Add the following expression. The number corresponds to the number of interaction repetitions, (in our example, we’ll have 8).

Drag and drop the ‘loop’ variable from the Variables tab into the builder, followed by the ‘<‘ function and then type ‘8’ into the text box. Click OK.

interactive-prototypes-continuous-loop

2. Finally, copy the ‘On Variable Change’ + ‘Set Active Panel’ event and paste it at the end of this series of events and actions.

And that’s it! You can now simulate your prototype and see how it moves!

Next tutorial > Simulate an iOS passcode screen