Lottie是什么？
Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用Json文件的方式快速实现动画效果的库。简单点说就是Json文件记录动画路径，Android、iOS 以及 ReactNative解析展现出来。
官方Lottie项目地址：https://github.com/airbnb/lottie-react-native
LottieSimple项目地址：https://github.com/TBoyLi/LottieExample
Lottie如何使用？
一、Lottie能干什么？
在回答Lottie能干什么之前，我们先想下如下的动画如何实现？
大概有几种方式（针对Android开发的，本人是Android开发小白）:
使用帧动画。这种方式固然可行，但是一个需要动画添加很多张图片，势必会导致apk体积变大，并且还要根据不同的尺寸进行适配。
用 Gif。但是使用 Gif 占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配，并且Android本是不支持gif直接展示的。
用代码加图片辅助。如之前写的仿照驾校一点通欢迎页，这种方式繁琐并且每更新一次都需要重新写很多代码。
Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，但是问题和前2个类似。
另外就是React-Native官方的动画让我看得很蛋疼，可能我比较菜吧
综述以上的问题，有没有什么方式是即可以方便的实现动画效果，又可以不用考虑适配的问题，而且Android、ios还可以兼容呢? 答案是确定的，那就是Lottie
Lottie就是支持Android, iOS, 和React Native,并且只需简单的代码就可以实现复杂动画效果的库
那对于程序原来说有什么局限呢，那就是Json文件从何而来，一个路径就是自己搞一个Adobe 的 After Effects(简称 AE)工具文件拖进去，另一个途径就是直接给你们设计师美工用AE给你们生成一个Json文件。软件安装具体可参考airbnb.io/lottie/after-effects/getting-started.html
官方API： github.com/airbnb/lottie-react-native/blob/master/docs/api.md
官方文档介绍：airbnb.io/lottie/
官方LottieFiles：www.lottiefiles.com/
下面是程序员关注的操作（具体可以看官方介绍）
以下是根据官方介绍简单翻译过来的
入门：
通过使用yarn或npm安装节点模块来开始使用Lottie：
pod 'lottie-ios', :path => '../node_modules/lottie-ios'
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
iOS版：
如果你在iOS上使用CocoaPods，你可以在你的Podfile：
pod 'lottie-ios', :path => '../node_modules/lottie-ios'
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
如果你不在iOS上使用CocoaPods，你可以使用react-native link：
react-native link lottie-ios
react-native link lottie-react-native
之后，打开Xcode项目配置并添加Lottie.frameworkas Embedded Binaries。
Android版：
对于android，你也可以react-native link：
react-native link lottie-react-native
或者你可以手动添加它：
settings.gradle 文件添加：
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/lib/android')
build.gradle 文件添加：
dependencies {
...
compile project(':lottie-react-native')
...
}
Lottie需要Android支持库版本26.如果您正在使用该react-native init 模板，您可能仍然在使用23.要更改此设置，只需转到该块内android/app/build.gradle的compileSdkVersion选项android并将其更改为
android {
compileSdkVersion 26 // <-- update this to 26
// ...
您还必须添加LottiePackage到getPackages()您的ReactApplication
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new LottiePackage()
);
}
};
有了这个改变，你应该准备好去。
Lottie的动画进度可以控制一个Animated值：
import React from 'react';
import { Animated } from 'react-native';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
};
}
componentDidMount() {
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000,
}).start();
}
render() {
return (
<LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
);
}
}
此外，有一个迫切的API有时更简单。
import React from 'react';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
this.animation.play(30, 120);
}
render() {
return (
<LottieView
ref={animation => {
this.animation = animation;
}}
source={require('../path/to/animation.json')}
/>
);
}
}
实践中遇到的问题，IOS按步骤来操作没什么问题，主要是Android手动处理的有点多，先看错误
1、用react-native run-android 时报的错误
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApk'.
> A problem occurred configuring project ':lottie-react-native'.
> Could not resolve all dependencies for configuration ':lottie-react-native:_debugPublishCopy'.
> Could not find com.android.support:appcompat-v7:26.1.0.
Searched in the following locations:
file:/Users/lihong/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.pom
file:/Users/lihong/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.jar
file:/Users/lihong/WebstormProjects/LottieExample/android/sdk-manager/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.jar
Required by:
LottieExample:lottie-react-native:unspecified > com.airbnb.android:lottie:2.2.5
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 20.289 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
心中是捉急呀，没办法只能用Android Studio打开看看了。
先看我配置过的app下的build.gradle
android {
compileSdkVersion 26
buildToolsVersion '26.0.2'
defaultConfig {
applicationId "com.lottieexample"
minSdkVersion 16
targetSdkVersion 26
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_7
targetCompatibility JavaVersion.VERSION_1_7
}
}
dependencies {
compile project(':lottie-react-native')
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:support-annotations:26.1.0'
// From node_modules
compile 'com.facebook.react:react-native:+'
}
主要是配置:
compileSdkVersion 26
buildToolsVersion '26.0.2'
targetSdkVersion 26
compile 'com.android.support:appcompat-v7:26.1.0'
重新编译报错如下：
Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.android.support:appcompat-v7:26.1.0.
Could not resolve com.android.support:appcompat-v7:26.1.0.
Required by:
project :app
project :app > project :lottie-react-native > com.airbnb.android:lottie:2.2.5
> Could not resolve com.android.support:appcompat-v7:26.1.0.
> Could not get resource 'https://maven.google.com/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.pom'.
> Could not HEAD 'https://maven.google.com/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.pom'.
> Remote host closed connection during handshake
> SSL peer shut down incorrectly
个人觉得是要翻墙才可以下载:appcompat-v7:26.1.0，瞬间无奈中，因为我mac没有翻墙。
下午我用mac翻墙了一下，重启机子，重新打开android studio 重新编译项目，果真编译成功，然后运行，成功了！万分欣慰呀！
OK！解决Android的编译运行的问题，直接上IOS Android 效果图：
最后项目地址（希望大家给star）有问题及时沟通：
https://github.com/TBoyLi/LottieExample.git
下载项目：
git clone https://github.com/TBoyLi/LottieExample.git
或者直接下载zip
运行项目：按照入门的步骤来。
Lottie官方最近版本（2.3.1）
最后呢。感谢react-native兴趣群的群主老兔的大力支持，群号：397885169 欢迎加入，里面群管理都是大牛级别的（我除外），都有开源项目。我这小白群管表示压力杠杠滴，所以写了一个不称职的开源项目。希望大家喜欢，该项目主要针对Lottie的简单使用。
极力推荐：
http://www.jianshu.com/u/9895046b765d 群主简书
https://github.com/SurpassRabbit 群主 GitHub 项目
http://www.jianshu.com/u/dd3884d0b319 情书的简书
https://github.com/duheng/Mozi 墨子项目 逻辑结构清晰赞一波
