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.

If you like the article, please share it with others with page link, thanks for your supporting!

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.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.