애니메이션을 구현하는 방법은 크게 6가지가 있습니다. Javascript는 애니메이션, SVG(Scalable Vector Graphics) 애니메이션, CSS 전환, CSS3 애니메이션, Canvas 애니메이션, requestAnimationFrame을 직접 구현합니다.
<!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+'px'; left++; } else { clearInterval(timer); } },16);</script></body></html>
단점: Javascript를 통해 애니메이션을 구현하면 일반적으로 페이지 리플로우 및 다시 그리기가 자주 발생하여 성능이 소모됩니다.
상식적으로 요소의 위치를 변경하면 재배열이 발생하게 됩니다. 왜 위 그림에 표시된 이미지는 모두 다시 그려지나요? 그 이유는 절대 위치 지정으로 인해 새 레이어가 생성되고 이 레이어에는 현재 요소만 있으므로 다시 그려지기만 하고 재배열되지는 않기 때문입니다. 이는 또한 동일한 레이어에서 요소 수가 적을 때 재배치 성능이 더 좋고 속도가 더 빠르다는 것을 알려줍니다.
<!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('class','right'); },500);</script></body></html>
왜 변환이 다시 그리기를 트리거하지 않습니까? 간단히 말해서 변환 애니메이션은 GPU에 의해 제어되고 하드웨어 가속을 지원하며 소프트웨어 렌더링이 필요하지 않습니다.
하드웨어 가속 원리
브라우저가 페이지 문서를 받은 후 문서의 마크업 언어를 DOM 트리로 구문 분석합니다. DOM 트리와 CSS가 결합되어 브라우저가 페이지를 빌드할 수 있는 렌더링 트리를 형성합니다. 렌더링 트리에는 많은 수의 렌더링 요소가 포함되어 있으며 각 렌더링 요소는 GPU에 로드되어 렌더링 텍스처를 형성하며 결국 이러한 요소는 다시 그려지지 않습니다. 변환을 사용하는 레이어는 독립적인 합성 프로세스에 의해 처리됩니다.
<!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>
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!