SchBoard 2.1에는 다음과 같은 기능을 추가했다.

• LED 컴포넌트
• 컴포넌트 애니메이션
• 와이어 / 텍스트 숨기기 토글

LED 컴포넌트는 저번 시간에 이야기한 것과 같고, 와이어 / 텍스트 숨기기 토글은 말 그대로 와이어와 텍스트를 화면에서 숨길 수 있는 기능이다. 이번 일지에서 알아볼 것은 컴포넌트 애니메이션이다.

나는 움직이는 모든 것에 애니메이션이 추가되어야 한다고 생각하는 사람이다. 물론 모종의 이유로 애니메이션을 보기 힘들어하는 사람들이 있겠지만, 그런 사람들을 위해서 애니메이션을 줄이는 방법 또한 필요하다고 생각한다.

원래 SchBoard2에는 속도를 통해 구현한 모핑 애니메이션을 사용하려고 했다. 몇 주 전에 Elastic Motion이라는 프로젝트에서 진행해 본 일이 있었기 때문에 SchBoard2에 적용해보는 것도 나쁘지 않겠다고 생각했다. 하지만 속도를 통해 애니메이션을 구현하면 그 구현이 어렵고, 계산이 복잡해지기 때문에 일단은 보류해두고, 간단한 선형보간 애니메이션을 사용해보기로 했다.

SchBoard2에서는 이동 보간이라는 수치를 설정할 수 있어서, 이동 보간이 100에 가까울수록 애니메이션이 작동하지 않는 기능이 있다.

애니메이션의 구현

컴포넌트 애니메이션은 어느 때와 같이 선형보간 방식을 사용했다.

선형보간이란 두 입력값에 대한 함숫값 사이에 선형으로 보간하는 방식으로, 다음과 같이 이루어진다.

사진 출처: 한국어 위키백과 «선형 보간법»

어떤 $x_0$에 대한 함숫값 $y_0$과, 어떤 $x_1$에 대한 함숫값 $y_1$이 있을 때에, $x_0$과 $x_1$ 사이의 값 $x$에 대해서 선형보간 $y$는 다음과 같이 주어진다.

$\displaystyle{y = \frac{x - x_0}{x_2 - x_1}(y_1 - y_0) + y_0}$

즉, 임의의 $x \in [x_0, x_1]$에 대해 $y$값을 계산해낼 수 있는 것이다.

이 방법을 사용하면 지수적으로 한 점에 수렴하는 애니메이션을 만들 수 있다. 매 프레임마다 $x_0$값을 $x_1$방향으로 $0.15$ 등만큼 선형보간하게 만든다면 $x_0$는 $x_1$에 수렴할 것이다. 이때, 미시적인 차이만으로 계속 선형보간 애니메이션이 실행되는 것을 방지하기 위하여 $x_0$과 $x_1$의 차이가 일정 수준 이상이 되었을 때에 $x_0$을 $x_1$과 같게 만들고, $x_1$에 새로운 변화가 생기지 않는 이상 선형보간을 진행하지 않는다.

이러한 애니메이션은 사실 이미 카메라의 움직임에도 적용되었다. util.js에 lerp라는 함수를 만들어 사용하고 있다.