DAY #11
- 문제
👉 문제 바로가기
Walking Boots: These boots are made for walking. Where are they going and for how long?
워킹 부츠: 이 부츠는 걷기 위해 만들어졌습니다. 그들은 어디로, 얼마나 오랫동안 갈 예정인가요?
겉으로 보기엔 그냥 부츠 두 개가 왔다갔다 하는 단순한 문제처럼 보이지만!
까보니 굉장히 까다로웠던 문제!! 😮
단순하게 내가 생각했던 구조는!!
일단 부츠 두개가 있고, 부츠 두개의 회전축을 변경해서 회전 애니메이션을 주면 되겠지!!
라고 생각했다.
흠 그결과....
신발이 저렇게 걷는것 처럼 보여야 하는데ㅋㅋ 무슨 그네? 최면시계?⏱ 처럼 휙휙 왔다갔다만 하는 부자연스러운 모션이 만들어지고 말았다. 🙂💧
그래서 어떻게 저렇게 자연스러운 모션을 주었지?? 하고 찾아보았다!!
내가 전혀 생각하지 못했던 구조로 짜여져 있었다.
나는 그냥 부츠 두 개. 땡. 이었는데
저러한 모션을 만들기 위해서는 부츠 두 개로 끝나는게 아니었당.
<div class="wrap">
<div class="left">
<div class="shoe"></div>
</div>
<div class="right">
<div class="shoe"></div>
</div>
</div>이렇게 왼쪽 오른쪽 다리를 두개 만들고, 그 다리에 부츠를 신겨주어(?)야 했다!!
그러면 이제 부츠에도 모션을 따로 줄수가 있는 것이다!!
그럼 이제 부츠를 신긴 다리의 회전축을 변경해보자.
.wrap {
...
& > div {
...
width: 50px; //다리 너비
height: 300px; //다리 길이
transform-origin: 50% 0; //회전축 변경
}다리의 회전축을 X축 50% Y축 0% 으로 옮겼다. (중앙 상단)
그리고 다리가 회전하는 애니메이션을 만들어주었다.
@keyframes leg-swing {
0%, 100% {
transform: rotate(-12deg);
}
50% {
transform: rotate(30deg);
}
}rotate 의 대칭이 맞지 않는 이유는!!
다리의 영역보다 신발이 오른쪽으로 더 튀어나와서, 왼쪽으로 조금 더 이동시켜야 하기 때문이다.
이 👉leg-swing 애니메이션을 다리들 (.left, .right) 에 1초의 텀을 두고 각각 적용해 준다.
여기까지만 하면 앞서 내가 처음에 구현했던 최면시계⏱ 같은 모션이 나오게 된다. 😫
저렇게 자연스러운 발걸음🦶 을 만들기 위해서는 부츠 (.shoe) 에도 따로!! 모션을 주어야 한다!!
@keyframes shoe-turn {
0% {
transform: rotate(-10deg) translateY(0px);
}
25% {
transform: rotate(0deg) translateY(0px);
}
50% {
transform: rotate(10deg) translateY(-15px);
}
75% {
transform: rotate(0deg) translateY(-35px);
}
100% {
transform: rotate(-10deg) translateY(0px);
}
}이 애니메이션은 좀 어려워서.... 답안을 참조해서 만들었다.
그냥 문제만 봐서는 부츠가 어떤식으로 움직여야 발걸음 모션이 형성되는지가 감이 안와서😭
일단 부츠가 뒤(왼) -> 앞(오른) 쪽으로 갈 때, 보통 사람들이 움직이는 것 처럼
✨발을 들었다가!! 내려놓는✨ translateY 모션이 있어야 한다.
그리고 사람은 발목에도 관절이 있기 때문에!!
✨발목 관절도 움직여✨ rotate 주어야 한다!!
이 두가지를 활용하여 최대한 자연스러운 지점을 찾아서 값을 넣어 주었다....!!
- 내가 만든 CHALLENGE Code
- 결과물
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}문제에서 fade-in 을 넣은 이유는 양 다리의 애니메이션이 1초의 텀을 두고 있기 때문에
이걸 넣지 않으면 처음 화면 출력시에 다리 하나가 1초동안 움직이지 않고 그냥 서있다. 😐
이걸 가려주려고 fade-in 을 넣어 주었던 것이었다...
이렇게 해서 최대한 자연스러운 발걸음 만들기 성공!! 👍
애니메이션의 역할은 정말 무궁무진 한 것 같다~
끝
