点击上方蓝字关注公众号
码个蛋第266次推文
真的很强大
作者：在寻找雪见的景天
博客：https://www.jianshu.com/u/3a5162ea1c99
文章目录
-
Lottie介绍
-
使用示例
-
下载AE
-
下载插件
-
配置注册表
-
动画制作
-
Android端使用
-
IOS端和web端使用
-
总结
0
Lottie介绍
Lottie可以把Adobe After Effects制作的动画导出为JSON，然后能在Android 、IOS、WEB上播放。官网：http://airbnb.io/lottie/
1使用示例
我们尝试把它应用在启动图上，告别一成不变的图片。例如下面这个效果：
这个是未处理的效果
这个是用lottie的效果
我们可以看到，画面生动起来了。动画一共5秒，做了3个效果：一、文字淡化出现（从1秒后开始淡化显示）二、落叶（从上往下掉落，加入倾斜仿风吹的效果）三、云朵移动（天空上的白云从左边移动到右边）
2
下载AE
下载地址：https://bfile.3987.com/bigfile/aftereffectscc2017_lsb_3987.rar这个是绿色版的，直接解压就能运行啦。
3
下载插件
先下载bodymovin.zxp插件下载地址：https://raw.githubusercontent.com/bigxixi/bodymovin/master/zxp_cn/bodymovin462cn.zxp 然后把它解压到电脑的这个目录下：MAC:/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
WINDOWS:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\bodymovin
bodymovin插件位置
4
配置注册表
MAC:打开文件 ~/Library/Preferences/com.adobe.CSXS.6.plist （ com.adobe.CSXS.？？？.plist 其中问号根据 AE 版本不同会有不同） 新加一行，键(key)为 PlayerDebugMode, 类型为字符串(String), 值为 1 。
WINDOWS:按win+R 打开运行，然后输入：regedit ，就打开了注册表。找到注册表键值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一个键值名为 PlayerDebugMode, 类型为字符串(String), 值为 1 。
注册表配置
到这里，所需要的工具就已经搞完了，下面开始制作动画。
5
动画制作
一、把文件导入AE
把背景图、落叶、云朵、文字四个素材导入AE，并且设置工程的长度为5秒。
二、文字淡化出现
把文字的素材拉到背景图上面，然后点击变换，选择不透明度，移动时间轴到1s的时候，设置不透明度为0，然后拖动时间轴到3s，设置不透明度为100
三、落叶
把落叶的素材拖到文字层上面，点击变换，在0s的时候点击位置设立关键帧，然后把落叶的位置调到顶端，之后把时间轴拖到5s，再设置关键帧并把落叶的位置调到底端。最后，加上水平偏移，模仿风吹的效果。在3s和5s的时候设立关键帧，然后调整位置x的坐标。
四、白云
把白云的素材放在背景层上面，然后复制一层背景放在白云上面，因为白云移动不能在树的前面显示，所以要用钢笔工具，把树的部分进行遮罩。然后选择白云的素材，点击变换，在1s的时候设立关键帧，并设置位置在最左边，最后移动到5s设置关键帧并设置位置在最右边。
五、输出动画文件
制作完成后，点击窗口，扩展，bodymovin，然后点击设置按钮，选择下面的演示模式（输出后会有一个demo.html文件，可以直接打开预览效果），设置后，点击渲染。成功的话，会生成一个image文件夹和data.json文件，把这两个文件放到android或者ios，或者web都可以直接使用了。
6
Android端使用
在app中添加以下依赖
dependencies { compile 'com.airbnb.android:lottie:2.1.2'}1、把image文件夹和data.json文件放在assets文件夹里面，然后在布局声明，最后在代码调用
lottieAnimationView = (LottieAnimationView) findViewById(R.id.animation_view);lottieAnimationView.setImageAssetsFolder("images");lottieAnimationView.setAnimation("data.json");lottieAnimationView.playAnimation();2、如果是想下载的方式，然后放在内存卡的话（一般都是这样用，因为可以随时更改动画），把下载的文件解压到内存卡，然后把路径传进去
File jsonFile = new File(getIntent().getStringExtra(JSON_PATH)); File imagesDir = new File(getIntent().getStringExtra(IMAGES_PATH)); FileInputStream fis = null; if (jsonFile.exists()) { try { fis = new FileInputStream(jsonFile); } catch (FileNotFoundException e) { e.printStackTrace(); } } if (fis == null || !imagesDir.exists()) { Toast.makeText(FangShengAnimActivity.this, "动画资源不存在", Toast.LENGTH_SHORT).show(); finish(); return; } final String absolutePath = imagesDir.getAbsolutePath(); lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() { @Override public Bitmap fetchBitmap(LottieImageAsset asset) { BitmapFactory.Options opts = new BitmapFactory.Options(); opts.inScaled = true; opts.inDensity = 160; return BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts); } }); LottieComposition.Factory.fromInputStream(this, fis, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(@Nullable LottieComposition composition) { lottieAnimationView.setComposition(composition); lottieAnimationView.playAnimation(); } });7
IOS端和web端使用
这里不介绍啦，可以去官网看看详细用法：IOS：https://github.com/airbnb/lottie-iosweb： https://github.com/airbnb/lottie-react-native
8
总结
有人问，那个启动图的，用gif也能实现类似的效果啊。可以是可以，但gif的体积一般比较大、而且大尺寸的gif可能导致崩溃，而且画质肯定是不如lottie好的。lottie的画质和图片的画质是一样的，而且体积就是图片的体积，加上一个json文件（几十kb）就能实现动画效果了。lottie给我们提供了一个工具，只要我们花点创意，就能做出生动的动画效果了。lottie的使用，不仅仅是应用在启动图那么局限，可以出现在：抽奖画面、加载画面、摇签画面、灵符开光等等都是可以的。发动你的思维，让app更多地方用上lottie，打造一个活泼生动的app吧。
