Flash에서 Lottie, 상태 머신까지: 웹 벡터 애니메이션의 진화
웹 벡터 애니메이션이 Flash 및 ActionScript에서 Lottie의 After Effects 내보내기로 이동한 다음 상태 머신 런타임으로 이동한 방법과 각 단계에서 변경된 사항.
핵심 포인트
Flash는 벡터 애니메이션과 상호 작용을 하나의 도구로 결합했지만 Adobe가 2020년 12월 31일 이후 지원을 중단한 플러그인에서 실행되었습니다. Lottie는 기본적으로 웹 및 모바일에서 Bodymovin를 사용하여 JSON로 내보낸 After Effects 애니메이션을 재생하여 벡터 애니메이션을 다시 가져왔지만 해당 애니메이션은 재생만 가능합니다. Rive 및 ExodeUI와 같은 상태 머신 런타임은 설계 파일에 다시 상호작용성을 추가합니다.
Flash: 애니메이션과 로직이 한 곳에
Flash를 사용하면 디자이너가 벡터를 그리고 타임라인에 애니메이션을 적용하고 ActionScript를 사용하여 동작을 추가하는 모든 작업을 하나의 파일에서 수행할 수 있습니다. 게임, 광고 및 전체 웹사이트를 구동했습니다. 이 플러그인의 약점은 플러그인이었습니다. 브라우저 자체 기술 외부에서 실행되어 지속적인 보안 및 성능 문제가 발생했습니다. Adobe는 2020년 12월 31일 이후 Flash 플레이어에 대한 지원을 종료하고 2021년 1월 12일부터 Flash 콘텐츠 실행을 차단했습니다.
Lottie: 플러그인이 없는 벡터
Airbnb의 Lottie는 Bodymovin 플러그인을 사용하여 JSON로 내보낸 Adobe After Effects 애니메이션을 구문 분석하고 웹, iOS, Android 및 React Native에서 기본적으로 렌더링합니다. 이를 통해 다시 앱에서 풍부한 벡터 모션을 실용화할 수 있게 되었으며, 여전히 단순하게 재생되는 애니메이션에 대해 가장 널리 지원되는 형식입니다.
누락된 부분: 상호작용성
Lottie 파일은 동작이 아닌 타임라인을 설명합니다. Lottie 애니메이션이 마우스 오버, 로딩 또는 성공에 반응하도록 만드는 것은 플레이어 주위에 코드를 작성하는 것을 의미합니다. Flash에는 해당 동작이 내장되어 있습니다. 플러그인이 없는 세상은 그것을 잃었습니다.
상태 머신: 파일의 동작이 다시 수행됩니다.
상태 머신 런타임은 플러그인 없이 Flash 아이디어를 다시 가져옵니다. Rive를 사용하면 벡터 애니메이션을 디자인하고 이를 코드 입력을 제어하는 상태 머신에 연결할 수 있습니다. 우리가 만드는 ExodeUI는 동일한 아이디어를 제품 UI에 적용하여 React, SwiftUI, Flutter 등의 런타임에서 재생되는 하나의 열린 JSON 파일에 레이아웃, 스프링 물리학 및 로직을 추가합니다.
기억할 핵심 원칙
- Flash는 플러그인에서 벡터 애니메이션과 상호 작용을 결합했습니다.
- Adobe는 2020년 12월 31일 이후 Flash 플레이어 지원을 종료했습니다.
- Lottie는 Bodymovin로 내보낸 After Effects 애니메이션을 기본적으로 재생합니다.
- Lottie 애니메이션이 재생됩니다. 상호 작용에는 추가 코드가 필요합니다
- 상태 머신 런타임은 작성된 동작을 다시 파일로 가져옵니다.
자주 묻는 질문
출처
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub(에어비앤비)
- State Machine Playback — Rive 문서