Natural and fluent--talk about the switch animation of the interface

In the use of some mobile end of the &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp; App or PC-side software, we often have some interface switching between the operations, especially on the mobile side of the device, because of the screen size and interaction characteristics, more of these switching operations, and very suddenly from one interface to another interface will cause trouble to users, So while triggering these operations, it is often necessary to transition the form of animation to guide users from one interface to another interface, we look at some of the common interface switch transition mode bar.

1. Fade in

Fade in the transition effect is the most common processing techniques, this effect can be very intuitive performance from one screen to another picture of the process of change, visual performance is relatively soft, but at the same time usually limited to the need for transition between the two interface has a certain common characteristics.
For example, when you slide the iphone from the first screen to the Spotlight page, we can see the process of having a black translucent background from scratch, while the icon for the first screen is slowly becoming transparent from completely opaque to the right out of the screen.

Another example in the Windows7 platform on the Aeropeek function, when the mouse to move to the bottom right corner of the desktop Display Desktop button, the window content will fade in the effect from the opaque transition to all transparent effect.

iOS Music interface also uses the same effect, from the "playing" interface to switch to the previous interface, the top of the status bar and title bar will be in the fade effect, from the playback interface to the dark color of the list interface.

2. Scene switching

Scene switching is typically used between two different interfaces, and the visual effects look cool, and the disadvantage is that you need to wait time to switch scenes.
Let's take a look at Apple's Cards app, from selecting a card to entering the editing card interface, slowly flying into a leather-textured desktop.

In iOS, for example, "e-mail Photos" are also used for this type of effect (the photo is moved and the mail interface slides from the bottom to the screen).

Such transitions do not work well between pages that need to be switched frequently, and too much waiting time can make users feel restless.

3. Flip interface

The way to flip the interface is quite common on the iOS platform, and there is usually a connection between the two interfaces before and after the flip. Common in the Settings interface and list interface.
The "Playing now" interface and the "album list" interface switch in the following figure.

4. Black screen

With the iphone, the students can do a test together, when you put the iphone wallpaper and the lock screen interface to two different photos (note, it must be different OH), when you cut the lock button, the screen will be in the fading out of the way black screen, and then slowly light back to the main interface.

Sometimes we also see this effect in the game, such as opening the cut the rope application, when clicked the Settings button, also will be a black screen way to switch the interface.

5. Deformation

Opening a folder in iOS will start with a style with an arrowhead, and the part of the expansion that ended up missing the area of that little triangle, let's slow down and see how the iOS naturally hides the small triangle:

As we open the folder, we can see clearly that the small arrow is shrinking until it's not there at all. Although the deformation is so fast that the human eye may find it difficult to perceive its course of change, it is part of the detail that the final desired shape is achieved with a reasonable and natural deformation process.

6. The form follows the scaling of the content

The performance of such animations is usually accompanied by fading, more common is the Window7 Taskbar preview pane, when the mouse moves from one icon to another, because the preview window is not the same size, the window automatically scales to the appropriate size for the size of the content. The content will be accompanied by fading in the way of change.

Under the Mac platform, this kind of page transition is more common, such as the Mac to open the system configuration, in the system configuration to switch any one of the settings will have this effect.

7. Enlarge

The effect of amplification is common in the transition from a smaller element to a larger interface, sometimes with the effect of fading. As in GarageBand, select the effect that an instrument uses when it enters the instrument's editing interface.

8. The use of a variety of effects

In some complex interface switching process, sometimes only a way to achieve interface switching is not enough, in order to be more vivid and natural in the interface to switch, need to apply several transition effects.

For example, the lion system on the map, the itunes Full-screen process, you can see the desktop background on the left and right while, itunes with the fade effect and zoom to full screen, the dock moved down to make room for the itunes Full-screen screen space.

The purpose of this 1 is to make the itunes interface a full full-screen state, and 2 is the background switch that represents the Full-screen itunes as a separate space for the MAC screen. It can also be seen that how the animation transition effect to achieve interface conversion is actually telling the user, I switch this means what.

In addition to the transition effects listed above, there are more transition effects that are not listed here. We can dig further and discover more. In addition to the animation can make the interface less rigid, reasonable animation will let the user very intuitive understanding of the interface and interface between the relationship and how to switch, more can increase the user in the use of the flow of the process, thereby enhancing the experience.

Finally, leave a little homework. In the ipad's main screen, the gravitational induction caused by the horizontal screen switch, it is a small animation of how to achieve the transition?

(This article is from the Tencent CDC Blog, reprint, please indicate the source)