This article is produced by a member of YFE, the front end team of yuewen_YFE, please respect the original, reprint please contact the public number (ID: yuewen_YFE) for authorization, and indicate the author, source and link.

The four talents of Web dynamic effect mainly refer to the following four:

  1. CSS 3 animation
  2. Web animation
  3. SVG SMIL
  4. Canvas and other core drawing

Let’s take a look at them one by one.

First, CSS3 animation

Specify keyframes in CSS for animation effects, such as a common fade effect:

.fadeIn {
  animation: fadeIn .2s both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }}Copy the code

Basic usage I think you may see many more, not expanded, but can mention some not commonly used points:

  1. CSS3 animation can be paused at any time, if it is really paused, it does not move, using this CSS declaration:

    animation-play-state: paused;
Copy the code

  2. The animation-timing-function property of CSS3 supports cubic bezier() as well as steps(), which can achieve many small and beautiful frame-by-frame animation effects. For example, the effect of Twitter’s Like:

    Put all sequence frame pictures together on one picture, and then display the corresponding picture frame by frame, usually as the background image, and then control background-position to achieve the effect.

    demo

  3. For complex animations, we can decompose the animation and apply it to the ancestor and descendant elements by nested tags, such as the parabolic animation effect shown below:

Second, Web animation

Web Animation API refers to the Web Animation API. In short, CSS3 animation is implemented by JS code. The syntax is as follows:

var myAnimation = element.animate(keyframes, options);
Copy the code

Where keyframes corresponds to the declaration block in @Keyframes in CSS3, and options corresponds to the animation-* property and its value. MyAnimation is an Animation object that contains multiple methods. For example, if we implement an animation with constantly changing transparency, we can do this:

element.animate([
  { opacity: 0 },
  { opacity: 1.offset: 0.4 },
  { opacity: 0}, {duration: 3000.delay: 0.fill: 'forwards'.easing: 'steps(8, end)'.iterations: Infinity
});
Copy the code

The effect is shown below:

The Web Animation API is especially useful for scenarios where the animation parameters are dynamically changing. For compatibility issues, try the following polyfill: web-animation-js

Third, SVG SMIL

SVG SMIL refers to the SVG Synchronous Multimedia Integration Language, which allows you to render various animation effects on the Web directly through XML tags. For example, the following code:

<svg width="320" height="320">
  <g>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">The horse</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0, 160, 160" to="360, 160, 160" repeatCount="indefinite"/>
  </g>
</svg>
Copy the code

The effect is like a screenshot GIF:

SMIL consists of the following five categories of elements:

  • Direct positioning, delay time.
  • Base transition effect.
  • Color animation, compare chicken ribs, use the above element instead.
  • Transform Transform animation.
  • Moving along a particular path.

It even supports adding click actions to trigger animation execution:

<svg id="svg" width="320" height="200">
    <circle id="circle" cx="100" cy="100" r="50"></circle>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">The horse<animate attributeName="x" to="60" begin="circle.click" dur="3s" />
    </text>
</svg>
Copy the code

If you are interested, visit here.

4. Canvas and other core drawing

JS as the engine of the refresh and drawing. This animation effect is achieved by the timer constantly changing visual properties such as position/transparency/transformation of graphic elements. This includes using JS to change the DOM, using JS to change the SVG attribute value, and using JS to refresh the Canvas.

The following knowledge is required to implement animations using the lower-level methods of JS:

  1. Certain JS basic skills

    Complex dynamic effects often involve more cyclic traversal and data processing.

  2. Familiar with API of related technical field

    How to draw a circle, how to change positions, etc.

  3. Know some animation algorithms

    How to move from A to B, we can use tween.js.

  4. Master common curve functions

    Figure to essence is mathematics, the essence of motion is also mathematics. Here’s a good article on trigonometry.

  5. Learn about some of the top frameworks

    The Snap. SVG, greensock, spritejs. 3D: threeJS, Pixi, etc.

For more sharing, please pay attention to the front end team official account of China Literature Group: