3/17 일일정리 애니메이션, 캔버스

애니메이션(Animation)

CSS 애니메이션은 여러가지 CSS 속성을 부드럽게 전환시켜 준다.

@keyframes를 활용하여 내가 원하는 애니메이션을 만들 수 있다.

 

간단한 예시로 오른쪽으로 이동하는 애니메이션은 다음과 같다.

애니메이션 이름을 지정하고, 처음(0%)위치와 끝(100%) 위치를 지정하면 정해진 시간(3초)동안 처음에서 끝까지 이동하는 것 처럼 보이게 된다.

 

@keyframes 로 적당한 애니메이션을 만들고, 특정 요소에 애니메이션을 주고 여러가지 설정을 할 수 있다.

 

animation 설정

⓵ animation-name : @keyframes로 만든 애니메이션의 이름이다. 

 

⓶ animation-duration : 애니메이션 한 사이클에 걸리는 시간을 정해준다.

같은 애니메이션을 각각 5초, 3초로 지정했을 때 모습이다.

 

⓷ animation-delay : 애니메이션이 언제 시작할지 시작 시간을 지정한다.

같은 애니메이션을 초록 박스는 0.2초, 하늘색 박스는 delay를 1초를 설정했다.

 

⓸ animation-direction : 애니메이션의 재생방향을 지정한다.

같은 애니메이션을 초록색 박스는 direction에 reverse로 주었다.

direction 설정으로 normal(기본값), reverse, alternate, alternate-reverse가 있다.

reverse는 반대로 재생하고, alternate는 애니메이션을 반복할 때 정방향-역방향 순으로 반복한다.

alternate-reverse는 역방향-정방향 순으로 반복한다.

 

⓹ animation-iteration-count : 애니메이션 반복 횟수를 지정한다. 기본값은 1이다.

하늘색 박스는 3을 지정했다.

 

animation-iteration-count와 animation-direction으로 alternative를 지정하면 왔다갔다 하는 애니메이션을 만들 수 있다.

 

⓺ animation-play-state : 애니메이션 재생상태를 지정한다. 멈추거나 다시 재생할 수 있다.

 기본값은 running이고, 애니메이션을 정지시키는 paused값을 지정할 수 있다. 보통 이벤트와 묶어서 사용한다.

// script.js
const stopButton = document.querySelector(".stop");
const startButton = document.querySelector(".start");
const square = document.querySelector(".square1");
stopButton.addEventListener("click", () => {
  square.style.animationPlayState = "paused";
});

startButton.addEventListener("click", () => {
  square.style.animationPlayState = "running";
});

 

⓻ animation-timing-function : 애니메이션 중간 상태 전환을 어느 시간에 맞추어 진행할지 정한다.

linear

 

ease

ease-in

 

ease-in-out

이외에도 여러가지가 있다. 필요할 때 찾아서 쓰기!

 

⓼ animation-fill-mode : 애니메이션 재생 전후 상태를 지정한다.

none(기본값)  : 재생중이 아니면 요소의 스타일을 유지한다.

forwards : 재생중이 아니면 마지막 상태를 유지한다.

backwards : 재생중이 아니면 처음 상태로 돌아간다.

both : 재생전에는 처음 키프레임 스타일, 재생 후에는 마지막 키프레임 스타일을 유지한다.

 

 

애니메이션 설정이 크게보면 그렇게 많지는 않은데, 설정 하나하나의 지정할 수 있는 범위가 넓어서 수많은 애니메이션을 만들 수 있을 것 같다. 공부하면서 든 생각인데 로딩창 같은것도 이런걸로 만들어보면 좋을 것 같다.

대충 만들어본 로딩창

 

 

캔버스(Canvas)

HTML의 canvas 태그와 javascript를 조합하여 다양한 그래픽 요소를 만들 수 있다.

(쉽게 말하자면 웹에서 그림을 그릴 수 있도록 해준다!)

HTML에 canvas 태그를 만들고 높이, 너비를 지정(선택사항)한다. 캔버스를 지원하지 않는 브라우저이면 canvas 태그 사이의 내용이 출력된다고 한다.

 

그리고 javascript를 사용하여 canvas를 설정한다.

보통은 2d를 사용한다고 한다.

 

https://url.kr/pwuefz

[JS] JS에서 Canvas 사용하기(마우스로 그리기)

위 블로그를 참고하여 간단한 캔버스를 만들어봤다.

 

Reference

- 코드스테이츠

- https://url.kr/pwuefz