Animation · Axure Template · Axure Tutorial · Elementary · Motion · Jun 23, 2022

Axure Tutorial: Making Common Animation Template

by WELLJOE

Introduction

As we all know, Axure has built-in common animations, which can be used in the show / hide of widgets and move actions.

These animations can attract users' attention and show interaction feedback.

Today, we will learn how to make commonly used animations, and make these animations into template, which can be easily called next time.

Preview the prototype

Slide

First make the Slide animation of shown action, it has 4 directions, slide left. slide right, slide up, slide down.

We set, when the Slide Left button is clicked, first hide the widget, then show it, set the animation of Slide Left 600ms.

Similarly, the Slide right, Slide up, and Slide down buttons are all set like this.

Flip
The settings of Flip are similar to those of Slide, the only difference is to select Slide when selecting animation.

Fade in and Fade out
When the Fade in and Fade out button is clicked, the current widget is first hidden, wait 1000ms, and then the current widget is shown, and the animation is set to 600ms.

Reduce/Enlarge

First, when the Reduce/Enlarge button is clicked, set its width and height to 1.5 times the original, and after waiting for 600ms, set its height and width to divide by 1.5 times the original.

Button Zooming Effect
The animation of this button is similar to that of reduce/enlarger. The difference is that it is realized not by multiplying, but by enlarging or shrinking pixels

When it loads, set its size to expand by a certain number of pixels, then wait for a certain amount of time and reduce it by a certain number of pixels. Finally Fire Event, implement the loop.

Shaking
This effect is achieved by continuously rotating a certain angle when the widget loaded, and looping the animation.

Moving up and down

This effect is achieved by continuously moving up and down while loading, and implementing a loop.

Finally, apply the animation to other widgets
The above is the animation template we made. By copying and pasting the interaction of these animations to other widget, reuse can be achieved.

The widgets on the right side of the top animation is the widgets that uses the shaking and that moves up and down animation.

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

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