The introduction

I have not summarized before how to realize the animation learned from the front end, so this article helps me summarize myself.

The basic concept

Before we learn about animation, we need to understand the basic concepts of animation.

  • Frame: A frame is the smallest unit of animation. A frame is an image. Successive frames form an animation.
  • Frames: The number of frames is the number of images transmitted in 1 second. FPS is usually used. The browser 60FPS is said to be the best.
  • Frame duration: The duration of each still frame, usually in ms(ms). 1000/60 = 16.666 ms

implementation

Through, we front-end animation has the following ways:

  • Js: Use timer (setTimeout, setlterVal) to change element styles at intervals. Or use requestAnimationFrame
  • Css3: Tranistion,animation and Transform
  • Html5: Drawing methods provided by H5 (Canvas, WebGL, SVG)

requestAnimationFrame

RequestAnimation is a setTimeout for an animation, but requestAnimationFrame executes callback functions based on the browser’s built-in refresh frequency, which is the best way for the browser to implement animation.

<div id="demo" style="position: absolute; width: 100px; height: 100px; background-color: #ccc; left: 0; top: 0;" > </div> <script> var demo = document.getElementById('demo'); function reader() { demo.style.left = parseInt(demo.style.left) + 100 + 'px'; } var requestID = requestAnimationFrame(function() {reader(); If (parseInt(demo.style.left) > 1300) demo.style.left = 0; requestAnimationFrame(arguments.callee); }) </script>Copy the code

Transition

The transition property in the CSS allows block-level elements to change smoothly over a specified period of time.

transition : property duration timing-function delay
Copy the code

Specific attribute values are described as follows:

value describe
transition-property Specifies the name of the CSS property that sets the transition effect. (none/all/property)
transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function The speed curve specifying the speed effect
transition-delay Define when transition effects begin. 
<style>
    .demo {
        width: 100px;
        height: 100px;
        background-color: blue;
        transition: width 1s ease ;
    }
    .demo:hover {
        width: 300px;
    }
</style>
<div class="demo"></div>
Copy the code

animation

Like Transition,CSS also provides an animation property, but unlike Transition, animation works on the element itself rather than the style property, and can be more powerful with the concept of keyframes.

animation : name duration timing-function delay iteration-count direction
Copy the code
value describe
animation-name Specifies the name of the KeyFrame to bind to the selector
animation-duration Specifies how long it takes to complete the animation, in seconds or milliseconds
animation-timing-function Specifies the speed curve of the animation.
animation-delay Specifies the delay before the animation begins
animation-iteration-count Specifies how many times an animation should play
animation-direction Specifies whether the animation should take turns playing backwards. (normal,alternate) 
.demo {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: mymove 5s infinite;
}

@keyframes mymove {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}
<div class="demo"></div>
Copy the code