The original link

Why we need animation

  • Use animation to animate the project and enhance the user experience
  • Strategically design animations to enhance user interaction and avoid unnecessary animation interruptions or interruptions
  • Select appropriate attributes to design animation, some attributes are expensive, but may affect the performance of the project

CSS animation VS JS animation

When to use CSS animation or JS animation

  • If you want to implement simple “one-time” state transitions for UI elements, use CSS animations
  • Use JS animations if you need a lot of control over animation effects. web animation api
  • If you need to manually coordinate the entire scene, you can use requestAnimationFrame directly.

Implementation differences

  • CSS animation: declarative, cSS3 Animation API can be used to control key frames, the browser will automatically complete the intermediate state. With JS you can control state with JS, and remove/add classes to trigger CSS animations.
  • JS animation: imperative, through the Web Animation API to implement more precise control of the animation process.

Easing

In nature, due to gravity, friction, etc., almost nothing moves at a uniform speed. Our brains always expect this kind of movement, so we should follow this rule when designing animations.

Linear animation

An animation without any easing is called a linear animation. Linear animations should be avoided as much as possible

Slowly into the animation

A slow start to a slow end to a fast animation, as opposed to a slow animation.

From an interactive point of view, easing in can feel a little unusual because the ending is so sudden; Moving objects in reality tend to slow down rather than come to a sudden stop. Slowdowns also have the perverse effect of making people feel sluggish, which can negatively impact the perception of responsiveness of a site or application.

Slow the animation

A slow release makes an animation faster at the beginning than a linear animation and slows down at the end.

Slowing down is generally best for the interface, as it gives the animation a sense of responsiveness at the beginning, while still allowing for a bit of natural slowing down at the end.

Slow in and slow out animation

Slow in and slow out is similar to acceleration and deceleration in a car, and can be used at the right time to achieve a more vivid effect than simply slow out.

The animation should not last too long, as slowing down at the beginning makes the animation feel dull. A time range of 300-500 milliseconds is usually appropriate, but the actual amount depends largely on the feel of the project. That is, because the beginning is slow, the middle is fast, and the end is slow, the animation will have a stronger contrast and may be very satisfying to the user.

Custom easing

You can define time by defining a cubic Bezier curve.

Changing the X and Y values of each control point will achieve radically different curves, giving the animation a radically different feel. For example, if the first control point is in the lower right corner, the animation starts slowly. If it’s in the upper left corner, the animation will be fast at the beginning. Conversely, if the second control point is in the lower right corner of the grid, the animation gets faster at the end; In the upper left corner, the animation will slow down at the end.

/ / sampletransition: transform 500ms cubic-bezier(0.465.0.183.0.153.0.946);
Copy the code

Design animation (asymmetric animation timing)

(Asymmetrical animation timing) allows you to express your personality while quickly responding to user interactions, thereby enhancing the user experience. It also contrasts feelings and makes the interface more visually appealing.

The general rule of thumb is:

  • For UI animations triggered by user interaction, such as view changes or display elements, use fast preludes (short duration) and slow endings (long duration).
  • For UI animations triggered by code, such as errors or modal views, use a slow prelude (long duration) and a fast ending (short duration).

Animation performance

Keep your animations at 60fps when setting them up, as any stalling or pauses will draw the user’s attention and negatively affect their experience.

  • Make sure you understand the effect on the CSS animation of the specified property Settings and that it does not cause performance problems.
  • Changing the structure of a page or triggering a drawing animation is very resource-intensive and should reduce redrawing and rearranging
  • If possible, just change the opacity and transform properties
  • Use the will-change property in the animation to specify the properties that might animate to ensure that the browser knows what you intend to animate.

Do not overuse will-change, because overuse may cause the browser to waste resources, which may cause other performance problems

The attached

  • CSS Triggers: See which CSS property changes will cause the browser to redraw/rearrange/compose CSS Triggers
  • easings.net/cn: Check out easing.net