애니메이션 공부 기록 - 1

서론

최근 몇 개의 게시글을 ai의 도움을 받아서 블로그를 작성해 보았다. 그런데 남의 관심을 잘 끌지도 못하고 관심받고 싶지도 않아서... 그냥 다시 공부 기록용으로 작성해보려고 한다. 슈퍼 대문자 I...

애니메이션? CSS?

최근 애니메이션 및 css에 대해 공부하고 있다. 항상 css나 애니메이션 쪽은 부족함을 느끼고 잘 하고 싶은 욕심이 있다. 프론트엔드를 깊게 시작하기 된 계기가 이쁘고 재밌는 UI여서 그럴까. AI가 발달해도 UX나 애니메이션을 설계할 수 있는 개발자는 좀 더 오래 살 수 있다는 말도 있고...

강의 구매

Joshua(zosh) Comeau
의 Whimsical Animations와 Emil Kowalski의 animation.dev 두 가지 강의를 결제해서 수강하고 있다.

Zosh는 css for js, joy for react 두 가지 강의 모두 좋은 평가를 받고 있고 Emil은 Vaul, Sonner의 제작자다.

두 강의 모두 학생 할인을 적용 받았고 Whimsical Animation은 PPP(구매력?)과 얼리버드 혜택까지 적용받아 조금 저렴하게 구매했다. 그래도 꽤 많은 출혈... ㅠㅠ

개인적으로는 두 강의 모두 만족하고 있어 Zosh의 강의는 블랙 프라이데이에 할인을 시작하면 결제할 생각이다.

구매 가격

혹시 몰라서 구매 가격도 작성해본다.

• Whimsical Animation: $167.44
• Animation.dev: $175.12

• 참고로 학생 할인은 .edu 도메인의 이메일로 각 개발자의 이메일에 학생할인을 요청하면 할인 코드를 답장으로 받을 수 있다.
• zosh의 강의는 한번 받은 학생 할인 코드를 모든 강의에 적용할 수 있다.

현재 진행 상황

Whimsical Animation

첫번째 모듈인 Particles의 절반까지 수강했다. 전체 진행률만 따지면 27퍼라는데 현재 공개된 강의를 100%로 기준 삼았을 때의 비율 같다. 얼리버드라 아직 완성되지 않은 강의임을 감안했을 때 아마 15% 정도...?이지 않을까 예상해본다.

Animation.dev

첫번째 모듈인 Animation Theory까지 수강했다. 이론이 4파트, 실습이 4파트 인걸로 봤을때 비슷하게 15~20퍼 인 것 같다.

공부 메모

Whimsical Animation - particle 절반까지

1. 버튼 클릭 시 particle 효과

• particle 효과를 위한 작은 span을 추가해 버튼 내부에 추가하는 방식으로 구현
• setTimeout을 이용해서 애니메이션이 끝난 후 document.createElement 함수의 반환 값인 Element의 내장 함수 Element.remove()를 이용해 제거
• animatioEnd event를 사용하지 않는 이유
  • 가끔 실행되지 않는 버그 발생 위험
  • 이벤트핸들러를 각 span에 달면 메모리에 부담 → 이벤트 위임으로 해결 가능할 것으로 보임
  • 여러 keyFrames를 혼합해서 사용할 때 어떤 키프레임 애니메이션이 끝났는지를 알 방법이 없다.

2. Partial Keyframes

보통 아래처럼 keyframes를 사용할 때는 from과 to를 명시한다.

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

하지만 아래처럼 from과 to를 생략할 수도 있다. 아래 예시는 기본 opacity가 1이나 0이 아닐 때 사용하면 유용하다.

@keyframes fadeFromOpaque {
  from {
    opacity: 1;
  }
}

@keyframes fadeToOpaque {
  to {
    opacity: 1;
  }
}

@keyframes fadeFromTransparent {
  from {
    opacity: 0;
  }
}

@keyframes fadeToTransparent {
  to {
    opacity: 0;
  }
}

예를 들면 기본 opacity가 0.8인 경우에 fadeOut 애니메이션이 동작하면 1로 투명도가 높아졌다가 0으로 낮아진다.

하지만 fadeToTransparent 애니메이션을 실행하면 기본 opacity인 0.8에서 0으로 자연스럽게 투명해진다.

3. 중앙 정렬

아래와 같이 있을 때 버튼의 중앙에 span이 오도록 하려면?

<button class="particleButton">
	<span class="particle"/>
</button>

1. 내가 가장 많이 쓰는 방식: flex

.particleButton {
  display: flex;
  justify-contents: center;
  align-items:center;
}

2. inset: 0; margin: auto;
   inset:0은 top:0;left:0;botton:0;right:0과 같다.

.particle {
	posittion: absolute; 
	inset: 0;
  	margin: auto;
}

3. grid를 이용한 정렬

.particleButton {
  display: grid;
  place-items: center;
}

.particleButton * {
  grid-area: 1 / 1;
}

grid도 사용할 수 있지만 레이아웃을 망가뜨릴 수 있다고 한다.
grid를 이용한 정렬은 여러 요소를 같은 위치에 덮어 놓고 싶을때 사용하면 좋다.

4. dynamic keyframes

keyframes도 css 변수 사용 가능하다.

@keyframes oscillate {
  from {
    transform: translateX(calc(var(--amount) * -1));
  }
  to {
    transform: translateX(var(--amount));
  }
}

<style>
  .ball {
    animation: oscillate 1000ms infinite alternate;
  }
</style>

<div class="ball" style="--amount: 8px"></div>
<div class="ball" style="--amount: 16px"></div>
<div class="ball" style="--amount: 32px"></div>
<div class="ball" style="--amount: 64px"></div>

5. 기타

1. hover시 밑줄
   hover시 밑줄이 생기는 효과를 만들때 border-bottom 사용보다 after을 사용하는 경우가 많다. 이때 height를 사용하면 어색할 수 있는데 scaleY(0) → scale(1) 이런 방식으로 사용하면 더 좋다.

참고

• 이때 Emil은 cpu, gpu 렌더링이 전환되며 간헐적으로 레이아웃이 흔들리는 이슈가 생길 수 있다고 했다.
• will-change 속성을 사용하면 해결할 수 있다고 한다.

2. span과 같은display:inline에서는 transform 먹히지 않는다.
3. width, height와 transform의 scale을 조작할때의 차이점
   • scale은 내부에 글자가 있을 때 글자 크기가 작아진다. 내부 크기에 영향을 줌
   • width, height는 글자의 크기는 같고 글자가 줄바꿈됨
4. 과도한 이징커브로 애니메이션이 어색하다면 duration을 늘리면 된다.
5. 그렇게 1500ms로 duration이 늘어난 애니메이션도 처음 90%에 대부분의 애니메이션이 동작하면 느리게 느껴지지 않을 수 있다. 이징커브의 기울기에 따라 체감 속도가 다를 수 있다.

마무리

생략한 이론과 실습 내용이 많음에도 작성하다보니 길어졌다. Animation.dev 내용은 다음 포스트에서 작성하겠다.