playAnimation 과 calcValues 의 용도

Question

안녕하세요~ 수강생입니다. 강의 정말 잘 듣고 있습니다. 좋은 강의 감사합니다! 질문이 한가지가 있습니다. playAnimation에서 사용하는 scrollRatio if문이 궁금합니다. values 세번째 값으로 start, end 를 지정해주었는데, if문으로 스크롤 지점 체크를 왜 하는지 궁금합니다. 이미 start, end 지점을 지정한 것이 아닌가요? 예를 들면.. 0번씬의 메세지A의 데이터는 messageAOpacityIn: [0, 1, { start: 0.1, end: 0.2 }] 인데, start: 0.1 , end: 0.2가 이미 지정된 것이 아닌가요?.. switch 문에서 현재 화면에서의 스크롤 지점이 0.25와 같거나 작으면 메세지A에 opacity와 transform을 그때 적용하는지 궁금합니다. start: 0.1에 적용하는 게 아닌가요? 이게 올바른 질문인지는 모르겠습니다. 빠른 시간 내에 머리에 지식을 집어넣으려니 어렵네요ㅜㅜ 답변 부탁드립니다. 감사합니다!

1분코딩 · Answer

영주니님 말씀이 맞습니다!
초반 구간(in)에서는 opacity가 0에서 1로 적용이 되어야하고, 후반 구간(out)에서는 1에서 0으로 적용이 되어야 하므로 해당 파트에서 둘 중 하나씩만 실행이 되어야 합니다. 구간은 얼마나 스크롤 되었는지를 나타내는 비율인 scrollRatio 값을 이용해서 판별하는 것이고요.

영주니 · Answer

강의중에 in과 out에 대해 충돌이 발생한다고 하신 부분이 있던 것으로 기억합니다. messageA_opacity_in만 실행해보시면 처음 opaicty가 0이고 start값 0.1에서 나오기 시작해서 end값 0.2가 되면 opacity가 1인 상태가 됩니다. 여기서 messageA_opacity_in이 스크롤할 때마다 계속 실행되면 opacity를 계속 1로 적용합니다. 뒤에 나올 messageA_opacity_out은 opacity가 1에서 0으로 바꾸는 방식인데 앞에 in에서는 계속 1값을 적용하고 있으니 충돌이 발생하겠죠..? 때문에 messageA_opacity_in 과 messageA_opacity_out 을 각각 구간에 맞춰 따로따로 적용될 수 있도록 if문을 이용해서 앞구간엔 in만 실행하고 뒤구간엔 out만 실행하는 방식으로 코딩된 것 같습니다.