물체의 움직임을 어떻게 정의할 수 있을까요? 한가지 방법은 운동방정식으로 표현하는 것입니다. F = ma 는 유명한 공식입니다. 힘은 곧 물체에 가속운동을 일으킨다는 것이죠.

용수철 운동에서 힘은 평형점으로부터 얼마나 떨어져있는가에 비례합니다. F = -kx 인 것이죠. 떨어긴 방향의 반대방향으로 힘이 생기고, 탄성계수가 클수록 당기는 힘이 큽니다.

실제 물리세계에서는 용수철운동에서 공기저항도 고려해야 합니다. 대게 공기저항은 속도가 클수록 반대방향으로 작용합니다.

공기저항은 공기 속 수많은 입자들과의 충돌로 발생합니다. 상상해보세요. 우리가 입자에 쎄게 부딪힐수록 입자는 더 빠르게 날아갑니다. 반대로 말하면 입자가 빠르게 날아가는 만큼 우리는 운동량을 입자로부터 뺏깁니다. 그래서 공기저항은 우리의 속도가 빠를수록 더 커지는 것이죠.

그래서 최종적인 힘은 F = -kx-bv 가 됩니다. 이를 뉴턴의 운동방정식과 연결하면 F = ma = -kx-bv 가 되고 a, v, x 는 모두 x와 관련된 변수죠. (v는 단위시간에 대한 x의 변화량, a는 단위시간에 대한 v의 변화량)

우리는 이것을 미분방정식으로 표현할 수 있습니다. 그리고 모든 미분방정식은 수치해석으로 풀어낼 수 있죠. 짧은 시간동안은 물체가 등속운동한다고 생각해보세요.

dt동안 물체는 v * dt 만큼 움직입니다.
dt동안 속도는 a * dt 만큼 변화합니다.
가속도는 현재 거리와 속도에 의해 정해집니다.

짧은 시간별로 변화하는 x, v, a 를 누적해서 계산하면 우리는 시간별로 물체가 어떻게 움직이는 지를 기술할 수 있습니다.

현실세계의 물체는 모두 연속된 속도와 연속된 가속도 사이에서 움직입니다. 물체가 움직이다가 갑자기 방향이 바뀐다고 생각해보세요. 물체를 오른쪽으로 끄는 힘이 이제 왼쪽으로 방향을 바꾼다고, 물체가 바로 왼쪽으로 움직이진 않습니다. 오른쪽으로 향하던 속도는 점차 줄어들어 0이 된 뒤 왼쪽으로 움직입니다.

여기서 css 애니메이션과 spring 애니메이션의 차이가 발생합니다. css는 갑작스럽게 방향을 꺽습니다. spring은 연속적으로 속도가 변하며 방향을 전환합니다. 후자가 더욱 현실에 가깝습니다. ssgoi가 spring 애니메이션을 지향하는 이유입니다.