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 |