© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

 

ANIMATED SCREEN TRANSITION

Transition between pages in your mobile prototype with a rich animation.

STEP 1: SETUP

In the mobile training document, open the page named "Animated Screen Transition". On the canvas are two widget groups, one for each screen of our prototype, "Home" and "Settings".


Select both groups on the canvas. Right-click the selection and choose "Convert to Dynamic Panel" in the context menu. Then, drag the dynamic panel's right edge in until it lines up with the "Home" group's right edge, making the dynamic panel 360px wide. This restricts the dynamic panel's visible area so that only one of the two groups will be shown at a time.

STEP 2: SHOW "SETTINGS" WHEN THE GEAR ICON IS CLICKED

In the Outline pane, double-click "State1" of the new dynamic panel to open it for editing.


Once you're in the dynamic panel state, select "gear settings menu button" in the Outline pane. (This is the gear icon at the top-right of the "Home" group's header on the canvas.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


The first thing we need to do in this case is to prepare the "Settings" group for the animated transition. We'll do this by hiding it and placing it in the dynamic panel's visible area.


In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure Actions", check "Settings".


STEP 4: PREVIEW

Preview the prototype. Click the gear icon to bring up the "Settings" screen, and click the arrow icon to go back to the "Home" screen.


Next, we'll execute the actual transition using a Show action and another Move action.


In the left column, choose the "Show" action under "Show/Hide". Under "Configure Actions", check "Settings".


At the bottom of the right column, select "fade" in the "Animate dropdown and enter "300" in the "t" field. Then, check the box for "Bring to Front".

 

Back in the left column, select the "Move" action once more. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to", and leave both the "x" and "y" fields at "0". (Since the "Settings" group will be at (0, 20) after the previous "Move" action, this will have the effect of moving it upward by 20 pixels.) In the "Animate" dropdown, select "swing", and enter "350" in the "t" field.


Click "OK" to close the Case Editor.

 

STEP 3: HIDE "SETTINGS" WHEN THE ARROW ICON IS CLICKED

The transition back to the "Home" screen is simpler—all we have to do is hide and move the "Settings" group again.


In the Outline pane, select "arrow home screen button". (This is the arrow icon at the top-left of the "Settings" group on the canvas.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure Actions", check "Settings".


At the bottom of the right column, select "fade" in the "Animate dropdown. (Notice that the "t" field uses the same value, 300, that we entered in the other "Hide" action before.)


Back in the left column, select the "Move" action. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to" and enter "20" in the "y" field. In the "Animate" dropdown, select "swing". (Notice that the "t" field uses the same value, 350, that we entered in the other "Move" action before.)


Click "OK" to close the Case Editor.

Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog.

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

MORE RESOURCES

Note: You can search for "Settings" in the column's search bar to locate the group more quickly.


Back in the left column, choose the "Move" action. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to" and enter "20" in the "y" field. This will move the "Settings" group to (0,20) on the dynamic panel's canvas.