Lottie框架的学习

Lottie框架
个人操作简述步骤:
1.下载Creative Cloud,这个是adobe公司专用的下载器,若之前有下载adobe公司其它产品的话,先去搜CleanerTool清除一切adobe的文件和注册表,然后重启,下载这个creative cloud;
2.下载 ae cc 2017,在creative cloud上面下载,选择最新版本,试用就行了;
3.下载ZXP INSTALLER 地址为:http://aescripts.com/learn/zxp-installer/ ,网络不通畅时候会很慢;
4.下载bodymovin文件,上github搜这个插件,直接下载,解压后在build/extension后有个.zxp的文件;

5.打开zxp installer软件,选中open再选择这个.zxp文件,然后根据弹出的框选择 for me,然后就安装成功,
6.打开AE CC 2017可以看到在"窗口-扩展程序"里有个bodymovin,直接点击就开启使用,
7.制作动画然后点击"窗口-扩展程序"的bodymovin,会提取当前项目可提取的文件,然后选中左侧按钮变红,再点击"..."选择具体的生成路径和文件名,再点击左上角的Render则渲染生成.

1.碉堡的Lottie

Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就像发现的新大陆一般.可以说,Lottie的出现,将极大地解放Android/iOS工程师于无尽的编写原生自定义动画的工作中.
当我们的项目中用GIF实现一些复杂的视觉效果的时候,会遇到许多的问题.比如,GIF的文件过于庞大,并且对于不同分辨率设备的适配存在不便,并且Gif格式的色深问题是一个死穴.

比如下面这几个动画效果:

http://cdn.trojx.me/blog_pic/Example1.gif

还有这些:

http://cdn.trojx.me/blog_pic/Example2.gif

设计这些动画效果显然不是写代码的程序员应该负责的事情.那有没有什么办法,能让美工在AE软件上设计的动画直接用于移动端呢?
有的,那就是使用Lottie.

http://cdn.trojx.me/blog_pic/lottie_sum.png

如上图所示,通过安装在AE上的一款名叫bodymovin的插件,能够将AE中的动画工程文件转换成通用的json格式描述文件,bodymovin插件本身是用于在网页上呈现各种AE效果的一个开源库,lottie做的事情就是实现了一个能够在不同移动端平台上呈现AE动画的方式.从而达到动画文件的一次绘制、一次转换、随处可用的效果.
当然,就如Java一次编译,随处运行一样,lottie本身这个动画播放库并不是跨平台的.

2.上手使用

说了那么多,下面来详细说说怎样使用这个碉堡的库.首先声明,以下涉及到的软件可能包含破解版,如果你资金充裕,请支持正版.
以下使用方式与软件在2017年2月6日都有效.

2.1 安装Adobe After Effects CC 2017

Adobe是个好公司,做了很多牛逼的软件,但是无一例外都被国人破解了.本例使用的是最新版的AE CC 2017.

1.单独下载安装

http://cdn.trojx.me/blog_pic/AE_CC_2017.png(1)网络可用下载地址 :

http://www.dayanzai.me/after-effects-cc-2014.html

(2)CDN分流地址:

http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar

感谢作者提供软件.注意此版本只适用于WIN 64位系统,笔者在 Win7 64 位
环境下能够正常安装并使用.安装过程中按照内置说明安装即可.

2.从软件列表中安装

adobe自带有个adobe creative cloud的桌面应用,用于下载各种adobe数据处理软件,下载后在里面找到AE最新版本进行下载

2.2 安装bodymovin插件

想了解此插件可以参看该插件的GitHub页面.

下载bodymovin.zxp插件包

此文件位于工程中的/build/extension/目录下,如果外网速度慢可以从这里可以下载该插件的最新版本.

安装插件

项目说明中给出了为AE安装插件的三种方式:

通过第三方软件ZXP Installer安装;
手动安装;
使用Adobe官方插件安装器安装

(1)第一种
通过第三方软件ZXP Installer安装 http://aescripts.com/learn/zxp-installer/

点击进行安装,会自动配置需要的文件,中间可能需要重启下,不缺文件则直接下载完成,大概12M大小
打开zxp installer,点击"open"选择文件,再在弹出的框中选择"for me",直接导入成功,打开AE - "窗口" - "扩展"就有
(2) 第二种(尝试第一种无效后,最繁琐的):

