section4/Unit2/[HTML/CSS] 심화(11/22)

CSS 애니메이션

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.

 

@keyframes

키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 한다.

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

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

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

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

해당 방법으로 회전하는 키프레임 애니메이션이다.

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

	50% {
		transform : rotate(180deg)
	}

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

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

해당 키프레임 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러오면 사용할 수 있다. 그런데 키프레임을 사용하기 위해서는 애니메이션 이름 외에도 다양한 속성을 작성해줘야한다. 어떤 속성들이 있는지 알아보자.

 

animation 속성

• animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
  • animation-name : 애니메이션의 중간 상태를 지정하는 이름.  @keyframes 블록에 작성
  • animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
  • animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
  • animation-direction : 애니메이션 재생 방향을 지정
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  • animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
  • animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

 

animation-name

애니메이션을 적용하고 싶은 요소에 animation 속성의 첫번째 값으로, 혹은 animation-name 이라는 속성으로 @keyframes 키워드를 사용해서 만든 애니메이션 이름을 작성해주면 된다.

#logo {
	animation : lotate;
}

#logo {
	animation-name : lotate;
}

하지만 이 속성만으로는 애니메이션이 재생되지 않는다. 여러 속성들 중 최소한 animation-name 과 animation-duration 은 지정해줘야 애니메이션이 실행되기 때문이다. 

 

animation-duration

애니메이션이 재생될 시간을 animation 속성의 두번째 값으로, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성해준다. 작성해주지 않을 경우 기본값이 0 이기 때문에 애니메이션이 재생되지 않는다.

#logo {
	animation : lotate 3s ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
}

animation-duration 의 값을 각각 3s, 1s로 지정해줬을 때, 3s 는 3초 동안, 1s 는 1초동안 애니메이션이 재생되는 것을 확인할 수 있다.

 

animation-delay

애니메이션 재생을 미룰 시간을 지정한다. 역시 animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-duration 이라는 속성으로 시간 단위로 작성해준다.

#logo {
	animation : lotate 3s 3s ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
}

animation-delay 의 값을 각각 0s, 3s로 지정해줬을 때, 0s 는 즉시, 3s 는 3초 후에 애니메이션이 재생되는 것을 확인할 수 있다.

 

animation-direction

애니메이션 재생 방향을 지정한다. 역시 animation 속성에 띄어쓰기로 구분해준 다음, 혹은 animation-direction 이라는 속성으로 작성해준다.

#logo {
	animation : lotate 3s reverse ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-direction : alternate;
}

전달해줄 수 있는 값은 다음과 같다.

• normal : 기본 값. 재생이 끝나면 처음부터 다시 재생
• reverse : 역방향으로 재생
• alternate : 순방향부터 역방향을 번갈아가며 재생
• alternate-reverse : 역방향부터 순방향을 번갈아가며 재생

 

animation-iteration-count

애니메이션이 몇 번 재생될지 지정한다. 기본 값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생 된다. infinite 로 설정할 경우 무한 반복 되며, 소수점을 작성할 경우 재생 도중 처음 상태로 돌아간다. 예를 들어, 재생 시간이 3초일 때, 0.6을 전달할 경우 3 * 0.6을 한 1.8초만큼만 재생되고 처음 상태로 돌아가게 된다.

#logo {
	animation : lotate 3s infinite ;
/* 애니메이션이 무한 반복 됩니다. */
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 됩니다. */
}

 

animation-play-state

애니메이션의 재생 상태를 설정합니다. 기본 값인 running, 애니메이션을 정지시키는 pause 를 값으로 지정할 수 있다. 보통 이벤트로 애니메이션을 재생 상태를 변경할 때 사용한다.

#logo {
	animation : lotate 3s pause ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause ;
}

 

animation-timing-function

애니메이션의 진행 속도를 설정한다. 

 

animation-fill-mode

애니메이션 재생 전 후의 상태를 지정한다.

• none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지
• forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지
• backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지.
• both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지

 

@keyframes 중간값

이번에는 @keyframes 중간값의 의미를 알아보자. 

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

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

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

애니메이션을 적용한 결과는 다음과 같다.

3초동안 로고가 서서히 회전하는 것을 확인할 수 있다.

이번에는 키프레임 설정에서 중간값만 50%에서 80%로 바꿔보자.

그 결과 애니메이션이 재생되는 3초중에서 80%인 2.4초동안 180도 회전하고, 나머지 20%인 0.6초동안 360도까지 회전하는 것을 확인할 수 있다.

⇒ 이처럼 키프레임을 설정하면서 주는 중간값은 애니메이션 재생 시간을 기준으로 함을 알 수 있다.

---

Canvas

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있다.

기본적인 캔버스 사용법부터 알아보자. 일단은 캔버스 태그를 작성하는 것으로 시작된다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다.

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

이제 자바스크립트를 사용해서 엘리먼트를 선택해주자.

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

캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 한다. 크기를 설정해주지 않으면 기본적으로 300픽셀 * 150픽셀의 사이즈로 생성된다. 설정 방법에는 두 가지가 있다.

• 태그 속성으로 설정해준다. 각각 width, height 속성으로 설정해줄 수 있다. 다만, 이 방법은 어떤 단위로 속성값을 설정해주든 픽셀로만 인식한다. 캔버스 요소의 width, height 속성은 픽셀 단위로만 명시해야 인식하도록 되어 있기 때문이다.

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

• DOM으로 설정해주는 방법도 있다. 이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋다. 이 경우에는 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있다.

  canvas.width = 50vw;
  canvas.height = 40vh;
  // DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 됩니다.
     
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 화면 크기에 맞춰서 설정해줄 수도 있습니다.

 

실습

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

이번에는 캔버스로 사각형을 그리는 방법을 이용해서, 캔버스를 클릭하면 클릭하는 위치에 사각형을 그리는 이벤트를 만들어보자.

우선 클릭이벤트가 일어날 때의 마우스의 위치를 구해보자.

캔버스 좌표

클릭할 때 캔버스 위에서의 마우스 위치를 구하려면, 화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 된다.

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

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

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

• X좌표 : ctx.canvas.offsetLeft
• Y좌표 : ctx.canvas.offsetTop

혹은 event.offsetX , event.offsetY 로 바로 구할 수도 있다.

canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft // event.offsetX
	const y = event.clientY - ctx.canvas.offsetTop // event.offsetY
		// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성해보겠습니다.

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

결과물

https://www.w3schools.com/tags/ref_canvas.asp

HTML Canvas Reference