lottiefiles appv2.0 安卓版

Tags：lottiefiles,动画制作

Airbnb团队开发的lottie动效解决了很多前端动画设计问题，不仅提高了团队间的协作，也让设计师和开发之间的矛盾少了不少。这款lottiefiles app是Airbnb团队提供的lottie动效的手机客户端，通过这款软件你可以将JSON动画文件在手机上播放，非常方便。

产品优势：

- 开发无需编写动画,只需加载

- Android, iOS, 和React Native多台支持

- Path,flat等风格动画实现完美

- 可手动设置进度,绑定手势,事件等

- 可网络加载,动态控制播放速度等

- 性能好,显示效果完

平台介绍：

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

现在使用各平台的 native 代码实现一套复杂的动画是一件很困难并且耗时的事，我们需要为不同尺寸的屏幕加载不同的素材资源，还需要写大量难维护的代码，而Lottie可以做到同一个动画文件在不同平台上实现相同的效果，极大减少开发时间，实现不同的动画，只需要设置不同的动画文件即可，极大减少开发和维护成本。

lottie使用方法：

Lottie支持多平台，使用同一个JSON动画文件，可在不同平台实现相同的效果。

Android 通过Airbnb的开源项目lottie-android实现，最低支持 API 16;

IOS 通过Airbnb的开源项目lottie-ios实现，最低支持 IOS 7;

React Native，通过Airbnb的开源项目lottie-react-native实现;

这是React logo的动画，以下以Android平台为例如何使用Lottie

1.下载Lottie

在项目的 build.gradle 文件添加依赖

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

2.添加 Adobe After Effects 导出的动画文件

Lottie默认读取Assets中的文件，我们需要把动画文件react.json 保存在app/src/main/assets文件里。（文件比较大，只展示了部分内容，文件链接）

{     "v": "4.6.0",      "fr": 29.9700012207031,      "ip": 0,      "op": 141.000005743048,      "w": 800,      "h": 800,      "ddd": 0,      "assets": [ ],      "layers": [         {             "ddd": 0,              "ind": 0,              "ty": 4,              "nm": "center_circle",              "ks": {...},              "ao": 0,              "shapes": [...],              "ip": 0,              "op": 900.000036657751,              "st": 0,              "bm": 0,              "sr": 1         },          {...},          {...},          {...}     ]}

3.使用Lottie

在布局文件中直接添加Lottie的LottieAnimationView控件，即可在界面显示React logo动画效果

<com.airbnb.lottie.LottieAnimationView         android:id="@+id/animation_view"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         app:lottie_fileName="react.json"         app:lottie_loop="true"         app:lottie_autoPlay="true" />

4.引入Lottie影响

(1)兼容性

Lottie 最低支持版本API 16，低版本系统需要做降级动画或者不展示动画

(2)安装包

这是用全民K歌release包的测试数据，lottie本身方法数不小，有方法数超标和安装包过大的风险，业务可自行评估

注：LottieAnimationView继承于V7的AppCompatImageView，需要引入V7兼容包，根据业务需要，可以源码引入Lottie，让LottieAnimationView继承与ImageView，就不用引入V7兼容包，可减小安装大小。