• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

22.05.22 17:15 작성 조회수 111

0

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

답변 3

·

답변을 작성해보세요.

0

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

0

이종민님의 프로필

이종민

질문자

2022.06.01

2번 복습하니 왜인지 알것 같습니다!

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

0

이종민님의 프로필

이종민

질문자

2022.05.22

저 같은 경우는 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;
    }
}