Material Design Animation

Material Design Animation Authentic Motion True motionThe movement describes spatial relationships, functions and purposes in a graceful flow of form. Mass and Weight: Mass and weightIn the physical world, an object must be vigorously exerted upon it to move. The strength and duration of the force specify the acceleration of the object or the change in the direction of movement. Even the most hurried start and end are not instantaneous, because the acceleration or deceleration of an object takes a certain amount of time. So, when the animation has a stiff start or end, or if Don posseses changes direction, they will look unnatural. The movement of Material design should be as close as possible to the real physical movement and the real world behavior without losing the elegance and simplicity and aesthetics. natural acceleration and decelerationChanges in acceleration and deceleration should be smooth over the duration of the animation. To attract attention to an object for a specific purpose, or to add a feature to an animation, It can change its acceleration at the beginning and the end. Asymmetric acceleration and deceleration will create a more natural and enjoyable movement. When acceleration and deceleration are not smooth, the sports meeting shows the mechanical, speed and direction of the abrupt changes appear to be discordant, Attention. This is why asymmetric curves change better than linear ones, and linear changes always have abrupt inflection points, so linear changes should be avoided. entrances and ExitsThe speed and direction of the object can be noticed by the user. An object changes speed as it enters and exits the frame, indicating the distance it is moving. For example, an object slows down when exiting, which can cause attention, suggesting that it will stop outside the frame. In particular, in the transition animation, It is important to consider which part of the inlet or outlet should receive the most attention. At both entrances and exits, a near constant speed should be used to reduce attention. Do not speed up when entering, slow down when exiting, this will attract a lot of unnecessary focus, distract the user's attention. Make adjustmentsNot all objects are moving in the same way. Light or small objects can move faster because they require less force, while larger or heavier objects require more time to accelerate. Use a curved motion to avoid the path of a linear segment. Find the most suitable motion characteristics for the object and then express it accordingly. The curve shows a change in the range of a particular value over time. Find the curve that best fits the motion you want to describe. Responsive Interaction Responsive interaction User InputTouch, sound, mouse and keyboard are equally important for user input. UI elements appear to be touchable, and visual and motion cues should acknowledge user input in a timely manner, and should be animated in a form that is directly manipulated. Surface reactionAfter receiving the input event, the system should provide immediate visual confirmation clues at the point of contact, such as: where the finger is clicked, the mic of the sound input, and the appropriate field of the keyboard click. The core visual mechanism for expressing this contact is: "Click Ripple", or "touch Ripple". The device expresses a click event method and a continuous event, and can also be used to express other dynamic variables, such as volume or click Pressure. Best practice: Start with the input contact point (such as the fingertip touch point or the icon of the sound mic), allowing the visual reaction to spread radially (radiate, radiate). Material ResponseIn addition to the ink-based surface reaction, the material can be lifted up when clicked, marking an active state. By clicking, the user can create new materials, or convert existing materials, or manipulate the material directly by dragging or using a quick stroke. The material can be changed linearly or radially. Show animations at state transitions : Http://developer.android.com/training/material/animations.html#ViewState Origin: When a user triggers a new material to be generated, it should start from the input point and grow in size. This establishes a connection between the input and the build. Click to raise: when a card or a separable element is activated, the card should be raised to indicate that it is in an active state. Specify a height for your view: http://developer.android.com/training/material /shadows-clipping.html#elevation Radial Action: Radial Behavior The user input should be added to the visual response to make it clearer .The visual ripple that the ink diffuses from the input point to the four sides is a radial behavior. The input event is visualized: the connection between the input event and the on-screen event should be visually bound. For touch events or a mouse, this occurs at the point of contact, and for the sound, it is the icon of the microphone. A touch ripple identifies where touch occurs and has time, and it also identifies that the click Input was received. connection input and behavior: Input event-triggered transitions or behavior actions should be visually linked to input events. The ripple reaction near the epicenter is faster than in the distance, for example: 1. A series of content changes: Many images appear or disappear; 2. A series of material movements: The card moves in or out of the screen. Use the Reveal Effect:http://developer.android.com/training/material/animations.html#reveal meaningful transitions meaningful conversionsMotion design can effectively guide the user's attention through two ways of informing and pleasing. Using motion can: allow users to smooth transitions between navigation contexts, explain the layout of elements on the screen, and strengthen the concept of element inheritance systems. Visual continuity visual continuityThe transitions between the two visual States should be clear, smooth, and effortless. A well-designed conversion can tell the user where to focus. Conversion type and behavior: Incoming elements: Newly generated or newly converted projects are introduced or re-established. Outgoing elements: An element that is no longer relevant to the context is removed. Shared elements: an element that exists during conversion, either tiny (an icon), or occupying a dominant position (a gallary image slowly grows to occupy the entire screen). Customizing activity Transitions: http://developer.android.com/training/material/animations.html#Transitions Note: When designing animations, pay attention to the following aspects: 1. Guide the user's attention. Where should the user's attention be directed? What elements and movements can achieve this purpose? How should the incoming, outgoing, and shared elements be emphasized or emphasized during the conversion process? 2. Visual connection conversion. Create visual contact between transitions states, either by color or by persistence of elements. 3. Use precise motion. Consider how to move a particular element to add clarity and pleasure to the transformation. Hierarchical TimingWhen creating a transformation, pay attention to the order and time of the elements ' motions. To ensure that the motion supports information inheritance, communicate the most important content by creating a path for the line of sight. However, this is not a simple formula to say that the most important thing is the first movement, the least important last movement. The time to convert elements should flow smoothly, avoiding the sense of disconnection. Consistent ChoreographyThe elements in the transformation should move in a coordinated manner. The path through which the element moves should be meaningful and orderly. Occasional games distract attention. When the elements in the transfer are coordinated, they help the user to better understand the application. Use curved motion:http://developer.android.com/training/material/animations.html#curvedmotion Best practices: 1. Try to avoid linear paths. But when motion is confined to an axis, the exception is when the movement is facing or leaving a point. 2. Let the elements of directionality remain consistent during the transition. Avoid conflicting movements and overlapping paths. 3. What is the depth of the element movement and why? 4. If all the moving elements follow their path on the screen, will it look beautiful and orderly? Is it possible to draw a clear picture of where to look? 5. The spatial relationship between elements is emphasized through consistent entry and emigration movements. Delightful detailsAnimations can exist in all element components of an app, regardless of size, from a detail icon to a critical transformation and action. All elements work together to build a watertight experience and a functional and beautiful app. The most basic usage of animation is in the conversion, but an app that can use animations in some tiny places really pleases the user. A menu button that can be turned into an arrow or a Play key controls a smooth transition and has two functions: notifies the user, and lets the app itself be filled with surprises and a sense of design at this moment. ReferencesMaterial Design animation:http://www.google.com/design/spec/animation/authentic-motion.html

Material Design Animation