Lottie 动画so easy 支持android/ios/react-native/web

1、Lottie简介

Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库

android库的地址：https://github.com/airbnb/lottie-android

IOS库的地址：https://github.com/airbnb/lottie-ios

文档地址：http://airbnb.io/lottie/android/android.html#getting-started

这是一个特别棒的动画库，有完善的源码和演示demo

2、动画效果图

Example1

Example2

Example3

Community

Example4

3、lottie-android的使用

3.1、gradle文件添加依赖，目前maven central 上最新版本是：2.6.1

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

或者下载aar包

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation (name: 'lottie-release',ext:'aar')
}

3.2、核心类

LottieAnimationView： 继承自 ImageView 默认的以最简单的方式去加载Lottie动画

LottieDrawable：和LottieAnimationView的大部分api相同，你可以使用它做任何view动画

3.3、怎么加载动画

Lottie 支持API 16以上

Lottie可以通过以下方式加载动画:

A json animation in src/main/res/raw.
A json file in src/main/assets.
A zip file in src/main/assets. See images docs for more info.
A url to a json or zip file.
A json string. The source can be from anything including your own network stack.
An InputStream to either a json file or a zip file.

以上json动画文件可以通过AE工具导出来，而且神奇的是，我们更本就看不到图片的存在，可能大家认为，json文件中是不是图片的路径，我们还需要在drawable中放置对应图片资源，NO，不需要，完全不需要，我们只需要吧UX给的动画json文件重命名，比如有一个脸的动画，我们命名为cry.json,然后吧该文件放到src/main/res/raw目录下，简单粗暴的动画效果就出来了，当然也可以放到src/main/assets目录，或者网络上下载动画资源包，都是可以的。

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

总结：有点不言而喻，完全解放双手没复杂动画简单搞定，不用使用图片资源减少了包体积，可以网络下发动画资源灵活可控。

来源：oschina

链接：https://my.oschina.net/u/3890169/blog/2052767

标签

React Native

android

lottie

ios

reactjs