Material Design Animation, materialanimation

Material Design Animation, materialanimation

Material Design Animation Authentic motion real motionMotion describes spatial relationships, functions, and objectives in the form of a beautiful flow. Mass and weight: Quality and weightIn the physical world, an object must be forcefully applied to it for motion. the Force intensity and duration specify the acceleration of an object or the change in the direction of motion. even the most rapid start and end are not instantaneous, because the acceleration or deceleration of an object takes some time. therefore, when an animation starts or ends, or suddenly changes its direction, it looks unnatural. the movements in Material design should be as close as possible to real physical movements and real-world behaviors without losing elegance, conciseness, and beauty. Natural acceleration and decelerationThe acceleration and deceleration changes should be smooth during the animation duration. to attract attention to an object for a specific purpose, or to add features to an animation, you can change its acceleration at the beginning and end. asymmetric acceleration and deceleration will create a more natural and pleasant movement. when the acceleration and deceleration are not smooth, the sports meeting shows that the mechanical properties, the abrupt changes in the speed and direction may seem inharmonious and cause attention. this is why asymmetric curve changes are better than linear changes, and linear changes always have abrupt inflection points. Therefore, linear changes should be avoided. Entry and exitChanges in the velocity and direction of objects will attract users' attention. the speed at which an object changes when it enters and exits the frame, indicating its motion distance. for example, an object slows down when it exits, causing attention, suggesting that it will be parked not far from the frame's outer border. in particular, you need to consider which part of the entry or exit should receive the most attention during transition animation. A constant speed should be adopted at the entrance and exit to reduce attention. do not speed up when you enter or slow down when you exit. This will attract unnecessary focus and 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 large or heavy objects require more time to accelerate. use linear motion to avoid linear piecewise paths. find out the motion characteristics that are most suitable for objects and then express them accordingly. A curve represents a change over time within a specific value range. find the curve that best fits the motion you want to describe. Responsive Interaction User InputTouch, sound, mouse, and keyboard are equally important user input. the UI elements seem to be touchable. Visual and motion clues should be recognized in a timely manner and animated in a form that is directly manipulated. Surface reactionAfter receiving the input event, the system should provide instant visual confirmation clues on the contact point, such as: the place where the finger is clicked, the mic for the sound input, and the appropriate field for the keyboard click. the core visual mechanism for expressing such contact is: "Click Ripple", that is, "Touch Ripple ". the device expresses a click event method and a continuous event. It can also be used to express other dynamic variables, such as volume or click pressure. best Practice: Initiate a radial (radial, radial) Propagation of the visual response from the input contact point (such as the contact point of the fingertip or the icon of the sound mic. Material responseIn addition to the ink-style surface reaction, materials can be lifted when clicked to identify an active state. by clicking, you can generate new materials, convert existing materials, or directly drag and drop or draw materials. the material size can be linearly or radial. displays an animation during state transition: http://developer.android.com/training/material/animations.html#ViewState origin: when a user triggers a new material generation, it should increase size from the input point. in this way, a connection is established between input and generation. click raise: When a card or an element that can be separated is activated, this card should be raised to identify it as active. specify the height for your View: http://developer.android.com/training/material/shadows-clipping.html#Elevation Radial Action: Radial Action Visual responses should be added to user input to make them clearer. The visual ripple that the ink emits from the input point to the four sides is a radial behavior. input events are visualized: the connection between input events and on-screen events should be visually bound. for a touch event or mouse, this occurs at the touch point. For a sound, it is the microphone icon. A touch ripple identifies the location where touch occurs and the time when it also indicates that the click input is received. Connection input and Behavior: The conversion or action triggered by the input event should be visually associated with the input event. the ripple reaction near the epicenter is faster than that in the distance, for example: 1. A series of content changes: the appearance or disappearance of many images; 2. A series of Material movements: cards move into or out of the screen. use the reveal effect: http://developer.android.com/training/material/animations.html#Reveal Meaningful transitions Meaningful ConversionsSports design can effectively guide users' attention through two ways: Notification and pleasing. motion allows users to smoothly convert the navigation context, explain the arrangement of elements on the screen, and enhance the concept of element inheritance system. Visual continuityThe transition between the two visual states should be clear, smooth, and easy and effortless. A well-designed switch can tell users where to focus. conversion Type and behavior: Incoming elements: newly generated or converted projects are introduced or re-established. outgoing elements: elements no longer related to the context are removed. shared elements: elements that exist during conversion can be tiny (an icon) or dominant (A gallary image grows slowly to occupy the entire screen ). custom Activity transition: http://developer.android.com/training/material/animations.html#Transitions considerations: when designing an animation, pay attention to the following aspects: 1. guides the user's attention. where should the user's attention be directed? What elements and movements can achieve this purpose? How Should incoming, outgoing, and shared elements be emphasized during the conversion process? 2. visual connection conversion. create a visual connection between the transition states. You can use colors or continuous elements. 3. use precise motion. consider how to exercise a specific element to increase clarity and pleasure for the conversion. Hierarchical timingWhen creating a conversion, pay attention to the sequence and time of element movement. make sure that the information inheritance relationship of the motion support is established to convey the most important content by creating a path for the line of sight. however, this is not a simple formula. The most important thing is the first movement, the least important last movement. the time for converting elements should flow smoothly to avoid disconnections. Consistent choreographyElements in the conversion should be moved in a coordinated manner. the path through which the element moves should be meaningful and orderly. occasional sports events are distracting. when the elements in the transfer are very consistent, it will help users better understand the application. use curved motion: http://developer.android.com/training/material/animations.html#CurvedMotion best practices: 1. avoid linear paths whenever possible. however, when the motion is limited to an axis, or when the motion is oriented or leaves a certain point. 2. make the movement of the element in the direction consistent during the conversion. avoid conflicting motion and overlapping paths. 3. what is the depth of element motion and why? 4. If all the moving elements follow their paths on the screen, will they look beautiful and orderly? Can I draw a clear picture indicating where to look? 5. Emphasize the spatial relationship between elements through consistent movement of entry and removal. Delightful detailsAn animation can exist in all the element components in an app, regardless of the size, from a detailed icon to a key conversion and action. all elements work together to build a seamless experience and a functional and beautiful app. the most basic usage of an animation is in conversion. However, if an app can use an animation in some tiny places, it can really please users. A menu button that can be changed to an arrow or a shortcut key controls a smooth conversion. It also has two features: notifying users and making the app full of surprises and design at this moment. ReferencesMaterial Design Animation: http://www.google.com/design/spec/animation/authentic-motion.html