티스토리툴바

Front End/HTML, CSS

CSS Animation (@keyframe, canvas)

@keyframes

CSS 애니메이션은 기본적으로 transition 속성을 이용해 간단히 구현할 수도 있지만, @keyframe을 이용해 시간 순서대로 정밀하게 짜여진 애니메이션도 구현할 수 있다. 키프레임 활용을 하기 위해선 우선 @keyframe 블록을 이용해 시간에 따른 CSS 속성을 작성해주어야 한다.

/* '%' 단위로 시간 진행에 따른 상태를 작성 */

@keyframes 애니메이션이름 {
	/* from 으로 작성도 가능*/
	0% {
		CSS속성 : 속성값; 
	}
	/* 애니메이션 진행도에 따른 스타일 설정 */
	/* 필요하다면 1부터 99, 소수점까지도 모두 작성 가능 */
	50% {
		/* 중간 값은 animation 속성의 duration 옵션을 기준으로 계산됨*/
		/* ex. duration이 3s라면, 50% 시점은 1.5초 */
		CSS속성 : 속성값;
	}
	/* to 로 작성도 가능*/
	100% {
		CSS속성 : 속성값;
	}
}
@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

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

animation

@keyframe은 일종의 선언으로, animation속성에서 키프레임 이름을 불러와야 사용할 수 있다. 이 때, animation에 기본적으로 작성해야 하는 옵션과 추가적으로 설정가능한 옵션이 존재한다. 옵션들은 다음과 같으며, 따로 속성을 지정하지 않고 띄어쓰기로 쭉 나열하면 한번에 지정도 가능하다.

  • animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음

필수 옵션

#logo {
	animation: lotate 3s;
}

/* 또는 */
#logo {
	animation-name : lotate;
	animation-duration : 3s;
}
  • animation-name : 애니메이션의 이름 (@keyframes 블록에 작성)
  • animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정

추가 옵션

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
	animation-direction : alternate;
	animation-iteration-count : infinite;
	animation-play-state : running;
}
  • animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
  • animation-direction : 애니메이션 재생 방향을 지정
    • normal : 재생이 끝나면 처음부터 다시 재생 (default)
    • reverse : 역방향으로 재생
    • alternate : 순방향부터 역방향을 번갈아가며 재생
    • alternate-reverse : 역방향부터 순방향을 번갈아가며 재생
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
    • number : 숫자만큼 재생. 소수점 단위 작성 시 재생 중 정지한다. (default: 1)
    • infinite : 무한 반복
  • animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
    • running : 재생 (default)
    • pause : 정지
  • animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정
    • none : 재생중이 아닌 경우 요소의 스타일을 유지 (default)
    • forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지
    • backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지
    • both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지

<canvas>

HTML의 <canvas> 태그와 Javascript를 사용하면 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 다양한 그래픽 요소를 만들 수 있다. <canvas>는 기본적으로 HTML 파일에 태그를 작성하고, DOM을 조작하는 방식으로 작성하기 때문에 엘리먼트 선택 시 id를 작성하는 것이 좋다.

캔버스의 크기는 두 가지 방법으로 설정 가능하다. 첫 번째는 태그의 속성으로 지정하는 방법으로, 이 방법은 고정 단위인 px로 강제된다. 두 번째는 DOM으로 설정하는 방법으로, 이 경우 상대 단위는 물론 유동적인 값도 설정해줄 수 있어 캔버스의 크기가 고정되지 않은 경우에 사용하기 좋다. 

<canvas width="500px" height="500px" id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다.
</canvas>
const canvas = document.querySelector("#canvas");
canvas.width = 50vw;
canvas.height = 40vh;

// 크기 설정 시 전역 객체의 내부 값에 접근하여 화면 크기에 맞춰 설정도 가능
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

예제를 통해 <canvas> 사용법 알아보기

캔버스에 실제로 도형을 그리려면 선택된 <canvas> 요소의 렌더링 컨텍스트에 접근해 이를 이용해야 한다. 이를 위해 getContext()메서드를 사용하며, 전달인자로는 타입을 지정한다.

let canvas = document.getElementById('tutorial');
let ctx = canvas.getContext('2d');

캔버스로 사각형 그리기

  • 색칠된 사각형 그리기
    // fillStyle로 사각형 내부 색상 지정
	ctx.fillStyle = 'blue';
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이
	ctx.fillRext = (10, 10, 100, 50)
  • 선으로만 그리기
    // lineWidth로 선의 굵기, strokeStyle로 선의 색상 설정
	ctx.lineWidth = 5;
	ctx.strokeStyle = "black";
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이
	ctx.strokeRect(10, 10, 100, 50)
  • 사각형으로 지우기
    //전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이
	ctx.clearRect( 20, 20, 80, 30)

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

클릭 시 캔버스 위에서의 마우스 위치를 구하기 위해서는 화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 된다. 또는 event.offsetX, event.offsetY 로 바로 구할 수도 있다.

  • 화면상 마우스 위치를 구하는 이벤트 객체의 속성
    • X좌표 : event.clientX
    • Y좌표 : event.clientY
  • 화면상 캔버스의 위치를 구하는 속성
    • X좌표 : ctx.canvas.offsetLeft
    • Y좌표 : ctx.canvas.offsetTop
canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft
	const y = event.clientY - ctx.canvas.offsetTop

	// 또는
	const x = event.offsetX;
  const y = event.offsetY;

	ctx.fillRect(x - 15, y - 15, 30, 30);
		// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그린다
		// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되기 때문에
		// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 뺀다
		// 따라서 x - 15, y - 15 를 전달
}

Uploaded by N2T

티스토리툴바