First look at the table below:
Easing, Offset & Delay are time dependent.
Parenting is used to describe the relationship between elements.
Transformation, Value Change, Masking, Overlay, and Cloning can enhance the continuity of the element itself.
Parallax (Parallax) is mostly used to indicate the hierarchical relationship of elements.
Obscuration, Dimensionality, Dolly & Zoom are used to indicate the relationship between elements and space.
Principle 1: Easing
When exercising, there is rarely a comfortable uniform motion in nature, and the change in the rate of element motion should be in line with the user's expectations. Close to nature, in line with user perception, slow in and out.
Example 1
Example 2
Example one has linear motion, which doesn't look good. All three examples above have the same number of frames and complete in the same amount of time. The only difference is their easing.
Behaviors that exceed user expectations can result in less usable interactions. With proper easing, users can experience natural motion that doesn't distract. Straight-line motion can make users feel intentional, incomprehensible, unfinished, and distracting.
And the example on the right, which has a sense of "design" where we notice how the object arrives, is more "correct" than the example of linear motion.
Summary: When to use easing? Use easing at all times.
Principle 2: Offset & Delay
Use offsets and delays to stagger the movement time of elements to indicate the level and relationship between elements.
Let information or interface elements enter and exit in an orderly manner;
imply that there may be some distinction between user information and interface elements;
Capture the user's attention.
Example
In the example above, the Floating Action Button (FAB) is transformed into a header navigation element consisting of three buttons. Because the buttons "cancel" each other in time, they end up supporting usability by "separating," which tells the user the nature of the elements in the interface completely independent of the visual design.
To better show you how this works, I'll show b2b data you an example that breaks the principle of offset and delay.
In the example above, the static visual design tells us that there are icons on the background, which presumably are separate from each other and do different things. However, this animation shatters the previous theory.
In time, icons are grouped into rows and behave like a single object, their titles are likewise grouped into rows and also behave like a single object, the motion tells the user what to see besides what the eye sees. In this case, we can say that the time element behavior does not support availability.
Principle 3: Parenting
The father-son relationship is a powerful principle. Objects can be "associated" in the user interface.
Help users better understand the hierarchical relationship between them;
Evidence-based operational feedback.
Parent-child relationships are links of object properties to other object properties, which create object relationships and hierarchies in a way that supports usability. Parent-child relationships also allow designers to better coordinate time in the user interface, while communicating to the user the nature of object relationships.
Recall that object properties include the following: scale, opacity, position, rotation, shape, color, value, etc. Any of these attributes can be linked to any other attribute to create synergy in the user experience.
Example 2
In the above example, the parent-child relationship is the value of an attribute of the child element, which changes in a certain proportion with the value of an attribute parameter of the parent element. Parent-child relationships work best as "live" interactions, where the designer communicates to the user through motion how the objects are linked and how they relate to each other as the user manipulates interface objects directly.