Lottie - 让动画的实现变得如此简单

疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。

短视频行业的日活用户规模较平日增加 16.7%,日人均使用时长较平日增加 9.3%。长视频成为很多网友在家消磨时间的方式。腾讯视频独播剧《三生三世枕上书》和芒果TV 独播剧《下一站是幸福》,更是让平台日活分别增加 22% 和 26%。

可以说,视频行业的利好趋势,基本上不受疫情影响。短期内疫情会带来较大增幅,但是疫情过去之后还会保持自己的增长节奏。



这几年也积累了一些关于视频编辑和相关产品的经验。今天来介绍一款可以将AE(Adobe Effect)文件导出json格式的工具,名叫lottie。

| 什么是lottie

第一次接触它是在3年前,做视频社交的时候,需要做视频编辑功能,后来因为产品方向的变革,没有使用成功,但第一次的接触让阁主认识到这个软件的存在。

最近又在做视频模板相关的需求,做一个可编辑的视频模板,用户只需要在模板填充内容,就可以使用已有的酷炫视频资源,于是又接触到Lottie 。

当时遇到一个什么样的问题呢,设计师可以用AE(Adobe Effect)设计出各种酷炫的视频效果,但开发真的要将设计师所做的效果显现出来并适配各个系统和各种大小的屏幕,会耗费很大的工程量,成本比较大,为了尽量缩小开发成本,于是引用了lottie。

ottie最大的好处,就是可以将做好的AE文件,直接导出json文件,让开发直接运用,基本上实现了0成本的开发量,真是太棒了,大大减少了设计师和开发之间的沟通成本。

| 怎么安装

1. 先安装Adobe Effect,划重点,最好是安装英文版本的。

lottie是由Airbnb团队研发出来的,因为是国外的公司,所以汉化版本,或多或少会出现各种兼容的问题,阁主在这个上面是吃了很多亏的。

但别担心,各个设计软件的界面长得都差不多,基本能猜到各个图标是干什么,以及相应的操作提示是什么意思,哪怕有一两个单次不认识,网上翻一下也就都懂了,界面英文不会太难。

2.在公众号后台回复“Lottie”,即可得到相应的安装文件文件。

安装文件也是英文版本,解压后有2个文件,1个是ZXP Installer,另一个是bodymovin.zxp,先安装ZXP Installer,安装好了之后打开,会出现如下界面。bodymovin是设计师用的插件,lottie是开发侧要用的文件json文件,一般对外将两者形成的系统称为lottie。

然后将bodymovin.zxp拖到界面去就完成了安装。

| 怎么运用

1.设置AE脚本权限。

路径为在【 AE-首选项-常规 】中勾选 【允许脚本写入文件和访问网络】,英文路径就是【Adobe Effects】-【Preferences】-【Scripting&Expressions】-勾选【Allow Scripts to Write Files and Access Network】,如下图


2.先用AE做好你想要的视频,这一步按各自的想要做的内容来;

3.导出。导出路径为【Windows】-【Extensions】-【Bodymovin】,如下图


4.选择相应要导出的文件,以及选择导出的路径,如下图


5.做好Bodymovin的设置,设置项如下图


6.点击绿色按钮“Render”就大功告成了。

| 相关注意事项

如果出现如下图的现象,插件卡在某个图片上,导不出来,可以尝试以下几个方法:

1.在使用bodymovin的时候将电脑的语言系统也换成英文,如果不习惯,不用的时候再换回来中文。系统语言有时候也会影响导出的成功率,阁主用的是正版AE2020会遇见语言问题,用2017英文版就不会,也跟AE软件本身版本相关。

2.导出json的路径如果含有空格,也可能导致不能导出,直接导出到桌面是最直接的。
3.太复杂的动画可能导出会有问题,简单的遮罩是支持的,建议不要用太复杂的逻辑做动效

最后,总结一下,为了跟上时代的潮流,拓展自己的技能,可以尝试下视频相关的设计需求。而Lottie是其中能帮助团队节省开发效率,让设计师专心设计动效掌握主动权的工具。

如想尝试,可在公众号后台回复“Lottie”,即可得到相应的安装文件文件。

往期精彩文章
《关于交互设计的思维抽象》
《在家办公是要写日报的》
《B端设计之导航》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容