JS animation implementation method-JS Tutorial-php.cn

JS animation implementation method

一个新手

Release： 2017-09-23 10:33:12

Original

2131 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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