Lottie是什么?为什么叫Lottie? 能否在微信小程序中使用Lottie呢?
反正截止今天之前我对这个Lottie还一无所知,反正也用不到,管他呢。
可惜出来混的总是要还的,遇到需要使用动画的场景,由于动画过于复杂,靠我一己之力怎么可能短时间内实现呢!!!一顿调(bai)研(du)发现了这个奇妙的Lottie。
Lottie是什么东东?
Lottie是支持Android,iOS,Web和Windows多个平台的库(微信小程序也在努力支持啦,但是貌似还没正式开放),并利用Bodymovin插件把Adobe After Effects(AE)动画解析成json文件,并可以在移动端或者Web上进行渲染显示动画。
为什么叫Lottie?
一顿找,发现是个女生的名字命名的,嘿嘿。Lottie是以一位德国电影导演和剪影动画的先驱者命名的。她最著名的电影是《阿基米德王子历险记 (1926)》,这是现存最古老的长篇动画片,比迪斯尼的长篇电影《白雪公主和七个小矮人(1937)》早了十多年。
使用Lottie之前需要准备些啥呢?
首先当然准备好吃的喝的,不能委屈自己
AE下载安装
这个得要点功夫,炎炎夏日,点杯奶茶降降暑先(有好喝的奶茶麻烦推荐一下)
mac版本(windows版本的麻烦好心人补充下)
链接:pan.baidu.com/s/1eL0AFHMI… 密码:743w
还还不行?自个想办法安装吧.....
bodyMovin下载安装
貌似看到过是现有的bodyMovin后有的Lottie,感兴趣的小伙伴自个去瞅瞅吧
1、进去给我把这个bodyMovin的包下载下来
2、下载后需要再下载一下ZXP才能打开刚下载的build/extension/bodymovin.zxp文件哦
3、下载好ZXP后打开,把刚才的bodymovin.zxp拖进来就好了,提示完成,bodyMovin插件就算下载好了
到这里就算安装好了,点了奶茶的同学先别急着喝,还得做下相应的设置哈
4、打开AE开启新世界大门
. 打开“首选项”/“脚本和表达式”(不同版本可能会不一样有的在“首选项”/“常规”)
. 勾选“允许脚本写入文件和访问网络”
. 打开“窗口”/“扩展”/bodymovin
. 我们就直接导入素材合成(这里我导入了一个测试视频),此时发现扩展窗口已经多了一条数据,勾选后点击文件设置存放地址,然后点击“render”就ok啦,指定的位置已经生成好data.json文件喽
终于拿到了data.json,到这里就可以愉快的喝奶茶啦 (ps:要是懒得下载安装,可以找设计小哥哥小姐姐问问能不能生成哦)
今日废话:下班捉到两枚星黛露,愉快的一天圆满结束喽