Inflearn Community Q&A
asked
섹션 0, 버그와 리팩토링에서 아이콘 클릭시 진행률을 알아올 수 있나요??
Resolved
Written on
·
142
1
안녕하세요 !
강의를 듣다가 궁금한점이 생겨 글을 남깁니다.
switch (id) {
case 'home':
console.log('home');
progress = 0;
break;
case 'mountain':
console.log('mountain');
progress = 0.21;
break;
case 'river':
console.log('river');
progress = 0.47;
break;
case 'company':
console.log('company');
progress = 1;
break;
}
gsap.to(route_animmation, {
progress: progress,
duration: 1
});위의 코드에서, progress: progress 변수로 사용중에다가, progress를 switch 문에서 직접 치수를 넣어주고 있는데, 클릭시 해당 svg path의 진행률을 직접 가져올 수는 없는걸까요 ? 반응형 코드에서 문제를 어떤식으로 해결하시는지 궁금합니다.
HTML/CSSjavascript인터랙티브-웹gsap
Answer 1
0
kindtiger
Instructor
안녕하세요 dpwl322 님 😀
영상에서 안내드린 것 처럼 해당 path의 progress를 가져오는 방법은 update 함수 안에서 가져올 수 있습니다.
function update(){
console.log( animation.progress() ); // path의 진행률
time.textContent = animation.time().toFixed(2);
progress.value = animation.progress();
}
각 지점 마다의 progress를 찍어준 이유는 클릭되는 오브젝트 마다 다른 진행률을 가지기 위해 작성한 것이며 말씀해주신 반응형을 주신다 하더라도 svg자체가 줄어들기 때문에 진행률과 위치상에는 변화가 없습니다 😀
제가 질문의 내용을 100% 이해하진 못해서 답변이 됐을진 모르겠습니다만,,
보다 자세하게 어떻게 하고 싶다 등의 레퍼런스도 함께 주신다면 보다 자세히 답변 드리도록 하겠습니다.
감사합니다 :)