4. 프로젝트 똥파리 - 똥파리 날라다니게 하기

서론

에셋을 화면에 불러와서 날라니는 CSS 애니메이션 까지 적용했는데

움직이지를 않으니까 뭔가 썰렁하네요

CSS variable 하고  트랜스폼 프로퍼티를 이용해서 똥파리가 날라다니는 효과를 추가할게요.

 

CSS 부분

:root {
  --x: 0;
  --y: 0;
  --facing: -1;
}

CSS파일 최상단에 위에 내용을 추가합니다.

똥파리의 좌표값과 바라보는 방향을 나타냅니다.

 

.control {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  z-index: 999;
  pointer-events: none;
  transform: translate(var(--x), var(--y)) scaleX(var(--facing));
}

 

제일 마지막줄 트랜스폼만 추가해줬습니다

자바스크립트로 넘어가서 requestAnimationFrame() 함수를 이용해 애니메이션효과를 추가하겠습니다.

 

JS 부분

const bee = document.getElementById("bee");

엘리멘트 레퍼렌스부터 찾아줍니다.

 

const vector2d = { x: 0, y: 0 };
let stepX = 2;
let stepY = 2;

좌표값을 저장할 변수와 프레임당 이동거리를 나타내줄 변수입니다.

 

function fly() {
  vector2d.x += stepX;
  vector2d.y += stepY;
  if (window.innerWidth < vector2d.x) {
    bee.style.setProperty("--facing", `1`);
    stepX = -2;
  } else if (vector2d.x < 0) {
    bee.style.setProperty("--facing", `-1`);
    stepX = 2;
  }

  if (window.innerHeight < vector2d.y) {
    stepY = -2;
  } else if (vector2d.y < 0) {
    stepY = 2;
  }

  bee.style.setProperty("--x", `${vector2d.x}px`);
  bee.style.setProperty("--y", `${vector2d.y}px`);
  window.requestAnimationFrame(fly);
}

window.requestAnimationFrame(fly);

 

fly()함수가 실행될때마다 step의 값만큼 vector2d값이 변하고

만약 화면의 크기를 벗어날경우 step값의 부호를 바꿔줘서 방향을 틀어줍니다

그리고 좌표값을 css variable에 적용시켜주면 끝.

 

마무리는 requestAnimationFrame 함수를 불러주면 끝.

 

이미지스파이트가 훨훨 날라다니는 모습입니다.

다음시간에는 소리를 추가해주고 이프로젝트의 마지막이 될것 같습니다.