前端解放生产力之–动画(Adobe Effects + bodymovin + lottie)

大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了。时光荏苒,最近再次接触,简单回顾一下。

 

示例项目地址: https://github.com/skillnull/lottie-web-caption-animation

 

首先是安装AE,具体怎么安装就不赘述了,随便一搜就有很多教程。

安装完AE以后,装一个AE的插件bodymovin, github地址为: https://github.com/airbnb/lottie-web   在 ‘lottie-web/build/extension/’目录下面有一个bodymovin.zxp的文件,

这就是我们要的插件了。

安装插件,可以使用官方推荐的几种方法:https://github.com/airbnb/lottie-web#option-1-recommended

本文尝试了两种方法:1. 使用 ZXP installer安装,试了很多次,都已失败告终。2. 将bodymovin.zxp文件后缀改成.zip然后解压,放到ae的安装目录下’\Adobe\CEP\extensions‘成功:

接着就是打开AE,新建一个动画或者导入一个AE模板,然后在 ‘编辑 > 首选项 > 常规’ 中将允许脚本写入和访问网络勾上

然后在‘窗口 > 扩展 > Bodymovin’将Bodymovin选中,会弹出一个插件框

将上图中1的位置选中,在2的位置选择一个位置确定,然后render,导出data.json和其他文件,这时候可以点击preview进行预览,只需要选择刚才导出的data.json文件即可。

下面就是和lottie进行结合使用了:

首先下载lottie.js文件,在项目:https://github.com/airbnb/lottie-web下的’lottie-web/build/player/’目录下有个lottie.js文件,就是我们要的。然后将lottie放到根目录下,新建一个index.html文件,同时将导出的data.json和images文件夹放到根目录

index.html的内容为:

这时候如果直接双击index.html进行预览是不行的,因为使用的是file:///形式打开的,ajax会报跨域的错误:

你可以本地安装一个nginx启动一个代理,然后配置端口为2323,server_name 为localhost:

 

到命令行下去运行nginx.exe启动nginx然后访问localhost:2323就能预览了。至于nginx的使用命令就不罗列了。

 

lottie的具体使用文档见: https://github.com/airbnb/lottie-web

 

另:如果渲染的时候提示无法获取字体轮廓,将你的AE换成英文就好了。下面是一种将语言设置成英文的方法,以windows环境为例:

首先找到安装路径下的配置文件painter.ini,一般默认安装的话在这个路径下:C:\Program Files\Adobe\Adobe After Effects CC 2018\Support Files\painter.ini

然后修改这个文件,在@AdobeID下面加上下面两行:

修改后的painter.ini内容为:

修改完后重新启动AE即可。如果没有权限修改,在painter.ini 文件上右击选择属性,在安全里更改权限即可。

 

打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

评论

电子邮件地址不会被公开。