CSS, JS transform / JS requestAnimationFrame - 애니메이션 만들기

웹에서 애니메이션을 만드는 방법은 크게 세 가지가 있다. 각각의 특징에 맞게 선택해서 사용하면 된다.

세 방법 간에 미묘한 차이가 있는데, 찾은 자료가 다 영어고 번역했더니 이상해서 그대로 가져왔다.

 

CSS transform

Use CSS when you have smaller, self-contained states for UI elements.

작은 엘리먼트거나 엘리먼트 자체가 변경되는 경우 css 코드에서 transform을 이용한다.

나는 게임 캐릭터가 반대편을 봐야하는 상황에서 캐릭터에 flip 클래스를 추가하고 flip 클래스의 css 코드에 transform 속성을 작성했다.

 

transform에는 다음과 같은 값들을 넣을 수 있다.

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

 

https://opentutorials.org/course/2418/13684

변형(transform) - 생활코딩

위 링크를 따라가면 각각의 애니메이션을 직접 볼 수 있다.

 

 

JS transform (object.style.transform 형태)

Use JavaScript when you need significant control over your animations.

애니메이션을 세밀하게 제어해야 하는 경우 JS를 사용한다. 엘리먼트를 멈추거나, 속도를 바꾸는 등의 애니메이션을 만드는데 유용하다.

나는 배경을 움직이거나 캐릭터가 쏜 화살의 속도를 정하는데 템플릿 리터럴 `${}`과 함께 사용했다.

 

JS transform이라고 써놨지만 JS의 기능이 아니라 엘리먼트의 CSS transform 속성을 JS로 제어하는 것이기 때문에 들어갈 수 있는 값은 위의 CSS와 동일하다.

object.style.transform = "none | transform-functions | initial | inherit"

이렇게 사용한다.

 

JS requestAnimationFrame

Use requestAnimationFrame directly when you want to orchestrate an entire scene by hand.

전체 장면을 하나하나 만들어 조정하려면 requestAnimationFrame을 사용한다. 전에 크롬 공룡게임 만들기에서 사용했던 메서드다.

 

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하는 방식이다. 리페인트 이전에 실행할 콜백을 인자로 전달해 줘야 한다. 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame을 호출해야 한다.

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋다. 콜백의 수는 보통 1초에 60회지만 일반적으로 대부분의 브라우저에서는 디스플레이 주사율과 일치하게 된다.

 

window.requestAnimationFrame(callback); //window 생략 가능

이렇게 사용한다.

 

/* 예시 */
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);