大家好,昨天在 知乎 上看到 @Bigxixi 更新了动态,知名动效插件 Bodymovin 迎来了一个较大的版本更新,那就是导出来的 Lottie 动画 json 文件,又支持倒回AE里进行编辑了这样一来我们不仅修改调整自己导出的资源更方便,网上很多别人共享的动画文件也是可以下载下来,导回到AE里进行学习参考。

优秀的是,当我们还沉迷春节的假期里无法自拔的时候,Bodymovin汉化插件作者 @Bigxixi 早已打开了电脑,完成了新版 Bodymovin 5.6.3的汉化工作。所以这回,咱们可以直接下载到新版 AE 插件 Bodymovin 的汉化版本。(下载地址后台回复『动效导出插件』

考虑到很多同学不认识 @Bigxixi 大西西,先简单给大西西来个介绍,认个脸熟。

@Bigxixi大西西
当前就职网易,任网易云音乐产品的首席资深动效设计师。不但能玩得了一手好动效,还能撸得了一手好代码。知名插件 Sketch2AE 作者,Bodymovin 插件汉化版作者(据我所知,网易云音乐还在招UI设计师跟动效设计师,感兴趣的同学可以把作品集发到相关邮箱:liangqin@corp.netease.com)

另外小编也热情的邀请了@Bigxixi 大西西 加入了咱们的高端UXD微信设计群,大家有不懂的地方,可以在群内向他提问的哈~没加群的同学赶紧了,位置不多啦。


好了,前文有点多,下面给大家分享 @Bigxixi大西西 带来的版 Bodymovin 介绍:






bodymovin 悄然更新到了 5.6.x,带来了不少新特性,最大的亮点是支持将导出的 JSON 动画文件再导入回 AE我汉化了最新的 5.6.3 ,感兴趣的同学可以下载体验另外插件似乎已经不支持 AE CC2017 了,我用的 CC 2019,不知道 CC 2018 安装有没有问题)


点击右上角的「导入 JSON 动画文件」,可以选择导入本地的或者在线的 JSON 文件。

作者说这个工具还有些不完善的地方,不过导入简单的动画文件问题不大。遇到问题可以直接和他邮件沟通:hernantorrisi@gmail.com

我用云音乐6.0开机动画试了试:


附件我上传了导出的 JSON 和 AE 工程文件,我们先试试导入 JSON 文件

//微信公众号不支持附件下载,大家可以在本公众号-UX小学后台回复『网易云开机动画』来获取上图动画的 AE源文件 及 Json 文件地址,用于学习研究

界面里贴心地给出了导入剩余时间,以及担心你等待过程太枯燥在这放了个小彩蛋(不要问我为什么「取消导入」和「返回」按钮位置这么奇怪)。


好了导入完成,可以看到图层信息很完整,播放了一下也几乎还原了整个动画。

对比源文件可以说是「神还原」了。

不过还是有一些细节还原出了问题,比如音符弹起时的缓动不对,希望作者继续打磨让动画导入更准确。大家也尽量还是保留好 AE 工程文件,暂时不要太过依赖它。
LottieFiles 以及支付宝动效设计库犸良网站上,有很多设计师共享的 JSON 动画,大家感兴趣可以去下来研究一下「别人家的动画」都是怎么做的。当然,也欢迎你把自己的作品 po 出来~哈哈

除了导入功能,新版 bodymovin 还增加了几个导出选项:

其中这个「导出为 Rive 格式」可以聊聊。

Rive 是一款在线设计/动画制作工具,制作好的动画可以导出到多个平台(web/iOS/android…)。它的特点是支持骨骼动画和网格变形,所以很适合做游戏角色动画,可以看下官网的介绍:

https://rive.app/about-rive(复制粘贴到浏览器中打开)
Bring your apps and games to life with real-time animation.rive.app

之前流程是必须在他们家官网的编辑器里制作动画,个人感觉挺难用的。现在我们可以在 AE 里做好动画,然通过 bodymovin 导出 .flr2d 格式的数据,再在官网编辑器导入,方便了许多(可能以后会增加从 AE 直接上传的功能?

导出的动画还是很还原的:

https://rive.app/a/bigxixi/files/flare/the-power-of-music/preview(复制粘贴到浏览器中打开

thePowerOfMusicrive.app

Rive 还有个「开源设计」行动,就是如果你愿意把你的动画工程文件公开(默认是只读的,也可以设置为可复制/可编辑),就能免费无限制的使用他们的工具。所以其实点开上边的链接,你就可以看到这个动画的文件结构,每一个关键帧。其他设计师的动画工程可以在这里找到:

https://rive.app/explore/popular/trending/all(复制粘贴到浏览器中打开
Rive – Explorerive.app


当然如果你不想公开,那就要花钱订阅了,是不是和 github 之前的策略很像?具体的说明可以看官网的文章:

https://rive.app/pricing(复制粘贴到浏览器中打开
Rive – Pricingrive.app



另外增加的一个导出选项是「导出为 banner」,其实就是简单集成了点击跳转等功能,和一个「播放器」一起导出,个人感觉不是很实用,也许国外很常用?

历史版本的汉化文件可以在这里找到,别忘了给我个 star 哦~

https://github.com/bigxixi/bodymovin_cn(复制粘贴到浏览器中打开
bodymovin 汉化版github.com

很多同学可能访问外网比较慢,所以为了方便大家下载,我把相关文件保存到了网盘,大家可以在后台回复『动效导出插件』来下载文中新版的汉化Bodymovin插件,后台回复『网易云开机动画』下载文中@Bigxixi同学提供的案例。
可能很多同学不知道 Bodymovin 支持导入 Lottie 后,能有多方便。
举个例子吧,支付宝出了个 Lottie 动效设计库-『犸良,里面有几百个阿里内部的动效素材,之前,这些素材只是支持换图,而现在,你可以把这些素材下载下来,倒回到AE里面修改了,怎么样,是不是很酷炫。



对于那些不是很精通AE的同学,可以说这是个超级大的福利了。因为未来高端动效素材,可能都不需要自己动手做,在犸良里面挑个合适的,改改就成啦。其次,看到有很喜欢的效果,也能导入到AE中,进行学习研究,看看这个效果是如何被AE实现出来的,实在是非常方便非常实用。


———–  我 是 分 割 线  ———–

往期精选文章  
重磅!阿里实现人工智能设计LOGO,10秒生成上百个LOGO方案
腾讯QQ设计部ISUX-高效设计专题的技巧
看天猫设计师如何写项目复盘-智能音箱设计
每日经验-设计师到底需要掌握理论知识吗?
[深度思考]如何有效汇报自己设计的价值


看完不点赞的,一律视为白嫖

 

本篇文章来源于微信公众号: UX小学