Axure Tutorial: How to Make a Super Simple Mechanical Loading Effect
Take a look at the effect first:
What can be learned?
- Application of loop dynamic panel
- How to deal with loop animation
- 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