선형 보간법(linear interpolation)

UI 버튼을 화면에 표기하려 한다. 이 때 UI는 처음 화면 밖에 있다가 화면 중앙으로 빠르게 이동하면서 천천히 중앙에 도달하는 애니메이션 UI를 만들고 싶을 때 어떻게 하면 좋을까? 

 

 

 

function lerp(pos: number, tPos: number, amount: number) {
  return pos + (tPos - pos) * amount;
}

바로 선형보간법을 이용하여 구현할 수 있다.

선형보간법이란?
시작점과 끝점, 두 점의 값이 주어졌을 때 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법이다.

 

UI 버튼의 X, Y 좌표를 선형보간법을 사용하여 매 프레임마다 일정 거리만큼 이동시켜주면 된다.

const x = lerp(x, screenCenterX, 0.2);
const y = lerp(y, screenCenterY, 0.2);