본문으로 건너뛰기
黯羽轻扬매일 조금씩

Lottie 애니메이션 소개

무료2018-09-21#Solution#Lottie#Lottie-web#h5 lottie#跨端动画#AE导出动画

크로스엔드 애니메이션 방안, Web, Android, iOS, React Native 를 지원

一.곤경

애니메이션을 만들 때 피할 수 없는 경험이 있습니다:

Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference

GIF 이미지/효과 비디오를 참고하여 모방하고, 애니메이션 지속 시간을 추측하고, 베지어 곡선을 수동으로 생성……파라미터를 반복 조정하고, 여러 번 육안으로 효과를 확인하고, 마지막에 발견:

  • 많은 세부적인 차이가 존재

  • 효과가 충분히 섬세하지 않음

  • 호환성 등의 제약으로 인해, 일부 효과는 구현할 수 없음

好不容易구현했지만, 재현도가 요구에 도달하지 못함. 통상 디자이너가 타협하거나, 함께 반나절 동안 조정하고, 상대가 만족할 때까지 수정함. 결과, 세부 사항을 조정하는 데 소요되는 시간이 예상의 몇 배나 되고, 효과는 아직 만족스럽지 않음

경험이 풍부한 디자이너는 AE(Adobe After Effects) 에서 유용한 정보를 복사할 수 있음. 예를 들어 베지어 곡선 파라미터, 애니메이션 지속 시간……더 나아가 구현 사고를 제공할 수도 있지만, 어쨌든, 비디오를 참고하여 애니메이션을 구현하는 것은 모사와 같아서, 효과의 차이는 피할 수 없음. 잘 생각해 보면, 이 과정에서 애니메이션은 디자이너에게 상당한 작업량이지만, 엔지니어 측에는 더욱 큰 작업량이 있음. 각 타겟 플랫폼에 1 つ씩 작업량이 있고, 이러한 작업은 일회성이며, 거의 재사용할 수 없고 유지도 어려움 (수백 행의 병행, 직렬 애니메이션 시퀀스에서 특정 파라미터를 찾아내어, 0.1 을 추가함)

그렇다면, 왜 1 장의 그림이 완성된 후 여러 번 모사할 필요가 있는가? 1 + N 의 작업량을 1 + 0.n 으로 축소하고, 동시에 효과의 고도 재현을 보증할 수 있는가?

二.탐색

이 그림이 이미 완성되어 있다면, 제로부터 수동으로 모사할 필요가 없음. 도구를 사용하여 그림에서 필요한 정보를 추출하고, 타겟 플랫폼에서 이 정보를 사용하여 애니메이션을 재구축할 수 있음:

Now engineers can use exactly what the designer intended, exactly how it was made.

이로 인해:

  • 높은 재현도를 보증 (디자인 원고에서 직접 취득한 애니메이션 파라미터는, 확실히 신뢰할 수 있음)

  • 복수 엔드의 N 份의 작업량을 축소 (기초 애니메이션 코드를 고도로 재이용 가능하게 하고, 구체적인 효과를 구성 가능하게 함)

이전 경험이 풍부한 디자이너가 애니메이션 파라미터를 복사했던 것과 마찬가지로, 디자인 초고에서 충분한 필요한 정보를 익스포트하면 재현도를 확보할 수 있음 (exactly how it was made)

완전한 애니메이션 파라미터가 있으면, 더욱 구성화를 진행할 수 있음. 타겟 플랫폼에서 이 구성 데이터를 해석하고, 궤적의 재생 (애니메이션의 재구축) 을 완료함. 각 플랫폼에서 업무 무관계의 애니메이션 기초 라이브러리를 구현하고, 업무층은 구성 데이터를 기초 라이브러리에 입력하기만 하면 됨. 그 후, 구성 데이터가 애니메이션 효과, 타이밍及其び 조합을 제어함. 이로써 N 의 업무층 작업량을 0.n 으로 축소할 수 있음

三.목표定位

Lottie 는 바로 그러한 방안으로, 복수 엔드에서의 애니메이션 구현의 업무 작업량을 축소 (easily) 하고, 동시에 애니메이션 효과의 고도 재현을 보증 (high-quality) 하고자 함:

Easily add high-quality animation to any native app.

구체적으로는:

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

복수 엔드 (iOS, Android, React Native 및 Web) 에 적합하며, AE 애니메이션 효과를轻松愉快하게 구현할 수 있음

Lottie allows engineers to build richer animations without the painstaking overhead of re-writing them.

