>웹 프론트엔드 >JS 튜토리얼 >JS 애니메이션 구현 방법

JS 애니메이션 구현 방법

一个新手
一个新手원래의
2017-09-23 10:33:122139검색

애니메이션을 구현하는 방법은 크게 6가지가 있습니다. Javascript는 애니메이션, SVG(Scalable Vector Graphics) 애니메이션, CSS 전환, CSS3 애니메이션, Canvas 애니메이션, requestAnimationFrame을 직접 구현합니다.

javascript 구현

<!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>

단점: Javascript를 통해 애니메이션을 구현하면 일반적으로 페이지 리플로우 및 다시 그리기가 자주 발생하여 성능이 소모됩니다.
상식적으로 요소의 위치를 ​​변경하면 재배열이 발생하게 됩니다. 왜 위 그림에 표시된 이미지는 모두 다시 그려지나요? 그 이유는 절대 위치 지정으로 인해 새 레이어가 생성되고 이 레이어에는 현재 요소만 있으므로 다시 그려지기만 하고 재배열되지는 않기 때문입니다. 이는 또한 동일한 레이어에서 요소 수가 적을 때 재배치 성능이 더 좋고 속도가 더 빠르다는 것을 알려줍니다.

CSS3 전환

<!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>

왜 변환이 다시 그리기를 트리거하지 않습니까? 간단히 말해서 변환 애니메이션은 GPU에 의해 제어되고 하드웨어 가속을 지원하며 소프트웨어 렌더링이 필요하지 않습니다.

하드웨어 가속 원리
브라우저가 페이지 문서를 받은 후 문서의 마크업 언어를 DOM 트리로 구문 분석합니다. DOM 트리와 CSS가 결합되어 브라우저가 페이지를 빌드할 수 있는 렌더링 트리를 형성합니다. 렌더링 트리에는 많은 수의 렌더링 요소가 포함되어 있으며 각 렌더링 요소는 GPU에 로드되어 렌더링 텍스처를 형성하며 결국 이러한 요소는 다시 그려지지 않습니다. 변환을 사용하는 레이어는 독립적인 합성 프로세스에 의해 처리됩니다.

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>

모든 CSS 속성이 GPU 하드웨어 가속을 실행할 수 있는 것은 아닙니다(GPU의 레이어 속성 변경은 다시 그리기를 실행하지 않습니다). 실제로 다음과 같은 몇 가지 속성만 가능합니다.
transform
opacity
필터

캔버스 애니메이션

<!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>

위 내용은 JS 애니메이션 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.