S4) Unit 2. [HTML/CSS] CSS 애니메이션 & Canvas

📣  CSS 애니메이션

𝟭. CSS 애니메이션

✔️ 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.

➰ @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.

 

𝟮. @keyframes

1️⃣ CSS로 키프레임 블록 만들기

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

 

2️⃣ 키프레임 애니메이션 만들기

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

 

3️⃣ 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름 불러오기

 

𝟯. animation 속성

✔️ animation : 띄어쓰기로 속성을 나열 할 수 있다.

➰ animation-name : 애니메이션의 중간 상태를 지정하는 이름.  @keyframes 블록에 작성

➰ animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정

➰ animation-delay : 애니메이션의 시작을 지연시킬 시간 지정

➰ animation-direction : 애니메이션 재생 방향을 지정

➰ animation-iteration-count : 애니메이션이 몇 번 반복될지 지정

➰ animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음

➰ animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

➰ animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

#logo {
	**animation-name : lotate;**    /* lotate 라는 이름의 키프레임 애니메이션을 */
	animation-duration : 3s;               /* 3초 동안 재생하며, */
	animation-iteration-count : infinite;  /* 애니메이션을 무한 반복하고, */
    animation-timing-function : linear;    /* 선형으로 재생합니다. */
}

/* 아래와 같이 일괄 작성해도 동일하게 적용 */

#logo {
	animation : **lotate** 3s infinite linear;
}

---

📣  Canvas

𝟭. Canvas

✔️ 단순한 도형부터 데이터 시각화, 애니메이션, 웹 게임 등의 컨텐츠를 만들어낼 수 있다.

 

𝟮. Canvas 사용법

1️⃣ 캔버스 태그 작성

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>

 

2️⃣ canvas 엘리먼트를 DOM으로 조작

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

 

3️⃣ canvas 크기 설정

<canvas id="canvas" width="500" height="500"></canvas>

<canvas id="canvas" width="50vw" height="40vh"></canvas>
    		// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.

➰ 캔버스 태그의 width, height 속성은 픽셀 단위로만 명시해야 인식한다.

 

// 화면 크기에 맞춰서 설정해줄 수도 있습니다.
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 화면 크기를 가져와 그에 비례하여 설정해줄 수도 있습니다.
    canvas.width = window.innerWidth * 0.5;
    canvas.height = window.innerHeight * 0.4;

    // DOM으로 설정할 시, 픽셀 단위가 아닌 vw, vh로 단위값을 지정해도 설정이 됩니다. 
    // 주의해야 할 점은 style 속성을 이용하여 크기에 변화를 주는 경우는 픽셀의 크기까지 해당 단위에 비례해 확대하는 개념이므로, 
    // 특정한 경우가 아니면 사용을 자제합니다.
    canvas.style.width = "50vw";
    canvas.style.height = "40vh";

➰ DOM으로 크기를 설정하면 원하는 단위로 유동적인 값을 설정해줄 수 있다.

---

📣  Canvas로 사각형 그리기

𝟭. 사각형 그리기

✔️ 색칠된 사각형

ctx.fillStyle = 'blue';
// 색칠할 색상
ctx.fillRext = (10, 10, 100, 50);
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.

 

✔️ 선으로만 된 사각형

ctx.lineWidth = 5;
// 선의 굵기
ctx.strokeStyle = "black";
// 선의 색상

ctx.strokeRect(10, 10, 100, 50);
//전달 인자는 이번에도 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.
//위에서 그려준 색칠된 사각형 바로 위에 그려보세요.

 

✔️ 사각형으로 지우기

ctx.clearRect( 20, 20, 80, 30);
// 지울 범위 설정
// 전달 인자는 역시 동일합니다. 그려놓은 사각형 가운데 부분을 지워보세요.

 

𝟮. 캔버스로 클릭 이벤트 만들기

✔️ 캔버스를 클릭하면 클릭하는 위치에 사각형 그리는 이벤트

canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft
    // 화면상 마우스 위치 - 화면상 캔버스 위치
	const y = event.clientY - ctx.canvas.offsetTop
		// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성해보겠습니다.

	ctx.fillRect(x - 15, y - 15, 30, 30);
		// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리도록 하려고 합니다.
		// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 줍니다.
		// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 됩니다.
		// 따라서 x - 15, y - 15 를 전달합니다.
}