The animation principles

The animation we usually see is composed of a static picture splicing, we usually use the number of frames to reflect the animation effect is good or bad. Each frame is a still image, and displaying frames in rapid succession creates the illusion of motion. Higher frame rates result in smoother, more realistic animations

The number of Frames is the number of images transmitted in one Second. It is also known as the number of times a graphics processor refreshes Per Second, usually as Frames Per Second.

The process by which a browser renders an animation

All browser rendering animations are divided into the following steps

  1. Create an HTML tree (DOM) from HTML (you can think of it as a big tree with branches branching, each branch branching into smaller, more branches; In HTML trees, each element can be described as a branch, and the children of each element are branches of the branch.)
  2. Create a CSS tree from CSS (CSSOM)
  3. Merge two trees to create a RENDER TRee
  4. Flow of documents, box models, calculating the size and position of text, and color of text, as an artist does a line drawing.
  5. PAINT the border colors, text colors, and shadows, just as an artist paints a line drawing.
  6. According to the cascading relationship, display the picture (flatten the work after the above process and pack it into one thing)

Browser update style steps and update methods

Generally we use JS to update the style, which is the most common way to update the style, generally divided into the following five steps, but depending on the code and browser, the steps may be deleted

  • Execute JS – Update Style – Layout – Paint – Composite

For example

  1. Div.remove () (simply delete the node and recreate it elsewhere after completing the process)
  2. Div. Style. background=’red’ (change the background color so that it skips layout and goes straight to paint)
  3. Div.transform (Pick this element up, move it, and drop it. Style, composite

How do I know which attributes trigger which processes

  • Programmers love to share, there have been all the attributes sorted out, directly click on the reference is good click jump

Animation optimization

  • JS optimization: Use repuestAnimationFrame instead of setTimeout or setLnterVal
  • CSS optimization: Use will-change or translate
  • Daniel sorted out all optimization methods, very detailed click to view

Grammatical attribute

Transform All solutions of the four common functions

The displacement of the translate

  • Translate has three attributes: x, y, and z, where x represents horizontal movement, y represents vertical movement, and Z represents near and far movement, for example
#demo{
    transform:translatex(50px);
}
Copy the code
  • The Z attribute needs to have a viewpoint (the center of three dimensions), and move translate around the viewpoint, for example
#demo{
    transform:translatez(50px);
}
.wrapper{
    perspective:1000px;
}
Copy the code
  • X, y, and z can be used at the same time, separated by commas, or preceded by 3d
#demo{
    transform:translate3d(50px,50px,50px);
}
Copy the code
  • Share a method for absolutely centralizing elements with Translate
#demo{
    width:100px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translatex(50%)translatey(50%)}Copy the code
  • Note that this property must be used with a transition; An inline element does not support deformation and needs to be changed to a block-level element first.

The zoom scale

  • The usage is the same as the displacement element translate, which also supports x and y
  • Note that the border also scales as the element scales
  • This attribute is used less often because of ambiguity

Rotate the rotate

  • This property also has x, y, and z axes. The x axis rotates along the horizontal axis (which looks like scaling), the Y axis is the same as the X axis, and the Z axis rotates clockwise around the center point
  • The usage is the same as the shift element translate
  • Rotation is expressed in degrees, deG in degrees

Tilt skew

  • The usage is the same as the displacement element translate, which also supports x and y
  • It’s like tilting a rectangle into a parallelogram, with x and y axes and degrees

The transition properties

The transition property replenishes the intermediate frame (you just tell it how to start, how to finish, and it will automatically complete the animation)

grammar

  • Transition: attribute name, duration, transition mode, delay (usually we use all to represent all attributes) example
#heart{
transition: xxx all 1s;
}
Copy the code

The transition mode of the transition property

  • I don’t know what the line is.
  • Ease (non-linear)
  • All ways can find relevant information

Matters needing attention

Not all attributes can be transitioned, remember!!

For example, if display: None becomes a block, the transition cannot be performed. In general, use visibility:hidden to convert to: visible

How to use animation and keyframes

keyframes

  • Keyframes declare a keyframe and let the animation style change with it, using @keyframes name {style}. case

    (The left side of the figure is the start and end points, and the right side is the setting of multiple key frames)

animation

The use of animation is to declare the animation in an element after the keyframe is declared to run the animation

#heart{
animation:1.5 s alternate aaa infinite;
}
Copy the code

Elements that can be declared are: Duration transition mode Delay times Direction Fill mode Whether to pause the animation name

  • Duration: s (s) or MS (ms)
  • Transition mode: takes the same value as transition, such as Linear
  • Direction: reverse (return to) | alternate (repeated) | alternate – reverse to return to again and again for the
  • After the filling pattern: recently (stay) | backwards (back)
  • Whether to suspend: paused | running

And finally, oneBeating heartDedicated to everyone


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>* {box-sizing: border-box}
#heart>.left{
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg) translateX(31px);
  bottom: 50px;
  left: -50px;
  border-radius: 50% 0 0 50%;
}
#heart>.right{
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg) translateY(31px);
  bottom: 50px;
  right: -50px;
  border-radius: 50% 50% 0 0;
}
#heart>.bottom{
  background: red;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
}
#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
animation:1.5 s alternate aaa infinite;
}
@keyframes aaa{
  form{
    transform:scale(1)}to{
    transform:scale(1.5)}}</style>
</head>
<body>
  <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Copy the code