Lottie Andrews de código abierto biblioteca de animación

bunker lottie

Airbnb recientemente abrir la biblioteca de animación llamada Lottie origen que puede soportar simultáneamente iOS, Android y el desarrollo de ReactNative. Esta noticia salió, todavía sufren de todo tipo de efectos muy interesantes para explorar el control personalizado, me gusta la emoción del descubrimiento nuevo Mundo en general. se puede decir, aparece Lottie, escribirá al fin liberado en gran medida de Android / iOS ingenieros nativos de la definición de la animación de trabajo.
cuando nos damos cuenta de proyectos GIF con una serie de efectos visuales complejos de tiempo, se encontrará con muchos problemas. por ejemplo, los archivos GIF demasiado grande, y no es un inconveniente para adaptarse a diferentes resoluciones dispositivo y profundidad de color problema de formato GIF es un punto débil.

Por ejemplo, el siguiente varios animación:

El diseño de estos efectos de animación claramente no escribir código que los programadores deben ser responsables de algo. Que no hay manera de hacer arte en el software de animación AE diseñado para móviles de gama dirigirla?
Sí, que es el uso de Lottie.

archivo de proyecto como se muestra arriba, el software instalado en el enchufe bodymovin llamado AE, AE puede ser animado se convierte en un perfil JSON formato común, bodymovin propio enchufe se utiliza para representar la página en los efectos de diversos AE una biblioteca de código abierto, lottie que hacer es darse cuenta de la forma a puede visualizarse AE animación en diferentes plataformas terminal móvil a fin de lograr los archivos de animación de un empate, una conversión, disponible en todo sentido.
por supuesto, como Java 一次编译,随处运行, al igual que lottieen sí la biblioteca de animación no es multiplataforma.

empezar

Dichos tanto, vamos a explicar en detalle cómo utilizar el búnker biblioteca. Al principio, la siguiente información, relacionada con el software puede contener versión crack, si financiados, por favor, ayuda genuina.
El siguiente uso de software en 2017 6 de febrero de japoneses son válidos.

Instalar Adobe After Effects CC 2017

Adobe es una buena compañía, hacer un montón de hardware y software rápido, pero sin excepción, las personas se han roto. En este ejemplo se utiliza la última versión de AE CC 2017.

Descargar disponibles http://www.dayanzai.me/after-effects-cc-2014.html

dirección de distribución CDN http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar

Agradecemos a los autores proporcionan el software. Tenga en cuenta que esta versión sólo está disponible en sistemas de 64 bits WIN , el autor Wei Win7 64
puede ser instalado y utilizado en condiciones normales. Instalación de acuerdo con la incorporada en las instrucciones para instalar.

Bodymovin instalación enchufable

Para este plugin puede ver el plugin página GitHub .

Descargar `bodymovin.zxp`complemento en el paquete

Este archivo se encuentra en el proyecto /build/extension/de directorio, si se encuentra fuera de la velocidad lenta puede partir de aquí se puede descargar la versión más reciente del plug-in.

instalar el tapón

Descripción del proyecto dado tres formas de instalar plug-AE:

ZXP instalador para instalar software de terceros;
Instalado manualmente;
Utilice está el plug-in de instalación de Adobe instalado.

He probado todos los tres llegaron a la conclusión de que sólo el segundo (también parece más tediosa) detalle aquí sobre el segundo método eficaz:

- Apague AE;
- Abierto con WinRAR o software similares bodymovin.zxparchivos, carpetas y archivos directamente copiados en el descomprimido C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
  o C:<username>\AppData\Roaming\Adobe\CEP\extensionsinferior, por la trayectoria de la máquina MAC/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

- 修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
  并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
- 设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)

开始制作动画

由于笔者目前不会使用AE(废话,软件都是刚装的),这里我们打开一个现有的工程文件.
从这里可以找到一些Lottie中演示过的动画的AE源文件,下载到本地后在AE中打开即可.这里我们选用EmptyState.aep这个实例工程,稍作修改:

导出json数据

如果上文的bodymovin插件安装成功的话,在AE中的窗口->拓展中是能够找到它的.

在插件窗口中选择json数据文件导出的路径,点击Render按钮即可渲染工程并导出.

原始工程动画效果:

原始工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json
修改后工程动画效果:
修改后工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json
使用Lottie库播放动画
终于说到主角了,然而关于它的使用方式却是相对简单的.Lottie的引入与使用就如其他库一样,这里以Android平台的使用为例.
在项目的build.gradle文件中加入:

Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:

或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:

这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.
如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:

你还可以通过API控制动画,并且设置一些监听:

在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:

如果你需要频发使用某一个动画,可以使用LottieAnimationView内置的一个缓存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用).