애니메이션 따라해보기 #1
아웃라인 애니메이션을 작업해봅시다.
이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다.
크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다.
브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다.
이 글은 CSS에 대해 어느정도 알고 계신 분들이 보실 거라는 가정하에 작성된 글입니다.
익숙하지 않으신 분들에겐 헷갈리거나 어려운 부분들이 있을 수 있습니다.
아웃라인 애니메이션이번 글에서 작업할 부분은 가장 아래에 있는(z-index 기준) 아웃라인입니다.
GIF는 우리가 완성해야 할 애니메이션만 쏙 빼온 거랍니다. 모두 따라 할 수 있을 거예요.
애니메이션 분석하기
애니메이션 작업을 하기 전에는 분석이 중요한데 GIF에서 흰색 선분들이 등장하는 모습을 자세히 보세요.
흰색 선분이 약간 밀려 나오면서 등장하는 걸 눈치채셨나요? 전체적인 크기가 줄어드는 것은요?
이미 알고 계셨다면 굉장한 눈썰미를 가지셨네요 :) 애니메이션 작업을 수월하게 하실 수 있을 거예요.
모르셨더라도 알기 쉽게 하나하나 알려드릴 예정이니 걱정하지 않으셔도 됩니다.
방금 전 말했던 것들이 작은 디테일일 수 있지만, 신경 써주지 않으면 완성도가 떨어져 보일 수 있습니다.
"똑같이 따라서 만든 것 같은데 왜 다르게 보이지?"라는 의문이 드셨던 적이 있다면
아마 작은 디테일들을 놓치고 계셨던 것 일 수도 있어요.
작은 차이지만 작은 것들이 모여서 애니메이션의 느낌을 좌지우지한답니다.
이제 우리가 만들 것에 대해 하나하나 파헤쳐봅시다.
아웃라인 그룹첫 번째
아웃라인의 그룹이 크기가 커지면서, 회전하며 등장합니다.
선분들이 길어지는 모습보다 중심에서 커지면서 회전하는 모습을 주의 깊게 봐주세요.
크기가 0%에서 100%로, 동시에 135도 정도 회전하면서 나오는 것 같네요.
두 번째
각각의 주황색 선분들은 오른쪽 상단과 왼쪽 하단의 모서리를 중심으로 등장합니다.
길어지는 모습을 보면 확실하게 알 수 있죠? 그런데 하얀색 선분들은 반대로 등장합니다.
요점정리
어디서 등장하는지, 등장하는 타이밍, 끝나는 타이밍, 움직임의 속도를 잘 파악하고
다른 요소들과 함께 나오는지도 알아두면 더욱 쉽게 작업할 수 있을 거예요.
여러 가지 알아둬야 할 것들이 많죠? 이제 애니메이션 작업을 시작해봅시다!
HTML코드HTML은 위 이미지처럼 작성해주세요.
구조 잡기 글에서는 animation-container가 없었는데 왜 추가된 건지 궁금한 분들이 계실 거예요.
아웃라인 그룹을 감싼 div 태그를 추가한 이유는 요소들의 크기와 위치 조절을 쉽게 하기 위해서입니다.
animation-container라는 클래스에만 width, height를 고정값(px)을 주고
다른 요소들은 모두 %를 사용하여 크기를 변경하는 문제가 생기더라도 수정을 쉽게 할 수 있도록 할 거예요.
CSS코드animation-container 클래스에서만 width, height를 고정값으로 준 게 보이시죠?
크기 조절할 일이 생기면 저 수치만 건드리면 되도록 만들 거예요. 물론 예외 상황은 생길 수 있겠지만요.
이제 outline-wrapper에 애니메이션을 추가해봅시다.
크기가 0%에서 100%로, 동시에 135도 정도 회전해서 등장하는 애니메이션을 추가할 거예요.
CSS코드크기와 회전이 동시에 일어나기 때문에 Transform에 scale, rotate 함수를 나열했어요.
회전의 경우엔 진행방향을 생각해서 -135deg가 아닌 135deg로 작성했습니다.
크기는 0 == 0%, 1 == 100%라고 알고 계시면 됩니다. 0.5는 50%겠죠?
그리고 진행도 0%(from)에서 두 개의 Tranform 함수를 썼다면, 모든 구간에서 두 개를 꼭 써줘야 해요.
그렇지 않으면 애니메이션이 제대로 실행되지 않을 수 있습니다.
그런데 애니메이션이 심심해 보이는 것 같지 않나요?
이제 animation-timing-function에서 cubic-bezier 값도 추가해봅시다.
animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
cubic-bezier를 보면 ease-in-out 곡선과 비슷하지만 애니메이션이 끝나는 지점에서
더 부드럽게, 천천히 진행되도록 하기 위해 곡률을 더 줬습니다.
GIF의 프레임 수가 적어서 큰 차이는 안나는 것처럼 보이지만
실제로 적용해보시면 꽤 큰 차이가 난다는 것을 느끼실 수 있을 거예요.
이제 주황색 선분들(outline)을 만들어봅시다!
HTML코드갑자기 못 보던 클래스들이 많이 추가가 되어있죠?
outline은 선분들의 공통적인 속성만 쓰려고 만들어둔 클래스
outline-x는 가로 선들의 길이, 굵기, 애니메이션을 컨트롤하기 위한 클래스
outline-y는 세로 선들의 길이, 굵기, 애니메이션을 컨트롤하기 위한 클래스
top, bottom, left, right는 각각의 위치와 세부 설정을 하기 위한 클래스
아래 CSS 코드와 함께 보시면 이해하기 쉬울 거예요.
CSS코드.outline에는 공통적인 것들을 적어놓은 게 보이시죠?
position: absolute 라던가, 색깔, box-shadow처럼 다 똑같은 것들이요.
.outline-x는 width가 길이이고, height가 두께.
.outline-y는 width가 두께이고, height가 길이입니다.
top, bottom, left, right에 각각의 위치들과 transform-origin으로 애니메이션이
시작되는 지점을 설정해줬어요. calc()로 -3px를 해준 것은 선분의 두께만큼 뺀 것이랍니다.
transform-origin의 기본 값은 center인데 값을 건드리지 않고 애니메이션을 적용한다면,
길이가 중앙에서부터 늘어나는 형태로 보이게 될 거예요.
transform-origin에 대해 아직 감이 안 오신다고요?
.outline-top { transform-orign: right center; }
.outline-bottom { transform-orign: left center; }
.outline-left { transform-orign: bottom center; }
.outline-right { transform-orign: top center; }
모션 시작점이 있는 부분과 선분의 transform-origin으로 설정되어 있는 부분을 비교해보세요.
어떤 이유 때문에 개별적으로 설정하는지 이해가 되시나요?
그리고 transform 속성을 사용할 땐 함께 자주 쓰는 속성이니 꼭 알아두세요.
이제 transform 함수인 scaleX와 scaleY로 애니메이션을 주면 되겠네요!
엥? width랑 height 값을 조절해서 애니메이션을 만들면 안 되나요?
그 방법이 안 되는 것은 아니지만 지향하지 않는 방향입니다.
간단하게 말하자면 최적화하기 위해 tranform 속성의 함수들로만 작성할 거예요.
짠! 애니메이션을 추가하는 코드예요.
시작점은 모두 설정해놓았으니 길이가 0에서 100%로 늘어나게만 하면 됩니다.
주의해야 할 점은 outline-x와 outline-y를 따로 만들어야 한다는 것이에요.
이것만 주의한다면 크게 어려울 것이 없답니다. GIF로 볼까요?
역시나 animation-timing-function 값을 설정해주지 않으면 심심해 보입니다.
.outline-wrapper에 추가했던 것처럼 비슷하게 추가해볼까요?
animation-timing-function: cubic-bezier(0.5, 0, 0.6, 0.6);
linear 곡선과 비슷하지만 애니메이션 시작 지점에서 천천히 진행되도록 곡률을 줬어요.
아직 하나만 보니깐 모션이 어설퍼 보이는데 하나씩 얹어나가다 보면 괜찮아 보일 거예요.
작성된 코드와 애니메이션을 보고 싶으신 분은 이곳에서 확인하세요.
아웃라인 애니메이션애니메이션 따라해보기 #2에서는 위 GIF처럼 완성할 예정입니다.
기초작업은 거의 다 끝났으니 금방 만들 수 있을 거예요. 다음 글에서 다시 또 만나요!
벨루가에서는 함께 일하실 분을 모시고 있어요.
같이 광복 이후, 한 세기 넘게 변화가 없던 15조 원에 달하는 주류� 시장을 바꿔나가봐요.