先关闭AE;
用WinRAR或类似软件打开bodymovin.zxp文件,并将解压后的文件夹直接复制到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
或者是C:\AppData\Roaming\Adobe\CEP\extensions下,对于MAC机器路径是/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted.png
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted_copy.png
修改注册表.对于Windows,打开注册表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路径下添加一个名为PlayerDebugMode的KEY,
并赋值为1;对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,键为PlayerDebugMode,值为1.
设置AE 无论以何种方式安装bodymovin插件,都需要在AE的编辑->首选项->常规中勾选允许脚本写入文件和访问网络(默认不开启)
http://cdn.trojx.me/blog_pic/ae_setting.png

(3)通过Adobe官方下载
https://helpx.adobe.com/creative-cloud/kb/installingextensionsandaddons.html
直接从Install add-ons的第五步开始,Install third-party extension下载Windows版本的ExMan command-line tool工具
将下载的压缩包解压到和 .zxp的bodymovin文件(文件来自github上的android版Lottie文件/build/extension下)放在同个文件夹下
PC端搜索cmd,右键选择以管理员身份运行,然后切换到此文件夹下,输入命令: ExManCmd.exe /install bodymovin.zxp最后面就是插件的全名,安装正常则成功.若安装不正常

安装都失败的处理方法:
清除卸载自己电脑上的Adobe其它音视频处理软件
下载Adobe官方自带的清除工具 AdobeCreativeCloudCleanerTools.exe
打开软件,选择"e"英文,选择"y"允许,出现如下列表,是提示要卸载的软件类型,而不是你电脑上的Adobe软件,选择其中的什么cs cc卸载就好,或者你没使用过这些,就直接选择"1"all,全部卸载感觉,注册表也会清理干净

卸载完成后重新尝试执行以上步骤.
2.3 开始制作动画

由于笔者目前不会使用AE(废话,软件都是刚装的),这里我们打开一个现有的工程文件.
从这里可以找到一些Lottie中演示过的动画的AE源文件,下载到本地后在AE中打开即可.这里我们选用EmptyState.aep这个实例工程,稍作修改:

http://cdn.trojx.me/blog_pic/empty_page_editting.png

2.4 导出json数据

如果上文的bodymovin插件安装成功的话,在AE中的窗口->拓展中是能够找到它的.

http://cdn.trojx.me/blog_pic/ae_bodymovin_menu.png

在插件窗口中选择json数据文件导出的路径,点击Render按钮即可渲染工程并导出,若有多个,则先"Selected"选择要导出的文件

http://cdn.trojx.me/blog_pic/ae_bodymovin_render.png

原始工程动画效果:
http://cdn.trojx.me/blog_pic/empty_state_origin.gif

原始工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json

修改后工程动画效果:
http://cdn.trojx.me/blog_pic/empty_state_edit.gif

修改后工程导出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json

2.5 使用Lottie库播放动画

简述源码:
1.通过LottieComposition去获取本地或网络的json文件
2.LottieComposition的fromJsonSync方法解析json数据然后交给addLayer方法,addLayer方法交由Layer类处理得到Layer对象作为LottieComopsition的成员数据(Layer处理所有的基础动画数据)
3.将LottieComposition对象设置给LottieAnimationView这个动画显示控件使用,提供一系列的监听,事件,时间的设置接口.

使用方法:
以Android平台的使用为例,在项目的build.gradle文件中加入:
1
2
3
4
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
...
}
Lottie支持Jellybean (API 16)及以上的系统,最简单的使用方式是直接在布局文件中添加:

1
2
3
4
5
6
7
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" />
或者,你也可以通过代码的方式添加.比如从位于app/src/main/assets路径下的json文件中导入动画数据:

1
2
3
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
这方法将在后台线程异步加载数据文件,并在加载完成后开始渲染显示动画.
如果你想复用加载的动画,例如下一个ListView中每一项都需要显示这个动画,那么你可以这么做:

1
2
3
4
5
6
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
你还可以通过API控制动画,并且设置一些监听:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定义速度与时长
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();
在使用遮罩的情况下,LottieAnimationView 使用 LottieDrawable来渲染动画.如果需要的话,你可以直接使用drawable形式:

1
2
3
4
LottieDrawable drawable = new LottieDrawable();
LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
drawable.setComposition(composition);
});
如果你需要频发使用某一个动画,可以使用LottieAnimationView内置的一个缓存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它们用来决定LottieAnimationView对已经加载并转换好的动画持有怎样形式的引用(强引用/弱引用).

3.补充

lottie在ios的使用介绍参考:

http://ios.devdon.com/?p=241&from=trojx.me

分享能在浏览器预览json动画数据的地址:

http://svgsprite.com/demo/bm/player.php?render=canvas&bg=fff

参考文章： http://www.trojx.me/2017/02/06/android-lottie-library/