lottiefiles app

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兼容包，可减小安装大小。

中文名：Lottie

包名：com.airbnb.lottie

MD5值：ae7af6d4774f10281f4e84ef4d675ab3