Home >Web Front-end >JS Tutorial >JS animation implementation method

JS animation implementation method

一个新手Original: 2017-09-23 10:33:122139browse

There are six main ways to implement animation: Javascript directly implements animation, scalable vector graphics (SVG) animation, CSS transition, CSS3 animation, Canvas animation, and requestAnimationFrame.

javascript implementation

<!DOCTYPE html><html><head>
    <style>
        .content{width: 100px;height: 100px;background-color: red;}
    </style></head><body><p class="content"></p><script>
    var ele=document.getElementsByClassName("content")[0];    
    var left=0;    
    let timer=setInterval(function () {
        if(left<window.innerWidth-100){
            ele.style.marginLeft=left+&#39;px&#39;;
            left++;
        } else {
            clearInterval(timer);
        }
    },16);</script></body></html>

Disadvantages: Implementing animation through Javascript usually results in frequent page re-arrangement and redrawing, which consumes performance.
According to common sense, changing the position of elements will cause rearrangement. Why are all the images shown in the above picture redrawn? The reason is that absolute positioning will create a new layer, and there is only the current element on this layer, so it will only be redrawn, not rearranged. This also tells us that in the same layer, when the number of elements is small, the reordering performance is better and the speed will be faster.

CSS3 transition

<!DOCTYPE html><html><head>
    <style>
        .content{            
        width: 100px;            
        height: 100px;            
        background-color: red;            
        transition: all 10s ease-in-out 0s;            
        -webkit-transition: all 10s ease-in-out 0s;            
        margin-left: 0;        
        }
        .right{            
        width: 100px;            
        height: 100px;            
        margin-left: 400px;            
        background-color: blue;        
        }
    </style></head><body><p class="content"></p><script>var timer=setTimeout(function () {
    var content=document.getElementsByClassName("content")[0];
    content.setAttribute(&#39;class&#39;,&#39;right&#39;);
},500);</script></body></html>

Why does transform not trigger repaint? In short, transform animation is controlled by the GPU, supports hardware acceleration, and does not require software rendering.

Hardware Acceleration Principle
After the browser receives the page document, it will parse the markup language in the document into a DOM tree. The DOM tree and CSS are combined to form the rendering tree for the browser to build the page. The rendering tree contains a large number of rendering elements. Each rendering element will be divided into a layer, and each layer will be loaded into the GPU to form a rendering texture. The layer transform in the GPU will not trigger repaint. , eventually these layers using transform will be processed by independent compositor processes.

CSS3 animation

<!DOCTYPE html><html><head>
    <style>
        .content{            
        width: 100px;            
        height: 100px;            
        background-color: red;            
        transition: all 10s ease-in-out 0s;            
        -webkit-transition: all 10s ease-in-out 0s;            
        animation: move 4s infinite;            
        margin-left: 0;        
        }
        @keyframes move {            
        from{                
        margin-left: 0;            
        }
            50%{                
            margin-left: 400px;           
            }
            to{                
            margin-left: 0;            
            }
        }    
        </style></head><body><p class="content"></p></body></html>

Not all CSS properties can trigger GPU hardware acceleration (layer property changes in the GPU will not trigger repaint), in fact Only a few properties are available, such as the following:
transform
opacity
filter

Canvas animation

<!DOCTYPE html><html><head></head><body><canvas id="canvas" width="700" height="500"></canvas><script>
    var canvas=document.getElementById("canvas");    
    var ctx=canvas.getContext("2d");    
    var left=0;    
    var timer=setInterval(function () {
        ctx.clearRect(0,0,700,550);
        ctx.beginPath();
        ctx.fillStyle="#f00";
        ctx.fillRect(left,0,100,100);
        ctx.stroke();        
        if(left>700){
            clearInterval(timer);
        }
        left+=1;
    },16);</script></body></html>

requestAnimationFrame

<!DOCTYPE html><html><head>
    <style>
        p{width: 100px;height: 100px;background-color: red;}
    </style></head><body><p id="box" width="700" height="500"></p><script>
    window.requestAnimationFrame=window.requestAnimationFrame||
            window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;    
            let element=document.getElementById("box");    
            let left=0;
    requestAnimationFrame(step);    
    function step() {
        if(left<window.innerWidth-200){
            left+=1;
            element.style.marginLeft=left+"px";
            requestAnimationFrame(step);
        }
    }</script></body></html>

The above is the detailed content of JS animation implementation method. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to delete files or folders in github remote repositoryNext article：How to delete files or folders in github remote repository

See more