[TIL] CSS 애니메이션, Canvas

ㅜㅜ·2022년 11월 22일

Today I learn

목록 보기

57/77

CSS 애니메이션

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

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

어제에 이어 오늘 과제에서는 @keyframes과 CSS 애니메이션을 구현해보았다.

구현한 기능

1. 제목 빙글빙글 돌아가도록 만들기

: 제목은 Title이라는 styled 컴포넌트로 Header라는 컴포넌트 속에 들어있다. (Title 자체는 29cm에서 그냥 이미지를 가져와서 컴포넌트 속에 넣어두었다.)

이 사이트를 참고해서 빙글빙글 돌아가는 이미지를 구현했다.

const Title = styled.img.attrs({
  src: `${logo}`,
})`
  width: 180px;
  height: 80px;
  margin: 10px;
  &:hover {
    animation: rotate-vert-center 1s cubic-bezier(0.455, 0.03, 0.515, 0.955)
      infinite both;
  }
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}`;

2. 노래 제목이 왔다갔다 하게 만들기

: 사실 이 노래 재생 바 컴포넌트는 실제로 29cm에 있는 기능은 아니다. 다만 뭔가 새로운 기능을 넣어볼까, 생각하다가 넣게 되었다.
음악이 실제로 나오게 구현한 건 아니고, 그냥 컴포넌트만 만들었는데, 사실은 정지 버튼을 누르면 제목이 움직이는 것을 멈추게 하고 싶었다... 근데 그건 아무래도 CSS만으로는 구현이 되지 않을 것 같다. 상태 값을 쓰거나 해야할듯. 그래서 그냥 제목 위에 마우스를 올려두면 제목 움직임이 멈출 수 있도록 hover 속성을 사용했다.

animation-play-state 속성을 이용하면 paused와 running 두 가지 상태를 설정할 수 있다. 기본값은 running이다.

const Music = styled.span`
  font-size: 10px;
  position: relative;
  animation-name: music;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  &:hover {
    animation-play-state: paused;
  }
  @keyframes music {
    0% {
      left: 0px;
    }
    50% {
      left: 50px;
    }
    100% {
      left: 100px;
    }
  }
`;

3. 메뉴들 위에 마우스를 올렸을 때 크기 변경되도록 만들기

큰 메뉴 버튼은 폰트 사이즈가 30px => 35px => 30px
작은 메뉴 버튼은 20px => 15px => 10px
이런식으로 바뀌도록 만들어주었다.

내가 유명한 반응형 웹 페이지들만큼 잘 만든 건 아니지만, 그래도 확실히 그냥 메뉴 하나만 띡 있는 것보다 움직이는 애니메이션을 주니까 좀 더 생동감 있는 페이지 같다는 생각이 들었다.

const HeaderBigMenu = styled.div`
  width: auto;
  height: 40px;
  font-size: 30px;
  font-weight: bolder;
  &:hover {
    animation: hoverButton 1.9s ease-in-out;
    border-bottom: 2px solid black;
  }
  @keyframes hoverButton {
    0% {
      font-size: 30px;
    }
    50% {
      font-size: 35px;
    }
    100% {
      font-size: 30px;
    }
  }
`;

const HeaderFilterMenu = styled.div`
  width: auto;
  height: 20px;
  font-size: 15px;
  font-weight: bold;
  padding: 20px;
  &:hover {
    animation: hoverFilterMenu 1.9s ease-in-out;
  }
  @keyframes hoverFilterMenu {
    0% {
      font-size: 20px;
    }
    50% {
      font-size: 15px;
    }
    100% {
      font-size: 10px;
    }
  }
`;

Canvas

HTML에서 canvas 태그와 Js를 이용하면 다양한 그래픽 요소를 만들 수 있는데, 단순한 도형 뿐 아니라 데이터를 시각화 할 수도 있고(ex: 그래프 등), 애니메이션, 웹 게임 등 다양한 활용이 가능하다고 한다.

canvas 사용법

캔버스는 canvas 요소를 DOM으로 조작하는 방식으로 작성된다.
요소를 선택하기에 편리하도록 id를 작성해주면 좋다.

//HTML
<canvas id="canvas>캔버스다!</canvas>

캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이에 있는 문구가 표시된다.

//자바스크립트 이용해 요소 선택해주기
const canvas = document.querySelector("#canvas")

캔버스 크기 설정 (기본값 300픽셀 * 150픽셀)

//방법 1 : width, height 속성으로 설정 
//이 경우에 픽셀 단위로만 가능 
canvas id="canvas" width="500" height="500"></canvas>
		// 500픽셀 * 500픽셀로 설정

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


//방법 2 : DOM으로 설정 
//DOM으로 설정 시 유동적 값도 설정 가능 
canvas.width = 50vw;
canvas.height = 40vh;
// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정가능.
   
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 // 화면 크기에 맞춰서 설정해줄 수도 있다.