×

一款非常好用的动画库Lottie

96
八怪不姓丑
2017.08.28 09:19 字数 728

简介

Lottie是Android和iOS的移动图书馆,用于解析Adobe After Effects动画,并以Bodymovin作为json导出,并在手机和网络上本机呈现。

该项目在GitHub已经获得三个端累计3万+的star。
Lottie社区提供了更多的动画下载。
如果你是一个设计师还可以将自己制作的作品发布到该社区。

图片来源Lottie
图片来源Lottie

兼容平台

优势

  • 使用方便、简单
  • 无需担心屏幕尺寸适配问题
  • 减少项目开发时间,增加交互的趣味性
  • 针对平台包括了缓存和预加载功能,增加动画的流畅性
  • 可以通过网络Json地址加载

制作动画

由于Lottie是使用AE制作,并且使用Bodymovin插件导出。
所以设计师要掌握一些AE的动画的制作基础,并且需要给AE安装插件。

下面教程 部分来自Lottie设计制作官方文档

设计师需要的工具:
PhotoShop或Sketch,Adobe Illustrator,Adobe After Effects和Bodymovin

1、导出为.SVG的文件

需要使用ps,或者Sketch将作品以组的形式导出为SVG


2、导出为.AI的文件

使用Adobe Illustrator导入SVG文件,另存为.AI文件


3、将.AI导入到Adobe After Effects

使用前需要安装Bodymovin插件,该插件主要用于后面导出Json格式
1.下载 bodymovin压缩文件
2.下载 AE插件安装器 ZXP Installer
3.将bodymovin.zip文件解压,找到文件build/extension/bodymovin.zxp
将该文件使用安装器ZXP installer打开。
4.打开After Effects,然后修改 AE 的设置:Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network",开启脚本。

导出Json需要四个步骤:

.1

将导入的文件拖到项目面板底部的小组合图标。


.2

进入菜单,然后选择组合>合成设置( Composition > Composition settings)。设置fps帧


.3

选择组合中的图层,然后在图层菜单中选择“从矢量图层创建形状”,然后根据您的插画艺术品创建一个新的“形状图层”,该图形艺术品具有图形的可编辑向量属性,如路径,笔画,填充等


.4

打开AE窗口 :Window > Extensions > Bodymovin.导出就完成了


Android使用

1.在Android中引入只需要在app中的Build.gradle添加一行代码

dependencies {  
  compile 'com.airbnb.android:lottie:2.2.0'
}

2.将Json文件拷贝到app>src>main>assets


3.在

//代码中:

        mLottieLove.setAnimation("lottie.json");
        mLottieLove.loop(true);
        mLottieLove.playAnimation();

或者

//布局中:
   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/loading_animation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        app:lottie_fileName="permission.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

关于更多使用请参考:
设计师操作文档
官方使用文档
下载更多设计师的Json作品:
Lottie社区
Demo参考地址(多个动画切换):
https://github.com/wapchief/android-CollectionDemo

AndroidUI
Web note ad 1