JS 애니메이션 구현 방법
- 一个新手원래의
- 2017-09-23 10:33:122130검색
애니메이션을 구현하는 방법은 크게 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+'px';
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('class','right');
},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 중국어 웹사이트의 기타 관련 기사를 참조하세요!