2019. 5. 13. 20:01ㆍJavaScript
웹 UI에 애미메이션 처리
CSS
- transition, transform속성으로 대부분 구현 가능합니다.
- JS보다 더 빠른 성능을 자랑합니다.
- 모바일 웹에서는 CSS를 사용하는 게 더 빠릅니다.
- 간단하고 규칙적인 애니메이션은 CSS로 보통 구현합니다.
JavaScript
- setTimeout()같은 메소드를 이용해 구현합니다.
- 세밀한 조작이 필요할 때는 JS로 구현해야할 필요도 있다.
=> 성능을 통해서는 대체로 CSS로 변경하는 게 빠르지만 적절하게 선택해서 애니메이션 처리 방을 찾는 과정이 필요할 것 같습니다
FPS (frame per second)?
FPS는 초당 화면에 표현할 수 있는 정지화면(frame)입니다.
보통 매끄러운 애니메이션은 60fps입니다. (1초에 60프레임..)
JavaScript로 애니메이션 구현방법
JS로 애니메이션 처리 --> 규칙적인 처리를 하도록 구현하면 됩니다. 다음과 같은 방법들이 있습니다.
- setInterval
- setTimeout
- requestAnimationframe
- Animations API
<주기적인 작업 구현>
setInterval
일정한 시간 간격으로 작업을 실행합니다. 주기적은 작업을 하는데 그 작업이 시간보다 오래 걸릴 경우 콜백이 지연되고 사라질 수 있습니다. 따라서 애니메이션 구현시 setInterval보단 setTimeout으로!!
var Interval = window.setInterval(function, time);
// 변수 Interval 은 clearInterval을 통해서 setInterval()을 종료시킵니다.
// window.clearInterval(setInterval)로 강제 종료
// time 간격으로 function 실행!
setTimeout
작업 사이의 간격을 일정하게 줍니다.
재귀적으로 호출함으로써 애니메이션을 구현할 수 있습니다.
var timeout = window.setTimeout(function, time);
// 변수 timeout은 clearTimeout을 통해 setTimeout을 종료시킵니다.
// time간격으로 funciton을 한 번 실행합니다.
// window.clearTimeout(timeout); 으로 강제 종료할 수 있습니다.
reqeustAnimationframe
앞서 setTimeout도 사실 주기적인 실행을 위한 방법이고(애니메이션을 위해서 생긴 메소드가 X) 연속적인 함수 호출로 애니메이션을 구현할 때 딜레이가 발생할 수 있습니다..
애니메이션은 끊기지 않고 부드럽게 처리해야하는데, 다행히 브라우저에서 애니메이션 구현을 위한 메서드 reqeustAnimationframe을 제공해줍니다!
svg나 canvas 및 그래픽스로 웹상에 복잡한 도형을 만들어 움직이는 애니메이션을 줄 때는 이 requestAnimationframe가 유용하게 쓰일 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outside{
position: relative;
background-color: #ff0eef;
width: 100px;
}
</style>
</head>
<body>
<div class="outside">내 최애 과일은..</div>
<script>
var count = 0;
var el = document.querySelector(".outside") ;
el.style.left = "0px"; //default값으로 설정
function run(){
if(count>40){ //count가 40을 넘으면 return
return
}
count += 2 // 2px씩 증가.
el.style.left = parseInt(el.style.left) + count + "px";
console.log(el.style.left);
requestAnimationFrame(run);
// reqeustAnimationFrame()함수를 통해서 원하는 함수를 인자로 넣어준다.
// 브라우저는 인자로 받은 그 비동기 함수가 실행될 적절한 타이밍에 실행시켜줌.
}
requestAnimationFrame(run);
</script>
</body>
</html>
[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] HTML templating (0) | 2019.05.15 |
|---|---|
| [JavaScript] event.target을 이용한 event delegation(이벤트 위임)과 이벤트 버블링 (0) | 2019.05.15 |
| [JavaScript] XmlHttpRequest을 이용한 ajax (Asynchronous Javascript And XML) (0) | 2019.05.11 |
| [JavaScript] 자바스크립트 객체(Object) (0) | 2019.05.08 |
| [JavaScript] Array정리 (0) | 2019.05.08 |