First, front-end animation classification

1. The CSS animations

  1. CSS shape Transform – Transform API

Only elements located by the box model can be transformed. As a rule of thumb, the element is positioned by the box model if it has display: block

  • Translate (move)

    The transformation consists of two dimensional vectors, the first and second elements representing how much is moved along the X and Y axes, respectively

  • Scale

  • Rotate

    transform: rotate(30deg);

  • Skew

    transform: skew(30deg, 10deg);

    The parameter represents the tilt Angle, in deg

    A parameter: represents the horizontal tilt Angle;

    With two parameters: the first parameter represents the horizontal tilt Angle, and the second parameter represents the vertical tilt Angle.

    The calculation method of skew tilt Angle is not intuitive on the surface. Here is an example drawn by a Certain University. First of all, it should be explained that the transform-Origin is the default origin of skew and is the center point of the object

  1. CSS Transition API, Keyframe

  • Transition API (Transition Animation)

    Triggered when the DOM has finished loading or when the class has changed

    • Transition-property: Specifies which CSS properties are used for transitions.
    • Transition-duration: specifies the transition duration.
    • Transition-timing-function: Specifies a function that defines how the property value changes.
    • Transition-delay: Specifies the delay, the length of time between the start of a property change and the start of a transition.

  • Keyframe implements animation:

    The @keyframes at-rule controls intermediate steps in a CSS animation sequence by styling keyframes (or waypoints) in the animation sequence. In contrast to Transition, keyframes control the middle steps of an animation sequence.

  • CSS implements frame-by-frame animation

  1. Advantages: simple and efficient declarative independent of the main thread, using hardware acceleration (GPU) to simply control the play and pause of keyFrame Animation. Disadvantages: Can’t dynamically modify or define animation content; Different animations cannot be synchronized; Multiple animations cannot stack on top of each other. Application scenario: simple H5 campaign/publicity page. Recommended libraries: animation. CSS, shake. CSS, etc.

2. SVG implements animation

SVG is a vector graphic description language based on XML. It can cooperate well with CSS and JS. There are usually three ways to realize SVG animation: SMIL, JS and CSS

  1. SML:Synchronized Multimedia Integration Language(Synchronous Multimedia Integration Language)
  2. JS
  • Text deformation Path implements writing animation
  • Stroke-dashoffset and stroke-dasharray are used together to achieve stroke effect. Stroke – dasharray: | (path) need to fill the stroke – dashoffset: | (dash pattern starting position offset)
  • example

  1. CSS

    Here we mainly use animation, Transform and Transition to achieve animation, which is simpler and more convenient than JS.

    Advantages: Animation through vector elements, different screens can get better clarity. Can achieve some special effects: stroke, deformation, ink diffusion and so on.

    Disadvantages: The usage mode is complex, and excessive use may cause performance problems.

3. Js to achieve animation

4. How do you choose

  1. CSS advantages:
  • The browser optimizes CSS3 animations to give them a slight performance advantage (create a new layer to run the animations).
  • The code for CSS3 animation is relatively simple.

CSS faults:

  • Not flexible enough in animation controls.
  • Poor compatibility.
  • Some animations cannot be implemented (parallax effect, scroll animation)
  1. JS advantages:
  • Flexible use, also in the definition of an animation keyframe sequence, can adjust a number of parameters according to different conditions (JS animation function) to change the animation mode. (CSS can have a lot of code redundancy)
  • Compared with CSS keyframe granularity is coarser, CSS itself time function is limited, this JS can make up.
  • CSS is difficult to do more than two state transitions (either using keyframes, or requiring multiple animation delays to trigger, and then looping or pausing the animation in reverse order, etc.).

JS faults:

  • When using JS runtime, the tuning aspect is not as simple as CSS, CSS tuning method is fixed.
  • For browsers with poor performance and compatibility, CSS can be elegantly degraded, while JS requires additional code compatibility.
  1. Use CSS when you have small independent states for UI elements.

Use JavaScript when you need a lot of control over your animation.

SVG can be used in specific scenarios, and SVG changes can be manipulated using CSS or JS.

Two, to achieve front-end animation

1. Js animation function encapsulation

  1. Function selection: requestAnimationFrame vs setTimeout vs setInterval

    JavaScript animations should go through requestAnimationFrame. This built-in method allows you to set the callback function to run when the browser is ready to redraw. Usually this is quick, but the exact time depends on the browser.

    When the page closes, there is no redraw at all, so the callback does not run: the animation is paused, and no resources are consumed. link

2. Simple animations

  1. Uniform motion

  2. The force of gravity

  3. Friction (uniform deceleration)

  4. Flat throw (x axis uniform speed, Y axis acceleration)

  5. Rotation + flat throw (x axis uniform speed, Y axis acceleration, rotation uniform speed)

  6. Bow drawing (X-axis uniform speed + Y-axis initial speed negative uniform acceleration)

  7. Bounce a ball

  • Use the slow function implementation

  • Automatic attenuation implementation

3. Complex animation

Iii. Relevant practices

1. Animation resources

  1. Example of animated code: codepen.com

codesandbox.com

Design website: Dribbble.com

Animation tools (generally used by UE and UI students) :

2D: Animate CC, After Effects

3D: Cinema 4D, Blender, Autodesk Maya

  1. SVG:
  • Snap.svg – a JavaScript library for modern SVG graphics.
  • Svg.js – a lightweight library for manipulating and animating Svg.

Js:

  • GSAP – JavaScript animation library.
  • TweenJS – a simple but powerful JavaScript tween/animation library. Part of the CreateJS library suite.
  • Velocity – Accelerated JavaScript animation.

CSS:

  • Animate. CSS – A cross-browser library for CSS animations. As easy to use as a simple thing.
  1. Canvas:
  • EaselJS – EaselJS is a library for building high performance interactive 2D content in HTML5.
  • Fabric.js – JavaScript canvas library that supports animation.
  • Paperjs – Vector Graphic Scripts for the Swiss Army Knife – Scriptographer using HTML5
  • Canvas is ported to JavaScript and browsers.
  • Pixijs – Create beautiful digital content using the fastest and most flexible 2D WebGL renderer.

2. Work practice

Animation Frames -> Code & Design File -> Code conversion

  • Need to completely front-end own development

Use an already packaged animation library and choose between development costs and experience.

  • Design is not very free

Sharpness, picture format can be specified, animation as much as possible to give a hint or similar case reference.

Request Sprite resources, resources, etc. Need help compression.

  • Sufficient design resources

Required design to export Lottie format files.

3. Optimization of animation

  1. User Experience perspective

  2. Performance point of view