3번째 섹션 인터렉션 구현 - 부드러운 감속의 원리

딱딱 끊김없이 애니메이션이 진행되게끔 하는 기술이다.
이 기술을 활용하면 맥북에서 윈도우 마우스휠 + 키보드 대응도 가능하다.

원리
시작지점(a)에서 끝지점(b)으로 이동하는 애니메이션이 있다.
이동할 때 이동해야될 거리의 1/10 만큼 계속 이동시킨다.
(b-a) / 10
(b-(b-a)/10)/10
(b- (b-(b-a)/10)/10) / 10
… … requestAnimationFrame은 반복적인 재귀함수로 짜고, + requestAnimationFrame는 60 프레임을 목표로한다.
이러면 엄청 부드러워 보인다.

var obj;
// 해당 애니메이션 시작점
var a = 0;
// 해당 애니메이션 끝점
var b = 1000;
var move = 0;
var rafId;

var animation = function () {
    move = (b-a)/ 10;
    a += move;
    obj.style.transform = `translate3d(${a}px, 0, 0)`;
    rafId = requestAnimationFrame(animation);
    if (b-a < 1) {
        cancelAnimationFrame(rafId);
    }
}
animation();
window.addEventListener('scroll', () => {
    animation();
})

위와 같은 식을 스크롤 이벤트에 걸어준다.

섹션이 넘어갈 때 순간적인 버그가 발생한다. 그 이유는?

enterNewScene 변수의미 기억남?
해당 변수를 적용할 때와 같은 이유이다.
넘어갈 때 한템포 늦게 계산되도록 true/false를 적용하자.

위의 a, b가 간단히 써서 그렇지 원래는 스크롤 위치에 따른 이전 값 ‘a’, 스크롤 마지막 위치에 따른 값 ‘b’ 이다.
즉 위와 같이 1/10으로 쪼개서 계산해서 스크롤 위치를 활용하는 다른 곳에도 에러가 발생할지 모른다.

즉 현재 스크롤 위치 값으로 체크하는 scollLoop 함수의 yOffset을 delayedOffset으로 교체한 이유가 이것이다.