[ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 2

저번 포스팅에서는  캔버스 내에서 좌우 흰색 영역을 설정하는 것까지 진행했었다.

이제 그 흰색 영역들의 X좌표를 이용하여, 스크롤에 따라 옆으로 이동시켜주기만 하면 된다.

 

구현순서는 아래와 같다.

• 캔버스가 시작하는 타이밍의 Y좌표
• 그 Y좌표부터 시작하여 스크롤섹션이 끝날때까지 애니메이션 설정

 

---

 

 

 

간단하다. 그럼 바로 Y좌표 (시작점)을 구해보자.

 

가장 간단한 방법으로는 getBoundingClientRect()라는 내장메소드를 사용하는 것이다.

domRect = element.getBoundingClientRect();

 

위의 메소드를 사용하면, 상대적인 뷰포트와 Y,X값 모두 알 수 있다. 하지만, 스크롤을 빠르게 느리게할때마다 다른 값이 출력되 이 방법으로는 딱 떨어지는 정밀한 애니메이션을 구현할 수 없다는 생각이 들었다.

 

 

 

 

---

 

 

 

그래서, offsetTop 을 사용하기로 했다.

offsetTop은 document의 최상단에서부터의 Y좌표를 구할 수 있다.

스크롤이벤트에 기반하지 않기때문에 스크롤을 어떠한 방식으로든 절대적인 값을 얻어낼 수 있다.

 

        if (!values.rectStartY) {
          values.rectStartY =
            objs.canvas.offsetTop +
            (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2;
          values.rect1X[2].start = window.innerHeight / 2 / scrollHeight;
          values.rect2X[2].start = window.innerHeight / 2 / scrollHeight;
          values.rect1X[2].end = values.rectStartY / scrollHeight;
          values.rect2X[2].end = values.rectStartY / scrollHeight;
          console.log(values.rectStartY);
        }

 

 

offsetTop에서 추가적으로 값을 더해준 이유는 scale이 변함에 따라, offsetTop값을 재설정해주어야하기 때문이다.
scale을 통해 크기가 변해도, offsetTop은 변하기 이전의 값을 기준으로 출력된다!

 

 

 

위와 같이, 가장 처음 시작할때의 Y좌표만 구하면 되기 때문에 조건문을 사용해서 구해주었다.

이 Y좌표를 사용해서, 전체 height에서 Y좌표의 비율이 애니메이션이 끝나는 지점이 될 것이다.

( Y좌표가 브라우저의 상단에 닿을 때, 이미지가 꽉차야하기 때문에.)

 

 

 

 

---

 

 

 

이제 기존에 만들었던 calcValues 함수를 통해, 스크롤비율에 따른 value값에 따라 캔버스에 그려주자.

        // 좌우 흰색 박스 그리기
        objs.context.fillRect(
          parseInt(calcValues(values.rect1X, currentYOffset)),
          0,
          parseInt(whiteRectWidth),
          objs.canvas.height
        );
        objs.context.fillRect(
          parseInt(calcValues(values.rect2X, currentYOffset)),
          0,
          parseInt(whiteRectWidth),
          objs.canvas.height
        );

 

 

 

 

이제 정확하게 이미지가 스크롤에 따라 점점 차오르는 것을 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

애플 웹사이트 클론이 거의 끝나간다. 너무 질질 끌다보니, 루즈해지고 있는데 조금만 힘내자!