Axure Tutorial: How to Make a Super Simple Mechanical Loading Effect

Axure Tutorial: How to Make a Super Simple Mechanical Loading Effect

Take a look at the effect first:

What can be learned?

1. Application of loop dynamic panel
2. How to deal with loop animation
3. Use of build-in widget library

Step 1: Widgets Setup
Search for “gear” in the Icons widget Library

Add 3 to the canvas, and name 3, 2, and 1in turn, as shown in the distribution:

Step 2: Create the animation

Create a dynamic panel and add 2 states.

Create a interaction [Panel state changes]:

Rotate 1 clockwise through 360°, and the animation is linear for 4000ms;
Rotate 2 counterclockwise through 360°, and the animation is linear for 4000ms; Rotate 3 clockwise through 360°, and the animation is linear for 4000ms;

Then it is necessary to drive the interaction of the dynamic panel loop. Click the interaction, and select when the dynamic panel loaded, set its state to next warp, and warp from last to first, and repeat every 4000ms.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure #Product Design & Product Manager #UI / UX / Interaction Design