1# Animation Attributes 2 3Any type of animations consists of the following attributes: duration, curve, and frame rate. Different combinations of these attributes can create animations of different styles and characteristics, such as steady, lightheartedly, merry, and soothing. 4 5 6## Duration 7 8Animation duration varies according to the types of elements and scenarios. Animations that last too long or too short will make users uncomfortable. The following factors should be considered to enable the duration to accommodate different types of animations. 9 10 11## Unit 12 13The animation duration is usually in milliseconds (ms). 1 second equals 1000 milliseconds. When the frame rate is 60 fps, one frame is equal to 16.67 ms. 14 15 16## Complexity 17 18It takes more time to express complex animations than simple animations. And animations should be designed based on the characteristics of graphics. 19 20| | | 21| -------- | -------- | 22| **Simple animation**<br>The status change is expressed only through the change of colors. Duration: 100 ms| **Complex animation**<br>A rotation animation takes some time to display. Duration: 300 ms| 23 24 25## Regions 26 27The motion of an animation takes place within a certain range, and a small range movement takes less time than a full-screen movement. 28 29|  |  |  | 30| -------- | -------- | -------- | 31| **Movement in a small range**<br>Toggle. Duration: 150 ms| **Movement in some areas**<br>Deleting a list. Duration: 200 ms| **Movement in full-screen**<br>Opening an image. Duration: 350 ms| 32 33 34## Curves 35 36The curve and duration cooperate with each other to produce the rhythm of motion. By adjusting the curve, you can make an animated object speed up or slow down, rather than moving at a constant speed. The movement of objects in the real world takes time to accelerate and slow down. 37 38 39Transitions without moderating curves are stiff and mechanical. 40 41## Animation Curves 42 43The animation curve, also known as the animation interpolator, is essentially a method of adjusting the speed of the moving object on the time line. 44 45|| | || 46| -------- | -------- | -------- | -------- | 47| Linear | Easing| Spring| Others| 48 49## Bezier Curve 50 51Bezier curve is a mathematical curve and is widely used in animation design. By form, it can be divided into standard curve, deceleration curve, and acceleration curve. 52 53 54### Standard Curve 55 56The object is stationary at the start, accelerates to a peak velocity, and then slows down to become stationary again at the end. The acceleration phase takes less time than the deceleration phase. 57 58Usage: Use the standard curve for objects that remain within the users' line of sight before and after movement, to create realism and credibility. 59 60Scenarios: image zooming, tab switching, and switch toggling on/off. 61 62 63 64cubic-bezier(0.40,0.00,0.20,1.00) 65 66 67### Other Types of Standard Curves 68 69| .jpg)| .jpg)| 70| -------- | -------- | 71| cubic-bezier(0.20,0.00,0.10,1.00) | cubic-bezier(0.33, 0.00, 0.67, 1.00) | 72 73 74### Deceleration Curve 75 76The object moves at the highest speed at the beginning, gradually slows down over the course, and halts entirely at the end. 77 78Usage: Use the deceleration curve for objects that appear in the line of sight. The natural slowdown at the end allows human eyes to follow the objects. 79 80Scenarios: appearing of dialog boxes. 81 82 83cubic-bezier(0.00, 0.00, 0.40, 1.00) 84 85 86### Other Types of Deceleration Curves 87 88| .jpg)| .jpg)| 89| -------- | -------- | 90| cubic-bezier(0.00, 0.00, 0.20, 1.00) | cubic-bezier(0.00, 0.00, 0.00, 1.00) | 91 92 93### Acceleration Curve 94 95The object is stationary at the beginning, then starts slowly, and ends fast at full velocity. 96 97Usage: Use the acceleration curve for objects moving out. 98 99Scenarios: exiting of dialog boxes and deleting widgets. 100 101 102 103## Spring Curve 104 105Spring curve is a physical curve in which the speed variable is used as a parameter in the curve formula. The same group of parameters can generate different curves at different speeds. Physical attribute parameters, such as stiffness and damping, are used to produce natural spring effect. 106 107 108### Interpolating Spring Curve 109 110The interpolation spring curve is determined by four physical attributes: stiffness, damping, mass, and velocity. 111 112| Name| Description| 113| -------- | -------- | 114| Stiffness| Extent to which an object resists deformation in response to an applied force.| 115| Damping| Force that converges the vibration of the spring by the shock absorber. Damping reduces the amplitude of the spring over time until the spring stops.| 116| Mass| Mass of the object attached to the spring.| 117| Velocity| Initial velocity of the object attached to the spring.| 118 119 120### Spring Motion and Responsive Spring Motion Curves 121 122The spring motion and responsive spring motion curves are determined by response, damping fraction, and overlap duration. 123 124| Name| Description| 125| -------- | -------- | 126| Response| Period of the undamped natural oscillation.| 127| Damping fraction| Damping applied to the animation value.| 128| Overlap duration| Duration for animations to overlap, in seconds.| 129 130The interpolation spring curve type and the spring motion or responsive spring motion curve type can be converted to each other to produce the same animation effect. 131 132 133 134Interpolating spring: Stiffness: 128, Damping: 12, Msss: 1, Velocity: 0 135 136Spring motion: Response: 0.555, DampingFraction :0.53 137 138### Critical Damping 139 140Critical damping allows objects to reach the stable equilibrium state in the minimum amount of time without oscillating. 141 142 143 144 145### Underdamped 146 147The damping is weak, and objects consume rigid energy by oscillations and finally achieve a stable equilibrium state. 148 149 150 151 152### Overdamped 153 154When the damping is too large, the motion curve of objects is attenuated more slowly, and finally the stable equilibrium state is achieved. 155 156 157 158### Characteristics of Elastic Curves 159 160**Automatic Matching of Interruptible Duration** 161 162- Interruption means an update to the status of the target point. The new animation inherits the velocity of the previous one, delivering a natural transition experience. 163 164- The interruption time is not fixed. After the interruption, the animation motion duration is naturally matched. For inelastic curves, the duration must be manually specified. 165 166**Velocity Inheritance** 167 168- Under the same group of elastic curve parameters, different velocity values are passed in, changing the curve form to some extent. This makes the motion more user-friendly. 169 170**Natural Duration** 171 172- The duration is affected by the elastic parameters, attribute changes, velocity passed in, and precision algorithm. 173 174- The elastic curve is a physical model, and the automatic calculation of the motion duration is more in line with the natural law. 175 176### Design Principles 177 178Usage: Use the elastic curve for objects that move with the hand or that need to display the spring characteristics. 179 180Scenarios: scrolling the list up and down, turning pages left and right on the home screen, and sliding up to exit the application. 181 182#### Gesture Animations 183 184|  | | 185| -------- | -------- | 186| Hand speed inherited (Kinetic Energy)| Hand speed not inherited (potential energy)| 187|  Fling (Fast/Slow)|  Long press| 188| | Drag and drop| 189| |  Touch and lift| 190 191 192#### Transition Animations 193 194| | | 195| -------- | -------- | 196| Transition animation of level switching| Prompt event entry animation| 197 198#### Micro Animations 199 200Micro animations apply the effect of multiple oscillations to a small-sized element. (Research based on human factors is required.) 201 202| | | 203| -------- | -------- | 204| Icon micro animation example 1| Icon micro animation example 2| 205 206For details about the elastic curve, see [Spring Curve](../../application-dev/ui/arkts-spring-curve.md). 207 208 209## Frame Rate 210 211Frame rate is given in the number of frames per second (FPS). To allow animations to be perceived as smooth, the frame rate must be 10 to 12 fps. This is called visual persistence. Faster animations require a higher frame rate to ensure smoothness. 212 213 214 215Effects at different frame rates with the same duration and distance (The differences between 90 fps and 120 fps may not be perceived due to the limitations of the browser player.) 216 217 218### Frame Rate of Interactive Animation 219 220The animation frame rate, consistent with the refresh rate of 60 Hz generally used by mobile device screens, can achieve the best animation effect. Different from watching animations, interactive animations require higher frame rate stability. Otherwise, frame freezing may occur. 221 222||| 223| -------- | -------- | 224| 60 FPS | 30 FPS | 225 226 227### Pure Animation Frame Rate 228 229Pure animations, such as the operation guide animation, do not require frame rate as high as that of interactive animations. The basic frame rate of the early Disney hand-painted animation is 24 fps, which can also meet the requirements for smooth watching. Animations with a higher frame rate deliver a more delicate visual experience, especially for fast-moving animations. The frame rate of 8 fps is used for some animations, which is more of animated style needs. 230 231| | | 232| -------- | -------- | 233| 60 FPS. The animation is smooth and exquisite.| 12 FPS. Due to a low frame rate, the change between two frames of an element is too large, and the intermediate state is missing.| 234 235 236## Style 237 238You can express different animation effects by adjusting duration and curve parameters for different transitions and features. For example, more use of elastic animation will make the animation style of the product more flexible and lively. 239
