见过用Json实现的gif吗？Lottie动画库的使用教程。_H5之家

我们先来讲一讲Lottie这个框架，它是一个开源动画库。支持Android，IOS以及Reactative开发，这篇文章主要讲的是android的实现过程以及怎么让美工为我们生成Json文件。
效果图

1722373-db7b6eb1824c0e61.gif

1722373-bdb6881c78dc9fee.gif

集成流程
美工使用AE--安装bodymovin插件-将AE中的动画工程文件通过bodymovin转换为.json文件--发给开发-开发集成Lottie框架-直接在项目中使用
是不是很简洁，这样我们压根就不需要一帧一帧的png或者.gif文件了，不仅让gif的加载速度变快而且节约了我们app的内部空间。
AE安装插件教程（这里的安装教程让美工去看就好）
MAC
请移步这里：https://www.jianshu.com/p/94f7a0102be5

windows
请移步这里：https://www.jianshu.com/p/cae606f45c0b

在项目里使用
首先我们先把美工给我们的,json文件放到指定目录下:
我们创建一个assets文件在我们次级目录:

20151220191600437.png

然后我们把data.json文件粘贴进assets文件下:

image.png

这样之后我们就可以开始导入依赖库了.注意，这里要求minSDK至少为16
dependencies {
compile 'com.airbnb.android:lottie:1.5.1'
}

在xml里创建控件

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

在代码里调用.这样一个简单的GIF图就成了,什么?你问我怎么没有图片.对的.就是这么暴力.不用一帧一帧的图片,直接用Json文件就可以实现动画.,是不是很厉害.让我们看看效果--

应用宝动态截屏2018011101.gif

(这个动态截屏玩的不是很6,大家将就看看吧)

身为一个合格的工程师,我们最需要的就是举一反三,通过上面的讲解我相信大家也能猜到这个框架最好用的地方了.没错,就是通过网络获取Json然后动态生产gif,我认为类似网易云那种闪屏广告就是类似这种原理实现的.那接下来我就讲解一下这个框架的进阶使用.

进阶使用
有的时候我们不需要它一直播放,或者需要监听播放状态,或者需要动态生成gif.或通过网络生成gif.那我们就需要深入了解一下这个框架提供给我们的方法:

//实例化
mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view);
//设置是否循环播放:true为循环.false为播放一次
mLottieAnimationView.loop(true);
// //暂停
// mLottieAnimationView.pauseAnimation();
// //开始播放
// mLottieAnimationView.playAnimation();
mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//动画开始监听
}
@Override
public void onAnimationEnd(Animator animation) {
//动画结束
}
@Override
public void onAnimationCancel(Animator animation) {
//动画取消
}
@Override
public void onAnimationRepeat(Animator animation) {
//动画重复
}
});

以上都是本地gif的使用,接下来重头戏到了,通过网络获取json并且生成gif,并且动态加入到布局中.

private RelativeLayout mLayout;
private LottieAnimationView mLottieAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_network);
mLayout = (RelativeLayout) findViewById(R.id.layout_content);
initView();
}
private void initView() {
mLottieAnimationView = new LottieAnimationView(NetworkActivity.this);
String response = "你从网络获取的json";
try {
JSONObject jsonObject = new JSONObject(response);
LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition lottieComposition) {
setComposition(lottieComposition);
}
});
} catch (JSONException e) {
e.printStackTrace();
}
mLayout.addView(mLottieAnimationView);
}
private void setComposition(LottieComposition lottieComposition) {
mLottieAnimationView.setProgress(0);
mLottieAnimationView.loop(true);
mLottieAnimationView.setComposition(lottieComposition);
mLottieAnimationView.playAnimation();
}

注意事项:1.如果你不是从xml生成的LottieAnimationView,记得设置开启播放,
2.在activity生命周期onStop方法设置取消播放.
3.如果是网络获取json重复使用的话记得设置缓存.

Demo地址:https://github.com/EspressoToast/LottieDemo
有不懂的问题欢迎向我提问,如果你觉得有帮助不妨给个star.