[20일차] 기본 애니메이션 효과 주기

1. 애니메이션 효과란?

애니메이션은 HTML 요소의 스타일 속성을 시간에 따라 점진적으로 변경하는 것을 의미합니다. 이를 통해 웹 페이지에 시각적 효과를 추가할 수 있습니다.

예를 들어:

박스가 화면에서 움직이는 효과
버튼이 색깔을 천천히 변화시키는 효과
이미지가 확대되거나 축소되는 효과

2. 자바스크립트를 활용한 애니메이션 기초

2.1 `setInterval`과 `setTimeout` 활용

자바스크립트에서 애니메이션은 주로 setInterval이나 setTimeout을 사용하여 특정 시간 간격으로 스타일을 업데이트함으로써 구현됩니다.

예시: 박스를 오른쪽으로 이동시키기 (setInterval 이용)

const box = document.querySelector("#box");
const moveBtn = document.querySelector("#moveBtn");

moveBtn.addEventListener("click", () => {
  let position = 0;

  const interval = setInterval(() => {
    position += 5;
    box.style.left = position + "px";

    if (position >= 300) {
      clearInterval(interval); // 300px에 도달하면 애니메이션 정지
    }
  }, 50); // 50ms 간격으로 실행
});

예시: 박스를 오른쪽으로 이동시키기(setTimeout 이용)

const box = document.querySelector("#box");
const moveBtn = document.querySelector("#moveBtn");

moveBtn.addEventListener("click", () => {
  let position = 0;

  function move() {
    position += 5;
    box.style.left = position + "px";

    if (position < 300) {
      setTimeout(move, 50); // 50ms 후에 다시 실행
    }
  }

  move();
});

예시: 박스를 오른쪽으로 이동시키기(requestAnimationFrame 이용)

let position = 0;
const box = document.querySelector("#box");

function moveBox() {
  position += 5; // 박스가 오른쪽으로 2px씩 이동
  box.style.left = position + "px";
  if (position < 300) {
    requestAnimationFrame(moveBox); // 부드러운 애니메이션을 위해 requestAnimationFrame 사용
  }
}

moveBox();

2.2 CSS와 자바스크립트 활용

CSS의 transition 속성을 활용하면 애니메이션 효과를 더 쉽게 구현할 수 있습니다.

3. 실습: 박스 이동 애니메이션

