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

애플 웹사이트 인터랙션 클론!

부드러운 감속 비디오에 적용하기

작성

186

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

클론코딩 svg HTML/CSS 인터랙티브-웹 javascript 웹 디자인

답변 3

1분코딩

지식공유자

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

이종민

질문자

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

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

이종민

질문자

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

인프런 커뮤니티 질문&답변

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