크로스플랫폼의 우세는 복수 엔드의 중복 작업을 축소하는 데 있음.毕竟애니메이션 효과의 정의와 구현은 복잡하고 시간이 걸리는 일이기 때문:

How difficult and time consuming it can be to re-create animations from scratch.

실제, 유사한 다른 방안도 있음. 예를 들어 facebookincubator/Keyframes:

A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices.

Keyframes 의 국한성은 일부 (교호 응답 방면의) AE 특성만 을 서포트하는 데 있음. 한편, Lottie 의 목표는 대다수의 AE 특성을 서포트하는 것:

Our goal is to support as many After Effects features as we possibly can, to allow for a lot more than simple icon animations.

서포트하는 AE 특성이 많으면 많을수록, 디자이너에 대한 제약이 적어짐. 이것도 Lottie 방안이 더욱 인기 있는 이유의 1 つ임

四.구현 사고

            JSON
Bodymovin ----------> Lottie Player
            이미지 자원

디자이너가 AE 로 애니메이션을 만든 후, Bodymovin(AE 플러그인) 을 통해 JSON 형��의 Lottie 애니메이션 정의 및相关び이미지 자원을 익스포트하고, Android, iOS, ReactNative, Web 프런트엔드 엔지니어에게 출력함. 엔지니어는 대응 플랫폼의 Lottie Player 를 호출하여 애니메이션 자원을 로드하고, 애니메이션의 재생/일시 정지 등을 제어함

AE 플러그인 부분은 AE 의 애니메이션 정의를 Lottie 애니메이션 정의로 변환하고, JSON 파일을 출력함. 난점은 보다 많은 AE 특성의 변환을 서포트하여, 디자이너가 사용하기 불편하지 않도록 하는 것

플레이어 부분은 Lottie 애니메이션 정의를 해석하고, 相关び자원을 로드하며, 플랫폼이 서포트하는 기술을 사용하여 애니메이션 효과를 구현함. 예를 들어 Web 환경에서는 디폴트로 SVG 애니메이션을 통해 구현하고, Canvas 묘사와 CSS 애니메이션 구현을 선택 가능

鍵 은:

  • 공통의 애니메이션 정의

  • 각 플랫폼 하에서 해당 애니메이션 정의를 서포트하는 플레이어

Java 의 크로스플랫폼 사고와 유사: 플랫폼 무관계의 class 파일 + 플랫폼相关び의 JVM 구현

五.lottie-web

airbnb/lottie-web 는 Web 환경의 Lottie Player 로, 간단한 수행의 코드로 복잡한 애니메이션 효과를 구현할 수 있음. 예를 들어:

<div id="bm"> </div>

var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

P.S. 구체적인 효과는 Simple Bodymovin Demo 참조

디폴트로 SVG 를 통해 구현 (renderer: 'svg'). 더욱이 canvas 와 html 도 서포트. 차이는:

  • svg: 애니메이션 요소 (형상 등) 를 SVG 로 구현하고, 애니메이션 효과를 SVG 애니메이션으로 수행

  • canvas: 요소를 Canvas 로 묘사하고, 애니메이션 효과를 rAF 로 정시 갱신 재묘사를 통해 구현

  • html: 애니메이션 요소를 SVG 로 구현하고, 애니메이션 효과를 CSS 애니메이션으로 수행

실제 사용中发现, SVG 모드의 호환성이 가장 좋음. HTML 모드에서는 마스크 애니메이션에 모서리가 확대되어 사각형이 되는 문제가 존재

P.S.SVG 及其び애니메이션에 대해서는, [SVG 기초 지식](/articles/svg 기초 지식/) 참조

P.S. 보다 상세한 API 는 Usage 참조

lottie-web 를 도입하는 방법은 2 가지. CDN 자원 을 참조하거나, 최신 release 를 다운로드:

$ ls lottie-web-5.3.0/build/player/
lottie.js		lottie.min.js		lottie_light.js		lottie_light.min.js

그 중에서, lottie_light.js(경량판) 는 SVG 모드만 을 서포트하고, expressions 을 서포트하지 않음

六.정리

Rax 의 크로스컨테이너 실행, Lottie 의 크로스엔드 애니메이션……프런트엔드 기술 방안은 이미 프런트엔드 영역에 한정되지 않고, 상류 하류로 확장하여, 디자이너, 클라이언트 형제, 서비스 오빠를 함께 놀게 하고 있음. 예를 들어:

상류 하류의 횡방향 충돌을 통해, 전체 효율을 향상할 수 있는 방안을 침전 산출하는 것은, 필연적인 추세인 듯함

참고 자료

댓글

아직 댓글이 없습니다

댓글 작성