I recently put together a review of animation components implemented a year ago, and also wanted to address the question: “How many ways can the front end animate?” Understanding to share with everyone;

I’ve sorted out the following six ways. Let’s take the simplest example of a div moving a certain distance from left to right and look at the implementation of each of these ways. If there is something wrong, I hope to correct it.

Effect of target

Start:

Results:

A, CCS animation

Here we omit the HTML and go straight to CSS:

.box{ height: 100px; width: 100px; animation: move 5s linear; position: absolute; background: #409EFF; left: 200px; } @keyframes move { 0%{ left: 0; } 100%{ left: 200px; }}Copy the code

Second, the CSS transition

It’s easy to think of writing CSS like this to implement an animation. Yes, the general scenario transition uses is to change styles when you have a state like hover.

.box{
    height: 100px;
    width: 100px;
    left: 0;
    position: absolute;
    background: #409EFF;
    transition: 5s linear;
}
.box:hover{
    left: 200px;
}
Copy the code

However, the above method does not meet our target requirements, so we modify it slightly:

<style>
    .box{
        height: 100px;
        width: 100px;
        left: 0;
        position: absolute;
        background: #409EFF;
        transition: 5s linear;
    }
    .target{
        left: 200px;
    }
</style>
<script>
    window.onload = ()=>{
        const box = document.getElementsByClassName("box")[0];
        box.className = "target box";
    };
</script>
Copy the code

SetInterval & setTimeout

Here, the method of using js timer alone is classified as follows:

setInterval(move, 10);
const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
    if (n>=200) {
        return
    }
    box.style.left = n + 1 + "px";
    n += 1;
}
Copy the code
const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
    if (n>=200) {
        return
    }
    box.style.left = n + 1 + "px";
    n += 1;
    setTimeout(move,10);
}
move();
Copy the code

Four, requestAnimationFrame

const box = document.getElementsByClassName("box")[0];
let n = 0;
function move() {
    if (n>=200) {
        return
    }
    box.style.left = n + 1 + "px";
    n += 1;
    requestAnimationFrame(move);
}
move();
Copy the code

Five, the Canvas

Canvas can only be manipulated and drawn by JS. In fact, this method is also the way of JS to realize animation, but what moves is not DOM elements, but canvas display.

<body> <canvas id="canvas" ></canvas> </body> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ,0,300,100 CTX. ClearRect (0); ctx.fillStyle = "#409EFF"; ,0,100,100 CTX. FillRect (0); let n = 0; function move() { if (n >= 200) { return } ctx.clearRect(0, 0, 300, 100); ctx.fillRect(n+1, 0, 100, 100); n += 1; requestAnimationFrame(move); } move(); </script>Copy the code

Six, SVG

Using SVG, you’ll find very little code;

<svg>
    <Rect x="200" y="0" width="100" height="100" fill="#409EFF" >
        <animate attributeName="x" from="0" to="200" dur="5"/>
    </Rect>
</svg>
Copy the code

conclusion

We only put forward the implementation scheme above, there is no harm without comparison, then we will compare the advantages and disadvantages of various methods and suitable scenarios.

methods advantage disadvantages scenario
css animation Keyframe customizable animation compatibility Slightly more complicated animation,
css transition Written in simple inflexible A simple animation of an element as its state changes
setInterval & setTimeout Good compatibility Caton frame drop Css3 is not supported
requestAnimationFrame Flexible use of JS compatibility It’s a timer optimization
Canvas Dom is small and flexible Js control code is relatively complex Complex animation with many elements
SVG Less code Deformation animations are not supported Often used to change their own properties such as position animation