lottie.js로 시작하는 것-IT산업-php.cn

웹 애니메이션의 10 년간 변환 : 플래시의 몰락에서 Lottie의 부상까지 약 10 년 전, 웹 애니메이션은 큰 도전에 직면했습니다. Adobe Flash는 점차 감소하지만 적절한 대안이 없습니다. 대규모 애니메이션 프리젠 테이션, 만화 및 배너 광고를 만들 수있는 빠르고 쉽게 만들 수있는 웹 친화적 인 형식이 필요합니다. 운 좋게도 2014 년 에어 비앤비는 솔루션 -TORTIE.JS를 제공했습니다.

키 포인트 :

lottie.js는 플래시 대안으로 등장했습니다. 웹 친화적 인 애니메이션을 만드는 대안. 2014 년 에어 비앤비는 웹, iOS, Android, Windows 및 React Native를 포함한 여러 플랫폼에서 빠르고 낮은 대역폭 애니메이션을 만들도록 설계된 벡터 기반 애니메이션 형식 인 Lottie.js를 소개했습니다. AirBnB의 Salih Abdul-Karim이 개발 한 Lottie는 GIF, MPEG 또는 CSS 애니메이션의 대안으로 벡터 그래픽 애니메이션에 확장 가능하고 효율적인 솔루션을 제공하도록 설계되었습니다.

lottie.js의 장점과 생태계 :

로티 애니메이션 생성을위한 도구 및 실용적인 사용 사례 : Lottie 애니메이션은 다양한 "Lottie 지원"애니메이션 도구를 통해 애니메이션 도구의 품질과 Lottie 코드 배포의 어려움을 고려하여 생성 할 수 있습니다. . Adobe After Effects에서 KeyShape 및 Lottiefiles에 이르기까지 각 도구는 다양한 요구 사항과 애니메이션의 전문 지식을 충족시키기 위해 고유 한 기능, 가격 및 플랫폼 지원을 제공합니다. KeyShape는 일회성 가격으로 애니메이션을 자주하지 않는 사용자를위한 비용 효율적인 솔루션을 나타내며 Flow는 종종 애니메이션을하는 작업에 대한 포괄적 인 패키지를 제공합니다. Lottiefiles는 지역 사회, 시장 및 간단한 편집 유틸리티를 제공하여 Lottie 애니메이션의 생성 및 공유를 지원함으로써 생태계를 더욱 풍부하게합니다.

로티 란?

<.> lottie.js는 Airbnb Experience와 Dynamic Designer Salih Abdul-Karim에서 만든 오픈 소스, 벡터 기반 애니메이션 형식입니다. Lottie Engine은 웹, iOS, Android, Windows 및 React Native에서 동일한 방식으로 빠르고 명확하며 낮은 대역폭 벡터 애니메이션을 렌더링하도록 설계되었습니다. 간단히 말해서, SVG를 사용하여 이미지를 만들고 싶다면 Lottie는 이러한 벡터 그래픽을 애니메이션하는 좋은 방법입니다. GIF, MPEG 또는 CSS 애니메이션을 더 가볍고 빠르며 확장 가능한 것으로 바꾸려면 Lottie가 가장 좋은 답변 일 것입니다.

Bashir Ahmed의 아름다운 예에서 볼 수 있듯이 Lottie는 작은 파일에서 풍부한 캐릭터, 가볍고 부드러운 움직임을 생성합니다.이 애니메이션은 54KB 파일에서 생성됩니다.

