이 두 용어는 서로 다른 질문에 답합니다. Smart Animate는 "무엇이 바뀌나요?"라고 대답합니다. 두 프레임을 살펴보고 이름이 일치하는 레이어를 찾은 다음 한 프레임에서 다른 프레임으로 위치, 크기, 회전, 불투명도 및 기타 속성에 애니메이션을 적용합니다.
"시간이 지남에 따라 어떻게 변합니까?"라는 대답을 완화합니다. Figma를 사용하면 이즈 아웃, 맞춤형 큐빅 베지어 곡선 또는 스프링과 같은 표준 곡선을 선택할 수 있습니다. 스프링 완화는 고정된 기간이 아닌 물리적 설정, 강성, 감쇠 및 질량에 의해 정의되므로 실제 객체와 마찬가지로 모션 속도가 빨라지고 고정됩니다.
실제 차이점은 코드에 나타납니다. 제품에서 스프링은 요소의 현재 위치와 속도에서 시작할 수 있습니다. 사용자가 전환을 중단하거나 시트를 튕기면 모션이 점프하지 않고 자연스럽게 계속됩니다. 프로토타입 전환은 매번 동일한 방식으로 재생됩니다. 이는 의도를 표시하는 데에는 적합하지만 실제 입력 시 모션이 어떻게 작동하는지 보여주지는 않습니다.
따라서 Figma 프로토타입은 좋은 참조가 되지만 개발자는 여전히 코드에서 모션을 재구성합니다. 값의 일관성을 유지하기 위해 많은 팀에서는 스프링 설정을 모션 토큰으로 저장합니다. 무료 Figma 애니메이션-스프링 변환기는 Figma 이징을 코드에서 사용할 수 있는 스프링 설정으로 전환합니다.
대화형 버전을 참조가 아닌 결과물로 만들려면 런타임이 포함된 도구가 필요합니다. 우리가 만드는 ExodeUI는 앱에서 실행되는 하나의 파일에 상태, 스프링 및 이벤트를 저장합니다.