상위 질문
타임라인
채팅
관점

로티 (파일 형식)

벡터 그래픽 애니메이션을 위한 파일 형식 위키백과, 무료 백과사전

로티 (파일 형식)
Remove ads

로티(Lottie)는 벡터 그래픽 애니메이션을 위한 파일 형식으로, 독일 실루엣 애니메이션의 선구자인 Charlotte "Lotte" Reiniger의 이름에서 따와 명명되었다.[1]

간략 정보 파일 확장자, 인터넷 미디어 타입 ...
Thumb
1939년의 로테 라이니거

설명

Lottie는 JSON을 기반으로 하지만 Lottie 파일은 길이가 1~2자의 키를 사용하며 사람이 읽을 수 없다. 웹, 모바일 및 데스크탑 애플리케이션에서 사용하기 위해 애니메이션 GIFAPNG 파일에 대한 더 가벼운 대안으로 만들어졌다. 벡터형이므로 장치 해상도와 무관하다. 래스터 그래픽 요소도 포함될 수 있다. 프로그래밍이 가능하고 상호 작용 기능을 추가할 수 있다.[2]

플레이어 구현에 따라, CPU, GPU 및 메모리 사용량에 차이가 존재할 수 있다.[3]

역사

요약
관점

2015년 - 에르난 토리시는 애니메이션 데이터를 JSON으로 직렬화하여 런타임에 렌더링하는 애니메이션 소프트웨어 Adobe After EffectsBodymovin[4] 이라는 플러그인을 개발했다. After Effects 내부 형식의 주요 기능을 지원한다.[5] 또한 에르난 토리시는 최신 브라우저용 JavaScript 기반 플레이어가 포함된 형식의 렌더러를 출시했다.[2][6]

2017년 - 엔지니어 브랜든 위드로우(Brandon Withrow)가 iOS, 가브리엘 필(Gabriel Peal)은[7] 안드로이드, 리랜드 리처드슨(Leland Richardson)은 리엑트 네이티브 전용 로티 플레이어 개발에 참여했고 AirBnB의 수석 애니메이터 살리 푸둘 카림(Salih Abdul-Karim)과 함께 첫 번째 Lottie 라이브러리를 만들었다.[8] 이로 인해 다양한 플랫폼에서 로티 애니메이션을 지원하기 시작했다.[9]

또한 다른 회사들의 노력으로 더 많은 플랫폼을 지원하기 시작했다.[2]

2018년 - 마이크로소프트. NET Foundation은 Windows 전용의 로티 렌더링 라이브러리[10]를 출시했다.

2019년 - 로티 렌더링을 위한 QML API를 추가하면서 Qt[11] 에서 로티 애니메이션 지원을 시작했다. 같은 해 후반에 삼성전자는 플랫폼 독립적인 C++ 기반 렌더러인 rLottie[12]를 출시하고 타이젠에 로티 지원을 추가했다. 이 형식을 사용하는 Python 프레임워크도 올해 출시되었다.[13]

2020년 - dotLottie가 탄생했다. 이 오픈 소스 파일 형식은 여러 로티 파일과 모든 지원 리소스를 단일 파일로 결합한다.

2023년 - 토르 벡터 그래픽스가 자체 엔진을 기반으로 로티 렌더링 기능을 지원하기 시작했다.[14]

Thumb

{
    "v": "5.7.1",
    "ip": 0,
    "op": 180,
    "nm": "Animation",
    "fr": 60,
    "w": 512,
    "h": 512,
    "layers": [
        {
            "ddd": 0,
            "ty": 4,
            "ind": 0,
            "st": 0,
            "ip": 0,
            "op": 180,
            "nm": "Layer",
            "ks": {
                "a": {
                    "a": 0,
                    "k": [
                        256,
                        256
                    ]
                },
                "p": {
                    "a": 0,
                    "k": [
                        256,
                        256
                    ]
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100
                    ]
                },
                "r": {
                    "a": 0,
                    "k": 0
                },
                "o": {
                    "a": 0,
                    "k": 100
                }
            },
            "shapes": [
                {
                    "ty": "el",
                    "nm": "Ellipse",
                    "d": 1,
                    "p": {
                        "a": 0,
                        "k": [
                            256,
                            256
                        ]
                    },
                    "s": {
                        "a": 0,
                        "k": [
                            256,
                            256
                        ]
                    }
                },
                {
                    "ty": "st",
                    "nm": "Stroke",
                    "o": {
                        "a": 0,
                        "k": 100
                    },
                    "c": {
                        "a": 0,
                        "k": [
                            0.114,
                            0.157,
                            0.282
                        ]
                    },
                    "lc": 2,
                    "lj": 2,
                    "ml": 0,
                    "w": {
                        "a": 0,
                        "k": 20
                    }
                },
                {
                    "ty": "fl",
                    "nm": "Fill",
                    "o": {
                        "a": 0,
                        "k": 100
                    },
                    "c": {
                        "a": 0,
                        "k": [
                            0.196,
                            0.314,
                            0.690
                        ]
                    },
                    "r": 1
                }
            ]
        }
    ]
}
Remove ads

dotLottie 파일 형식

간략 정보 파일 확장자, 인터넷 미디어 타입 ...

2020년에는 Lottie 파일을 다른 리소스와 함께 압축하는 표준 방법으로 dotLottie 파일 형식이 제안되었다. 파일은 실제로 deflate 방법으로 압축된 zip 파일이다. 여기에는 매니페스트 파일 과 미리보기 이미지가 포함되어 있어 파일을 쉽게 조작할 수 있다.[15]

각주

외부 링크

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads