Web Animation

Animation 구현

웹사이트의 애니메이션 구현은 Javascript와 CSS를 통해 이루어집니다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식은 CSS의 transition과 transform 속성을 사용해 구현가능합니다. 또한, 이 두 속성은 자바스크립트보다 더 빠른 성능을 보장하며 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다.

 

FPS( Frame per second)

FPS는 1초당 화면에 표현할 수 있는 정지화면(Frame)수입니다. 매끄러운 애니메이션은 보통 60fps 입니다. 16.666 ms 간격으로 frame생성이 필요합니다. (1000ms/60fps = 16.666ms)

 

JavaScript 애니메이션

자바스크립트로 애니메이션을 구현하려면, 아래와 같이 규칙적으로 반복하는 기능을 가진 함수를 통해 구현할 수 있습니다.

• setInterval
• setTimeout
• requestAnimationframe
• Animations API

1. setInterval 함수

일정한 시간 간격으로 작업을 수행하기 위해서 사용. clearInterval() 함수를 사용하여 중지할 수 있습니다. 예제코드는 아래와 같습니다.

runAlert = setInterval(function() {
	alert("알림창 뜹니다.");
}, 3000);

clearInterval(runAlert);

※ 지연문제 발생가능

setInterval 지연문제 발생 (출처 - https://www.edwith.org/boostcourse-web/lecture/16752/)

위의 그림과 같이 제때 일어나야 할 이벤트 콜백이 지연되고 없어지는 것을 확인 할 수있습니다. setInterval 사용한다고 해서 정해진 시간 안에 함수가 정상적으로 실행된다는 보장이 없어 일반적으로 애니메이션 구현시 해당 함수를 사용하지 않습니다.

2. setTimeout 함수

일정 시간 후 작업을 한번 실행하며 재귀적 호출을 사용하여 작업을 반복합니다. setInterval과는 달리 지정된 시간을 기다린 후 작업을 수행하고 다시 일정한 시간을 기다린 후 작업을 수행합니다. clearTimeout()을 사용해 작업을 중지할수 있습니다.

let count = 0;
function animate() {
	//arror함수 사용
	setTimeout(() => {
    		if(count >= 20) return;
    		console.log('현재시각은', new Date());
    		count++;
    		animate();
  	},500);
}
animate();

setTimeout도 setInterval과 동일한 이유로 제때에 콜백함수가 실행되지 않을 수 있으나, setTimeout은 매 순간 timeout을 조절할 수 있는 코드구현으로 컨트롤 가능한 부분이 있어 setInterval과는 큰 차이가 있습니다.

clearInterval(), clearTimeout()

실행중인 작업을 중지시키는 것이 아닌, 지정된 작업은 모두 실행되고 다음 작업 스케줄이 중지 시킵니다.

 

3. requestAnimationframe 함수

setInterval이나 setTimeout 함수는 애니메이션을 위해 생겨난 기능이 아니기에 이 두함수를 이용해 애니메이션을 구현하면 약간의 딜레이가 발생하는 문제가 있습니다. 애니메이션을 구현하기 위해서는 끊임없이 부드럽게 처리가 되어야 하는데, 이를 위해 requestAnimationframe 함수를 사용합니다.

 

requestAnimationframe 을 사용해 최적화된 타이밍에 animation 관련 함수가 실행되도록 해봅시다.

 

See the Pen move box by So-Jeong (@sojeong1010) on CodePen.

var count = 0;
var el = document.querySelector(".outside");
el.style.left = "0px";

function run () {
   if(count > 30) {
    return;
   }
   count = count + 1; 
   el.style.left =  parseInt(el.style.left) + count + "px";
   requestAnimationFrame(run);
}

el.addEventListener("click", function (evt){
   run();
});

안녕하세요박스 클릭시 left 속성값이 1씩 증가하며 오른쪽으로 이동하는 코드입니다.

run()함수 안에서 count 값이 30이 되기 까지 requestAnumationFrame(run) 메소드를 이용해 반복 합니다.

 

 

CSS 애니메이션

css의 transition과 transform을 활용하는 것이 자바스크립트로 구현하는 것보다 더 빠른 애니메이션, 즉 끊김이 없는 애니메이션을 구현할 수 있습니다. 특히 모바일 웹에서는 transform을 사용한 element 조작을 많이 이용하여 애니메이션을 구현합니다.

1. transition : 부드럽고 점진적으로 변화할수 있도록 주는 속성

transition에는 다음과 같이 4가지 속성값을 줄수 있습니다.

transition: [property] [duration] [timing-function] [delay]

property (필수값) : css 속성 지정하는 값으로, 개별속성(background-color) 혹은 모든속성(all) 으로 표현할수있다. 이곳에 나열한 속성만 트랜지션 하는 동안 움직입니다.

div {
  transition-property: all;
  transition-property: transform;
}

duration (필수값) :  트랜지션이 일어나는 지속시간을 명시합니다. 초 혹은 밀리초 단위로 지정가능합니다.

div {
  transition: all 3s;
}

timing-function : 속성의 중간값을 계산하는 방법을 정의합니다. 디폴트값은 ease 이며,  linear, ease, ease-in, ease-out, and ease-in-out 이런식으로 값을 지정할 수 있습니다.

div {
  transition: all 3s linear;
}

delay: 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. 

div {
  transition: all 3s 1s;
}

 

2. transform : 한 상태에서 다른 상태로 요소를 변경하는 것.

rotate, move, skew, scale 4가지의 속성값을 줄 수 있습니다.

 

scale : element의 속성값을 키우거나 줄일수 있습니다.

div {
  transition: transform 1s;
}

div:hover {
  transform: scale(2);
}

rotate: 지정된 값만큼 시계 혹은 반시계 방향으로 회전한다. 양수는 시계방향 음수는 반시계방향으로 회전합니다.

div {
  transition: transform 1s;
}

div:hover {
  transform: rotate(1080deg);
}

translate: 왼쪽/오른쪽, 위/아래 로 이동합니다. 이동은 X (수평) Y (수직) 축에 지정된 매개 변수를 기반으로합니다. 양의 X 값은 요소를 오른쪽으로 이동하고 음의 X는 요소를 왼쪽으로 이동합니다. Y 값이 양수이면 요소가 아래쪽으로 이동하고 음수 Y 값이 위쪽으로 이동합니다. 이 예에서 요소는 오른쪽으로 20 픽셀, 아래로 20 픽셀로 이동합니다.

div {
  transition: transform 1s;
}

div:hover {
  transform: translate(20px, 20px);
}

skew : 요소는 X 및 Y 축에 대해 주어진 값을 기준으로 한 방향 또는 다른 방향으로 기울어집니다

div {
  transition: transform 1s;
}

div:hover {
  transform: skewX(-20px);
}

---

출처

https://offbyone.tistory.com/241

자바스크립트 주기적인 실행(setInterval, setTimeout)

https://thoughtbot.com/blog/transitions-and-transforms

CSS Transitions and Transforms for Beginners

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions