Lottie“小食拼盘”

354 阅读3分钟

Lottie是什么?为什么叫Lottie? 能否在微信小程序中使用Lottie呢?

OIP-C.jpeg 反正截止今天之前我对这个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:要是懒得下载安装,可以找设计小哥哥小姐姐问问能不能生成哦)

WechatIMG719.jpeg 今日废话:下班捉到两枚星黛露,愉快的一天圆满结束喽