[gsap] 애니메이션이 초기화 될 때

초기화 되는 이유 : gsap타임라인을 사용하지 않고 여러개의 독립적인 애니메이션을 연속적으로 실행하려면, 각 애니메이션의 시작 값이 이전 애니메이션의 종료 값과 일치해야한다. 그렇지 않으면 애니메이션 간에 불연속성이 발생한다.

해결하는 방법

1. GSAP 타임라인 사용: 타임라인을 사용하면 여러 애니메이션을 서로 연결할 수 있으며, 각 애니메이션의 시작과 종료를 정확히 제어할 수 있습니다. 이로 인해 간단하게 순차적인 애니메이션을 구현할 수 있습니다.
2. 위치와 회전 값 저장: 애니메이션의 종료 시점에서 위치와 회전 값을 저장하고, 다음 애니메이션의 시작 값으로 사용할 수 있습니다. 이렇게 하려면 애니메이션의 종료 시점을 감지하고 해당 값을 수동으로 설정해야 할 수도 있습니다.
3. 콜백 함수 사용: GSAP에서는 onComplete와 같은 콜백 함수를 제공하여 애니메이션의 특정 시점에서 실행될 함수를 지정할 수 있습니다. 이를 통해 한 애니메이션의 종료 시점에서 다음 애니메이션을 시작할 수 있으며, 이전 애니메이션의 마지막 값을 다음 애니메이션의 시작 값으로 사용할 수 있습니다.

 

2. 위치와 회전 값 저장하는 법

1. 변수에 저장하기: 객체의 위치와 회전 값을 단순히 변수에 저장할 수 있습니다. 이렇게 하면 나중에 해당 값을 불러와 다른 애니메이션에 사용할 수 있습니다.나중에 이 값을 사용하여 새로운 애니메이션을 시작하려면:
2. javascriptCopy cod
   object.position.copy(savedPosition); object.rotation.copy(savedRotation);
3. javascriptCopy code
   let savedPosition = object.position.clone(); let savedRotation = object.rotation.clone();
4. localStorage 또는 sessionStorage 사용하기: 웹 페이지 세션 간에 위치와 회전 값을 유지하려는 경우, localStorage 또는 sessionStorage를 사용하여 값을 저장할 수 있습니다. JSON 문자열로 변환하여 저장하고 필요할 때 파싱할 수 있습니다.나중에 이 값을 불러와 사용하려면:
5. javascriptCopy code
   let savedPosition = JSON.parse(localStorage.getItem('position')); let savedRotation = JSON.parse(localStorage.getItem('rotation')); object.position.set(savedPosition.x, savedPosition.y, savedPosition.z); object.rotation.set(savedRotation.x, savedRotation.y, savedRotation.z);
6. javascriptCopy code
   localStorage.setItem('position', JSON.stringify(object.position)); localStorage.setItem('rotation', JSON.stringify(object.rotation));