곡선 경로에서 HTML div 이동하기
HTML div 요소를 곡선 경로를 따라 부드럽게 이동시키고 싶다면, 다음 세 가지 방법 중 하나를 활용할 수 있습니다.
- CSS 트랜지션(CSS Transitions)
- 자바스크립트(jQuery 포함)
- HTML5 캔버스(HTML5 Canvas)
세 가지 방법 중에서는 자바스크립트를 사용하는 것을 추천합니다. 자바스크립트 기반 애니메이션은 대부분의 브라우저에서 일관되게 동작하기 때문에 호환성 면에서 가장 안전합니다.
animate() 메서드 소개
특히 jQuery의 animate() 메서드를 사용하면 복잡한 곡선 이동 애니메이션도 손쉽게 구현할 수 있습니다. 이 메서드는 지정된 CSS 속성 집합을 대상으로 사용자 정의 애니메이션을 수행합니다.
기본 문법은 다음과 같습니다.
selector.animate( params, [duration, easing, callback] );
매개변수 설명
- params: 애니메이션이 도달할 목표 CSS 속성들을 담은 맵(map)입니다. 예를 들어 top, left 같은 위치 속성이나 opacity, 크기 값 등이 여기에 해당합니다.
- duration: (선택 사항) 애니메이션이 실행되는 시간을 나타냅니다. 밀리초 단위 숫자나 'slow', 'fast' 같은 문자열로 지정할 수 있습니다.
- easing: (선택 사항) 전환 과정에 사용할 이징(easing) 함수를 지정합니다. 기본값은 'swing'이며, 일정한 속도를 원한다면 'linear'를 사용할 수 있습니다.
- callback: (선택 사항) 애니메이션이 완료된 직후 호출될 함수입니다. 애니메이션 종료 후 추가 동작을 연결할 때 유용합니다.
곡선 경로 구현 팁
단순히 한 번의 animate() 호출로는 직선 이동만 가능합니다. 진짜 곡선 궤적을 만들려면 여러 개의 animate() 호출을 연속으로 연결하거나, step 옵션을 활용해 프레임마다 x·y 좌표를 수학적으로 계산하는 방식을 사용하면 됩니다. 원호 운동이 필요하다면 삼각함수(sin, cos)를 조합해 각 프레임의 위치를 지정해 주는 것이 가장 자연스러운 결과를 얻는 방법입니다.