Axure tips: The iphone's slide unlock effect

Article Description: axure tips: iphone sliding unlock effect.

When we first came into contact with the iphone, we were addicted to the iphone fingers lightly sliding the world will grasp the refreshing feeling, axure as a powerful interactive software, I now tell you: this can have. Do you want to make your own iphone sliding unlock effect, the author here for you to provide a very simple use of axure to achieve a small skill, let us in the growth of Axure on the road a lot of exchanges.

In fact, the completion of this action only needs to meet two conditions:

A picture of 1.iphone background, a sliding control chart, and an IP screen

2. Set the dynamic panel to complete the drag-and-drop interaction

A. Reach the specified area and enter the screen interface.

B. The control returns to its original location without reaching the specified area

By setting these up, we can generate prototypes and enjoy our work. OK, the following author will explain how to make this function in detail.

A Choose three pictures.

Two Set two dynamic panels

The size of a dynamic panel is consistent with the size of the lock box, and the other one can be as small as possible to determine the position of the sliding control.

1,2 position in the diagram

Next look at the 1, 2nd Control Panel

Add a Control panel in the 1th dynamic panel with the same size and control, name it sliding control, add the control picture to the slide Control Panel, and then interact with the slide control.

The number 2nd Control Panel is named "End."

Adding these events to an interactive action

1. As Use Case 1: Select Move dynamic panel → select "Sliding control" dynamic panel → move the selection along the X axis. Just like this:

2. Next edit the Ondragdrop event, in which we write two use cases, a use case is when the control slides to the end, a use case is the control does not slide to the original position

A. Use Case 1

Click Add Condition as shown below

Add an action:

B. Use case 2

Click Add Condition as shown below

Add an action

Note: The animation here is tuned to a slow end of the 800ms effect will be better

Here is the sliding unlock interaction completed, is not very simple! Ha ha! At this time you will find that I entered the screen interface can not return, don't worry! Add a rectangle to the home location, link to the previous page, so you can continue to operate yo! Well, today's exchange is here.

Drop the next little question:

This time our control is able to move around the infinite distance, can you let the control only in the box to move it? We are in the future axure tips for everyone to answer!

Author: Lucky