[TIL] Day61 #CSS_Animation #Canvas

2022.07.22(Fri)

[TIL] Day61
[SEB FE] Day62

☑️ CSS Animation

: 여러 개의 CSS 스타일을 부드럽게 전환시켜줌

📎 @keyframes

: 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있음

/* % 단위로 시간 진행에 따른 상태 작성해주기! */

@keyframes lotate { /* Animation Name */
	0% { /* = from */
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)  /* 180도 회전 */
	}

	100% { /* = to */
		transform : rotate(360deg)  /* 360도 회전 */
	}

📎 Animation 속성

✨ animation-name

: 애니메이션 중간 상태를 지정하는 이름 (@keyframes 블록에 작성)

#logo {
	animation-name: lotate; // 적용하고자 하는 요소에 애니메이션 이름 작성해주기
}

✨ animation-duration

: 한 cycle의 애니메이션이 재생될 시간 지정

• 시간 단위로 작성 (IF 작성 X → 기본값 0 → 애니메이션 재생 X)

#logo {
	animation-duration: 3s;  /* 3초 동안 애니메이션 재생 */
}

✨ animation-delay

: 애니메이션 시작 지연시킬 시간 지정

#logo {
  animation-delay: 0s; /* 즉시 재생 */
	animation-delay: 3s; /* 3초 동안 애니메이션 재생 */
}

/* animation-name, duration, delay 속성을 차례로 한번에 지정 가능! */
#logo {
	animation: lotate 3s 3s;
}

✨ animation-direction

: 애니메이션 재생 방향 지정

• normal : default. 재생 끝나면 첨부터 다시 재생
• reverse : 역방향 재생
• alternate : 순방향부터 역방향을 번갈아가며 재생
• alternate-reverse : 역방향부터 순방향을 번갈아가며 재생

#logo {
	animation-direction: alternate;
}

✨ animation-iteration-count

: 애니메이션이 몇 번 반복될지 지정

• default - 1
• infinite - 무한 반복
• 소수점 작성 - 재생 도중 처음 상태로 돌아감 (3s * 0.6 = 1.8초 재생 후 첨으로 돌아감)

#logo {
	animation-iteraion-count: 3;  /* 애니메이션 3번 반복 */
}

✨ animation-play-state

: 애니메이션 재생 상태 (멈추거나 다시 재생)

• default - running
• 애니메이션 정지 - pause
• 보통 이벤트로 애니메이션 재생 상태 변경시 사용

  #logo {
  	animation-play-state: pause;
  }

✨ animation-timing-function

: 중간 상태들의 전환을 어떠한 시간 간격으로 진행할지 지정 ⇒ 애니메이션 진행 속도 설정

• default - ease
• linear
• ease-in
• ease-out
• ease-in-out

✨ animation-fill-mode

: 애니메이션의 재생 전 & 후 상태 지정

• none: default. 재생중이 아닌 경우 요소 스타일 유지
• forwards : 재생중이 아닌 경우 마지막 키프레임 스타일 유지
• backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일 유지
• both : 재생 전엔 첫 번째 키프레임 스타일, 재생 후엔 마지막 키프레임 스타일 유지

---

☑️ Canvas

: HTML <canvas> 태그와 JS를 사용하여 다양한 그래픽 요소 생성 가능

<canvas id="canvas" width="500" height="500"></canvas>
// width, height 속성은 무조건 pixel로 인식!

// DOM으로 width, height 설정해주는 방법
canvas.width = 50vw;
canvas.heigth = 50vh;

// 화면 크기 맞춰서 설정도 가능
canvas.width = window.innerWidth;
canvas.heigth = window.innerHeight;

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

📎 Canvas로 사각형 그리기

✨ 색칠된 사각형 그리기

// 1. 사각형 내부를 색칠한 색상 설정
ctx.fillStyle = 'green';

// 2. 사각형 그리기
ctx.fillRext = (10, 10, 50, 50); // x좌표, y좌표, 가로길이, 세로길이

✨ 선으로만 그리기

// 1. 선 굵기, 선 색상 설정
ctx.lineWidth = 5;  // 선 굵기
ctx.strokeStyle= 'black';  // 선 색상

// 2. 사각형 그리기
ctx.strokeRect(10, 10, 50, 50); // x좌표, y좌표, 가로길이, 세로길이

✨ 사각형으로 지우기

ctx.clearRect(20, 20, 30, 30); // x좌표, y좌표, 가로길이, 세로길이

📎 Canvas로 클릭이벤트 만들기

✨ 클릭시 Canvas 위에서의 마우스 위치를 구하려면, 화면상 마우스 위치 - 캔버스 위치

➰ 화면상 마우스 위치 구하는 이벤트 객체 속성

• X좌표: event.clientX
• Y좌표: event.clientY

➰ 화면상 캔버스 위치 구하는 속성

• X좌표: ctx.canvas.offsetLeft (event.offsetX)
• Y좌표: ctx.canvas.offsetTop (event.offsetY)

// 클릭시 canvas 위에 사각형 그리기

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);
	// 클릭할 때마다 30px * 30px 사각형 그리기!!
	// x,y 그대로 전달시 좌표부터 사각형 시작 -> 어색 -> 클릭 위치를 사각형 정중앙이 되도록!
	// => '사각형 크기 / 2' 만큼 좌표에서 빼주기
	// 즉, x-15, y-15 전달
}

📎 Chart.js 라이브러리

: 여러 차트 유형을 혼합하고 데이터를 날짜 시간, 로그 등에 쉽게 표시 가능 + 애니메이션 제공

$ npm install chart.js

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

// DOM을 통해 차트를 인스턴스화!
let popCanvas = document.getElementById('popChart');
let popContext = document.getElementById('popChart').getContext('2d');

// 모든 파라미터들을 Constructor에 전달

let barChart = new Chart(popCanvas, {
	type: 'bar',  // 차트 유형
	data: {  // 실제 데이터
		labels: ['Korea', 'Japan', 'China', ...]
		datasets: [{
			label: 'Population',
			data: [234234, 234234, 2342356, ...],
			backgroundColor: [
				'rgba(255, 255, 255, 0.5)',
				...
			]
		}]
	}
});

---

☑️ [pair] CSS Animation & Canvas 활용

저번에 구현했던 반응형 웹 사이트를 기반으로 CSS Animation과 Canvas 적용해보기 🙌

• Nav바 좌측에 로고 이미지를 @keyframes를 활용하여 회전시켰으며,
• Main 부분에 마우스를 클릭하여 사각형을 그리고 자동으로 사라지도록 구현해보았다.
• 메인 화면 부분과 별도의 캔버스 영역을 따로 구분하는 것이 아니라 메인 화면 전체 부분을 캔버스처럼 사용하려고 한 점에서 이를 해결하는데 시간이 오래걸렸다. 결국 페어님이 해결하셨는데 생각보다 쉽지 않았다.,, 뭔가 더 간단한 방법이 있을 것 같긴 한데 더 공부해봐야 할 부분!!