스프링 애니메이션

움직임은 오랫동안 시간과 곡선으로 지정했습니다. 0.3초 동안 빠르게 출발해 천천히 멈추라고 적는 방식입니다. 움직임이 이어지는 시간을 뜻하는 듀레이션과 가속·감속의 모양을 뜻하는 이징이 그 두 값입니다.

이 방식은 사용자가 보고만 있을 때는 잘 맞습니다. 손이 개입하는 순간부터 어긋납니다. 아래에서 올라온 시트를 끌어 내리다 놓으면 손을 뗀 순간에 속도가 남아 있는데, 시간으로 지정된 움직임은 그 속도를 버리고 정해진 0.3초를 처음부터 시작합니다. 빠르게 튕겼는데 화면은 느긋하게 제자리로 돌아가니, 검수에서는 손에서 떨어진 느낌이 안 난다는 말이 나옵니다.

스프링 애니메이션은 시간을 지정하지 않고 물리를 흉내 내 이 문제를 풉니다. 요소를 용수철에 매달린 물체로 다루면 손을 뗀 순간의 속도가 다음 움직임의 출발 속도가 됩니다.

시간 대신 세 값을 지정하고, 움직임의 길이는 그 값들의 결과로 나옵니다.

1. 강성은 제자리로 당기는 힘의 세기입니다. 높이면 급하게 달려가고 낮추면 늘어지게 움직입니다.
2. 감쇠는 움직임을 멈추게 하는 저항입니다. 낮으면 목표를 지나쳐 여러 번 흔들리고 충분히 높이면 한 번도 지나치지 않고 붙습니다. 튕김 없는 스프링을 만들 때 올리는 값입니다.
3. 질량은 물체의 무게입니다. 키우면 출발이 둔해지고 멈추기까지 오래 흔들립니다.

여기에 시작 속도가 하나 더 붙습니다. 손을 뗀 순간의 속도를 받아 이어 달리는 값이라, 끌던 손의 세기가 움직임의 세기로 넘어갑니다. 같은 시트를 살살 놓으면 조용히 닫히고 세게 튕기면 멀리 갔다 돌아옵니다.

대신 몇 초가 걸릴지는 미리 알 수 없습니다. 여러 요소가 순서대로 움직여야 하는 장면처럼 시간을 맞춰야 하는 자리에서는 시간 기반 방식이 다루기 쉽습니다. 실무에서는 손이 닿는 움직임에 스프링을 쓰고 자동으로 재생되는 움직임에 시간을 씁니다.

"이 시트는 스프링으로 가야 해요. 드래그 속도를 이어받아야 합니다."

손을 뗀 속도가 움직임에 반영되어야 한다는 제안입니다.

"스프링 감쇠를 올려 주세요. 두 번 튕기는 게 산만해 보입니다."

흔들림이 목적을 넘어 장식이 됐다는 지적입니다.

"이 구간은 듀레이션이 정확히 필요해서 스프링을 못 씁니다."

시간을 맞춰야 하는 자리라 길이를 예측할 수 없는 방식은 못 쓴다는 말입니다.

페이지덱에서는 카드를 끌어 순서를 바꾸는 기능에 이 방식을 처음 썼습니다. 민서가 0.25초짜리 시안을 만들었는데, 태오가 붙여 보니 카드를 빠르게 놓을 때마다 손과 화면이 어긋났습니다. 스프링으로 바꾸고 감쇠를 올려 한 번만 살짝 지나치게 맞추자 어긋남이 사라졌습니다. 목록이 처음 나타나는 움직임은 0.2초 시간 기반으로 남겼습니다.