-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
playAnimation 과 calcValues 의 용도
22.08.31 13:56 작성 조회수 103
0
안녕하세요~
수강생입니다.
강의 정말 잘 듣고 있습니다.
좋은 강의 감사합니다!
질문이 한가지가 있습니다.
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
1분코딩
지식공유자2022.09.13
영주니님 말씀이 맞습니다!
초반 구간(in)에서는 opacity가 0에서 1로 적용이 되어야하고, 후반 구간(out)에서는 1에서 0으로 적용이 되어야 하므로 해당 파트에서 둘 중 하나씩만 실행이 되어야 합니다. 구간은 얼마나 스크롤 되었는지를 나타내는 비율인 scrollRatio 값을 이용해서 판별하는 것이고요.
1
영주니
2022.09.08
강의중에 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만 실행하는 방식으로 코딩된 것 같습니다.
답변 2