恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Lottie - 让动画的实现变得如此简单
0.0°
2020-02-23 原创文章 经验/观点 举报 1286 4 1 0

复工之后可以涉及的新领域,介绍一款AE的插件,视频内容不得不学的技能


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


短视频行业的日活用户规模较平日增加 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端设计之导航》


作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的妹纸。

职场设计技能,更多教程抢先就看,请关注作者的微信公众号:Sophia的玲珑阁


Powered by Froala Editor

更新:2020-02-23

收藏

4人已收藏

Sophia的玲珑阁

从创业公司到大厂,分享实用的互联网设计技巧和职场经验。

  • 142

    作品

  • 389

    粉丝

  • 7

    关注

  • 作为设计师,我是如何一步步找到业务增量的
  • 情绪是魔鬼,但要原谅自己
  • 2020年打工人4条总结出炉
  • 提升屏效可实施性最强的4大方法

    猜你喜欢

      2020-02-23 原创文章 经验/观点 举报 1286 4 1 0

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

      0.0°

      你确定要举报Lottie - 让动画的实现变得如此简单

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年02月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录