마지막 에러 해결 방법이 정말 궁금합니다.

Question

코드 상과 타이밍 상을 생각해도 yOffset을 쓰는 것에 논리적인 모순이 없는 것 같은데에도 불구하고, 캔버스 중간에 중간 이미지가 그려지는 이상이 생기는 이유가 궁금합니다. console을 찍어도 순간 포착되는 이미지가 찍히지 않는데도 캔버스에 등장하는 이유를 알려주세요ㅠㅠ 혹시 yOffset이 delayedYOffset보다 큰 관계로 enterNewScene이 제대로 작동하지 않아서 그런걸까요?

1분코딩 · Answer

아아 네, 답변이 늦었네요. 계속 화이팅입니다^^

이종민 · Answer

2번 복습하니 왜인지 알것 같습니다! scene의 변경이 yOffset으로 인해 발생하여 prevScrollHeight의 시점이 잠깐동안 delayedYOffset에 맞춰주지 못해 발생된 걸로 확인되었습니다!

이종민 · Answer

저 같은 경우는 sequence가 음수인데도 화면에 그리기 때문에 아래처럼 처리했는데, 이렇게 구현해도 될까요? function loop (){ delayedYOffset = delayedYOffset + ( yOffset - delayedYOffset ) * acc ; if (! enterNewScene ) { if ( currentScene === 0 || currentScene === 2 ){ const currentYOffset = delayedYOffset - prevScrollHeight ; const values = sceneInfo [ currentScene ]. values ; const objs = sceneInfo [ currentScene ]. objs ; let sequence = Math . round ( calcValues ( values . imageSequence , currentYOffset )); sequence < 0 && objs.context.clearRect(0, 0, objs.canvas.width, objs.canvas.height) objs . videoImages [ sequence ] && objs . context . drawImage ( objs . videoImages [ sequence ], 0 , 0 ); } } rafId = requestAnimationFrame ( loop ); if ( Math . abs ( yOffset - delayedYOffset ) < 1 ){ //목표 위치와 1px 이하로 차이가 나면, RAF 실행 멈추기 (브라우저를 위한 최적화) cancelAnimationFrame ( rafId ); rafState = false ; } }