AE制作json文件格式动画以及lottie开源库的使用

手机应用上有很多地方需要用到动画的地方,比如启动页面欢迎界面等,有些动画比如简单的伸缩旋转等我们可以用属性动画来制作,但是涉及到一些复杂的不规则的动画我们要实现起来就很麻烦,但是利用lottie加载json格式文件就简单的很多了。json格式文件的动画是利用AE工具制作然后通过插件bodymovin转换成json格式。

先附上资源,亲测可用。

AE工具:http://pan.baidu.com/s/1hsJrKCs,里面有AE cc 2015,据说只有cc2015才可以用bodymovin插件。还有一个Adobe_pojie.exe文件,它是破解工具,找到相应版本,然后将安装文件里面的dll文件替换即可。还有一个文件夹是ExManCmd_win,它是安装插件bodymovin所需要的(已经将bodymovin文件放在里面,不需要从github上下载https://github.com/bodymovin/bodymovin)。

Lottie开源库:https://github.com/airbnb/lottie-android。

1.   安装AE

  2.   安装bodymovin插件

  • 管理员权限运行cmd
  • cd到ExManCmd_win文件夹位置
    AE制作json文件格式动画以及lottie开源库的使用_第1张图片

  • 输入“ ExManCmd.exe /install bodymovin.zxp”回车就完成了
    AE制作json文件格式动画以及lottie开源库的使用_第2张图片


    可以打开AE看到如图所示有bodymovin表示安装插件成功:
    AE制作json文件格式动画以及lottie开源库的使用_第3张图片

    3.   制作动画并转换成json格式文件

具体AE制作动画就不介绍了,我制作了一个简单的动画:
制作完成了之后点击 窗口--->扩展-->bodymovin 出现弹窗:
AE制作json文件格式动画以及lottie开源库的使用_第4张图片
可以点击右侧更改导出文件路径,点击RENDER生成json格式文件。

4.    通过lottie开源库加载动画

将生成的json格式文件放入assets目录中,
通过xml :



通过代码:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("data.json");
animationView.loop(true);
生成的动画效果:

AE制作json文件格式动画以及lottie开源库的使用_第5张图片

你可能感兴趣的:(动画)