아래는 클릭하면 박스가 오른쪽으로 이동하는 애니메이션을 구현하는 예제입니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>박스 이동 애니메이션</title>
  <style>
    body {
      text-align: center;
      margin: 50px;
    }
    #box {
      position: relative;
      width: 50px;
      height: 50px;
      background-color: lightblue;
    }
    button {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>박스를 오른쪽으로 이동시키기</h1>
  <div id="box"></div>
  <button id="moveBtn">박스 이동</button>

  <script src="script.js"></script>
</body>
</html>

JavaScript 코드 (script.js)

const box = document.querySelector("#box");
const moveBtn = document.querySelector("#moveBtn");

moveBtn.addEventListener("click", () => {
  let position = 0;

  function move() {
    position += 5; // 5px씩 이동
    box.style.left = position + "px";

    if (position < 300) {
      requestAnimationFrame(move); // requestAnimationFrame으로 부드러운 애니메이션 실행
    }
  }

  move();
});

- 3가지 방법(setInterval, setTimeout, requestAnimationFrame) 중 requestAnimationFrame함수가 부드럽게 움직이는 듯합니다. 이동 px, interval에 조정 등을 하면 비슷하지 않을까 생각이 들기도 합니다.

4. 추가 예제: 색상 변경 애니메이션

버튼을 클릭할 때 배경색이 점진적으로 변화하는 애니메이션을 만들어봅니다. 3번 실습한 코드 중 버튼 밑에 HTML 코드를 붙여 넣기 합니다. JavaScript 위의 코드 마지막 줄에 전체 아래 JavaScript 코드를 붙여넣기 하고 저장합니다.

HTML 코드

<h1>배경색 변경 애니메이션</h1>
<div id="colorBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>
<button id="colorBtn">색상 변경</button>

JavaScript 코드

const colorBox = document.querySelector("#colorBox");
const colorBtn = document.querySelector("#colorBtn");

colorBtn.addEventListener("click", () => {
  let hue = 0;

  function changeColor() {
    hue += 5; // 색상 변화를 위해 5씩 증가
    colorBox.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;

    if (hue < 360) {
      requestAnimationFrame(changeColor);
    }
  }

  changeColor();
});

애니메이션이라 캡처한 사진에는 나타나지 않지만, 버튼을 누르면 박스가 오른쪽으로 부드럽게 이동하고 색상이 빠르게 변하는 것을 확인할 수 있습니다.

5. 연습 문제

문제 1

화면에 있는 사각형을 클릭하면 사각형이 아래로 떨어지는 애니메이션을 만들어보세요.

문제 2

마우스를 올릴 때 박스가 점점 커지고, 마우스를 치우면 다시 원래 크기로 돌아가는 애니메이션을 구현해 보세요.

6. 정리 및 다음 단계

오늘은 자바스크립트를 사용하여 간단한 애니메이션 효과를 구현하는 방법을 배웠습니다. 다음 단계에서는 더 복잡한 애니메이션 라이브러리(예: GreenSock, Anime.js)를 사용해 보세요.

연습 문제 답안

문제 1 답

const fallingBox = document.querySelector("#fallingBox");

fallingBox.addEventListener("click", () => {
  let position = 0;

  function fall() {
    position += 5; // 아래로 5px씩 이동
    fallingBox.style.top = position + "px";

    if (position < 300) {
      requestAnimationFrame(fall);
    }
  }

  fall();
});

문제 2 답

const hoverBox = document.querySelector("#hoverBox");

hoverBox.addEventListener("mouseover", () => {
  hoverBox.style.transition = "transform 0.3s";
  hoverBox.style.transform = "scale(1.5)";
});

hoverBox.addEventListener("mouseout", () => {
  hoverBox.style.transform = "scale(1)";
});

'Programming > Javascript' 카테고리의 다른 글

[21일차] JavaScript 프로젝트 - 간단한 웹 앱 만들기 (To-Do List) -기본 마지막 편 (2)	2024.11.27
[19일차] JavaScript로 스타일 변경하기 (CSS 조작) (0)	2024.11.25
[18일차] 간단한 입력 폼 만들기 (HTML과 JS로) (0)	2024.11.24
[17일차] 이벤트 처리와 이벤트 리스너 (2)	2024.11.23
[16일차] HTML 요소 선택 및 수정 (document.querySelector 등) (0)	2024.11.22

Utilities for IT life

[20일차] 기본 애니메이션 효과 주기

목차

1. 애니메이션 효과란?

2. 자바스크립트를 활용한 애니메이션 기초

2.1 `setInterval`과 `setTimeout` 활용

예시: 박스를 오른쪽으로 이동시키기 (setInterval 이용)

예시: 박스를 오른쪽으로 이동시키기(setTimeout 이용)

예시: 박스를 오른쪽으로 이동시키기(requestAnimationFrame 이용)

2.2 CSS와 자바스크립트 활용

3. 실습: 박스 이동 애니메이션

HTML 코드

JavaScript 코드 (script.js)

4. 추가 예제: 색상 변경 애니메이션

HTML 코드

JavaScript 코드

5. 연습 문제

문제 1

문제 2

6. 정리 및 다음 단계

연습 문제 답안

문제 1 답

문제 2 답

'Programming > Javascript' 카테고리의 다른 글

티스토리툴바

[20일차] 기본 애니메이션 효과 주기

목차

1. 애니메이션 효과란?

2. 자바스크립트를 활용한 애니메이션 기초

2.1 setInterval과 setTimeout 활용

예시: 박스를 오른쪽으로 이동시키기 (setInterval 이용)

예시: 박스를 오른쪽으로 이동시키기(setTimeout 이용)

예시: 박스를 오른쪽으로 이동시키기(requestAnimationFrame 이용)

2.2 CSS와 자바스크립트 활용

3. 실습: 박스 이동 애니메이션

HTML 코드

JavaScript 코드 (script.js)

4. 추가 예제: 색상 변경 애니메이션

HTML 코드

JavaScript 코드

5. 연습 문제

문제 1

문제 2

6. 정리 및 다음 단계

연습 문제 답안

문제 1 답

문제 2 답

'Programming > Javascript' 카테고리의 다른 글

관련글

티스토리툴바

2.1 `setInterval`과 `setTimeout` 활용