1# Transition Animations 2 3Transition animations between screens or between elements help users understand their logical relationships. Example transition animations include the animations that display when you open an application or switch a schedule. The transition animations account for more than 60% of the system animations. The system adopts a "one-shot film" approach during the design of transition animations. This helps deliver a smooth visual experience and improves the quality of the animations. 4 5 6## Hierarchy 7 8Hierarchy is defined by the system architecture and application architecture. It determines the interactive purposes of transition animations. Different transition designs imply different hierarchical relationships. Inappropriate animation effects may mislead users, leading to poor user experience. When designing transition animations, you must correctly understand the relationships between the applications and screen elements, and use the right methods to design appropriate animations. 9 10 11### Same Level 12 13The screen or element after transition is at the same level of hierarchy as the current screen or element. 14 15Scenarios: A user edits some components or elements, switches between tab pages, or changes the landscape/portrait mode. 16 17 18 19Editing operations 20 21 22### Upper and Lower Levels 23 24The screen or element after transition sits at the lower or upper level of the current screen or element. 25 26Scenarios: A user switches between upper- and lower-level screens, creates an entity, unlocks a screen, or performs a search. 27 28|  |  |  | 29| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 30| In the case of a parent-child transition within an application, the child element is brought up on touch and fills the screen. | Create an entity. | The application exits to an icon on the home screen, showing the position of the application icon on the home screen. | 31 32 33### Cross-Level 34 35One example of cross-layer transitions is transition between different applications. 36 37Scenarios: A user switches from one application to another. 38 39 40 41 42## Motion Orchestration 43 44In the process of a transition, different elements are classified and motions are coordinated to make the entire process seamless and properly guide the user's attention. 45 46 47### Different Elements 48 49A transition is a UI change triggered by user behavior. You must analyze the meanings of different elements that occur during a transition, categorize them as appropriate, and then determine the graphical representations of these elements, which may change over time, as well as their durations. 50 51- **Incoming elements** 52 53 New elements that will show on the screen after the transition. 54 55- **Outgoing elements** 56 57 Elements that will disappear after the transition. They are usually elements on the previous screen. 58 59- **Persistent elements** 60 61 Elements that are displayed throughout the transition. They may change positions on the screen during the transition, or they may be some kind of continuous animation effects that last throughout the transition. 62 63- **Static elements** 64 65 Elements that remain static during the transition. 66 67  68 69 1. Incoming element; 2. Outgoing element; 3. Continuous element; 4. Static element 70 71 72## One-Shot Film 73 74One-shot film is an orchestration approach that ensures a seamless transition experience by leveraging shared elements. It helps users navigate between the UIs and enhances user experience. It is a recommended technique for transition design. 75 76- Shared elements 77 78- Shared containers 79 80- Shared motions 81 82 83### Shared Elements 84 85Shared elements, which are persistent elements described earlier, are elements that are displayed before, during, and after a transition. They are elements you would want your users to focus on throughout the transition. They enhance a sense of continuity during the transition. 86 87.gif) 88 89In this example, the search box is a shared element. 90 91 92### Shared Containers 93 94During a transition, if a group of elements have clear boundaries, you can apply a container to these elements to create a sense of continuity. The container uses attributes such as sizes, heights, and rounded corners to smooth the transition by means of tweening. Elements in the container are eased in or out, or shared elements may be used. 95 96 97 98A shared container groups elements before and after the transition, creating a sense of continuity. 99 100 101### Shared Motions 102 103There are no intermediate attributes, so there is no way to use tweening to create a seamless transition. You must extract and leverage shared motions to ease the transition. Common shared motion attributes include displacement, scaling, and rotation. 104 105|  |  | 106| -------- | -------- | 107| Shared scaling motion| Shared rotation motion (large screen demo)| 108 109 110## Ease-In and Ease-Out 111 112Ease-in and ease-out is a technique that creates a smooth transition experience by changing the transparency of elements in an orderly fashion. It can be applied when components or elements have not intermediate attributes. The following methods may be used: 113 114 115### One-way Ease-In and Ease-Out 116 117On a screen of overlaying images, only foreground elements are eased in or out, while the background elements remain unchanged. 118 119 120 121 122### Cross Ease-In and Ease-Out 123 124Ease-in and ease-out are applied to incoming and outgoing elements, respectively, and according to their graphical characteristics. Generally, if incoming and outgoing elements use the same or similar styles, you may allow the ease-in and ease-out to happen at the same time. If the incoming and outgoing elements use different visual styles, ensure that the ease-in and ease-out happen at different times, avoiding visual confusion caused by overlapping images. 125 126 127 128 <!--no_check-->
