-
JQuery 함수인 slideUp / slidedDown 함수와 Accordion Menu 를 직접 구현한 예제이다.
-
코어(재귀를 통한 Animation 처리) 로직을 직접 구현해보기위한 예제이므로, 그 외 로직(DOM 처리, 조작 등)에서는 JQuery 를 사용하였다.<p>
-
부드러운 움직임을 위한, 다향한 Easing 기능이 추가된 예제이다.
-
즉 Easing 을 통해 부드러운 움직임을 위한 가속도(사람은 속도에는 둔감해도 가속도에는 민감하다)를 적용할 수 있다.<p>
속도에는 둔감하고 가속도에는 민감한 예를 들자면 차가 일정한 속도로 달리고 있을 때 우리는 이 차가 얼마나 빨리 움직이는 것인지 잘 모른다. 일정한 속도라면(즉, 가속도가 0이라면) 차안에서 가만히 서있을 수 있다. 하지만 급정거나 급출발하면 어떤가? 아무리 살짝(?) 급정거, 급출발을 해도 우리는 곧바로 느낄 수 있다. 우리 몸이 힘을 맞았기 때문이다. UI 애니메이션에서 easing은 이런 가속도를 매끄럽게 해주는 일을 한다.
-
-
-
위 slideUp / Down 함수를 응용하여 slideRight / slidedLeft 함수를 구현한 예제이다.
-
코어 로직 중 Animation 처리를 위한 속성인 height 속성이 width 속성으로 변경된점을 제외하고는 동일하다.
-
-
마지막으로 Menu Animation 이 구현된 예제이다.