가장 기본적인 로티 애니메이션 (예 : Bashir 's)에는 두 개의 파일 만 필요합니다.

Lottie Animation Player (lottie.js) JSON 애니메이션 지침 파일 왜 Lottie를 선택해야합니까?

CSS 애니메이션에서 SVGS의 Smils, Greensock, Animejs 및 기타 JavaScript 라이브러리에 이르기까지 웹 벡터를 애니메이션하는 방법에는 여러 가지가 있습니다.

그러나 로티는 킬러의 장점이 있습니다.

고품질 비주얼 애니메이션 도구의 증가하는 생태계

부드럽고 빠르며 효율적이며 스크립트 가능한 애니메이션을 내보낼 수

Adobe Flash의 잘 알려진 단점에도 불구하고 장기적인 성공은 좋은 창의적인 도구와 간단한 크로스 플랫폼 배포를 결합하는 것을 기반으로합니다. Lottie는 플래시의 몇 가지 장점이 있다고 생각합니다.

로티 애니메이션을 만드는 방법?

로티 파일은 JSON 텍스트 파일에 지나지 않기 때문에 기술적으로 모든 IDE에서 애니메이션 코드를 직접 쓸 수 있습니다. 실제로 Lottie를 지원하는 애니메이션 도구를 선택해야합니다. 다음은 내가 시도하고 테스트 한 몇 가지 도구에 대한 내 생각입니다.

로티 도구 검토

Adobe After Effects

하이쿠 애니메이터

흐름 키 샤프 lottiefiles

내 생각에, 로티 애니메이션 도구를 선택할 때 고려해야 할 두 가지 요소가 있습니다.

좋은 애니메이션 도구입니까?

Lottie 코드를 쉽게 배포 할 수 있습니까?

각 도구에 대해이 두 가지 측면을 개별적으로 소개합니다.

... (다음 컨텐츠는 원래 텍스트의 각 도구의 소개 부분을 단순화하고 다시 작성하여 핵심 정보를 유지하고 구조를 조정하여 더 매끄럽고 읽기 쉬운 구조를 조정했습니다. 공간 제한으로 인해 일부는 공간 제한으로 인해 일부 자세한 설명은 여기에서 생략됩니다

요약 가벼운 벡터 애니메이션을 자주 만들어야한다면 Flow는 아마도 가장 집중적이고 완전한 Lottie 개발 도구 일 것입니다. 명확한 워크 플로우가 있으며 수출 옵션은 대부분의 경쟁 업체만큼 좋거나 더 좋습니다.

Adobe After Effects를 이미 알고 있고 좋아하는 경우 아는 도구를 사용하십시오.

제 경우에는 애니메이션을 좋아하지만 근무 시간의 주요 부분은 아닙니다. 몇 달이 지났고 나는 애니메이션 프로젝트에 노출되지 않을 수 있습니다. 다른 월별 구독을 정말로 원합니까? 어쩌면 ... 아니요.

나에게 KeyShape ($ 29)는 잘 숨겨져 있어도 돈 도구에 대한 놀라운 가치처럼 보입니다.

<..> lottie.js faq ... (원래 FAQ 부분은 핵심 정보를 보존하기 위해 간소화되었습니다) lottie.js 란 무엇입니까? Lottie.js는 Airbnb에서 만든 JavaScript 라이브러리로, 개발자는 BodyMovin이라는 가벼운 JSON 형식을 사용하여 웹 및 모바일 애플리케이션에 Adobe After Effection 애니메이션을 쉽게 포함하고 재생할 수 있습니다. lottie.js는 BodyMovin 플러그인을 사용하여 Adobe After Effects에서 생성 된 애니메이션을 JSON 형식으로 내보내는 방법을 어떻게 작동합니까? 그런 다음 lottie.js 라이브러리는 이러한 JSON 파일을 실시간으로 구문 분석하고 렌더링하여 고품질 애니메이션을 웹 및 모바일 응용 프로그램에 쉽게 통합 할 수 있습니다.

lottie.js를 사용하는 장점은 무엇입니까? JavaScript를 통해 쉽게 제어 할 수있는 고품질의 확장 가능하며 대화식 애니메이션을 제공합니다.

lottie.js를 사용할 수있는 환경은 어디에 있습니까? 다양한 플랫폼과 프레임 워크를 지원합니다.

lottie.js를 사용할 때 크기 또는 성능 고려 사항이 있습니까? 그러나 After Effects 애니메이션은 최적의 성능을 위해 Lottie 내보내기에 최적화되어야합니다.

위 내용은 lottie.js로 시작하는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!