Lottie for Android, iOS, and React Native

2019-11-09 17:25:00

字体：大中小

来源：转载

供稿：网友

今天看到一个很有意思的开源项目，下面是这个项目的介绍： Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

中文意思就是：Lottie是一个针对android和ios的移动库，这个库的主要作用就是在手机本地去渲染在AE上通过Bodymovin导出的json。

Lottie Github主页 Bodymovin Github主页

下面的几个都是他给出的示例图：

更多的效果图，我们可以去github主页去观看。

加入依赖库

compile ‘com.airbnb.android:lottie:1.0.1’

使用起来也很简单

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

其实如果你的代码要是只是纯粹的展示，到这里已经是结束了。hello-world.json是你放在assets中的一个文件。当然你也可以使用代码的形式去设置，下面是官方给出的形式。

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);animationView.playAnimation();

当然最主要吸引我的还是这个库是支持Android、IOS、RN的，这样在我们的项目中，只要我们有了源json文件，就可以很方便的去各个平台上进行动效的使用了。

https://github.com/airbnb/lottie-android https://github.com/airbnb/lottie-ios https://github.com/airbnb/lottie-react-native

这样就可以避免我们使用gif造成的大量的内存消耗，同时也可以避免我们使用SVG造成不同平台，都要有自己的一套解析工具。其实说白了，这个库就是给我们提供了一个不同平台的解析工具。碰到这么给力的工具，我当然要去试验一番。

下载AE，添加bodymovin插件通过AE制作一个简单的动画导出json文件

上面的步骤写的虽然简单，但是我还是遇到了很多坑，你要是碰到了任何坑，可以跟我联系，希望我能帮到你。

最后我做的一个简单示例效果如下：效果图