AE动效资源怎么高保真输出？

引言

在日常工作中，动态效果是UI设计和用户体验的重要组成部分。现在，如果一个设计不添加动态效果，它似乎还没有完成。

本文整理了UI工作中常见的动效资源输出模式，希望对各位朋友有所帮助。
 

如何输出动效资源？

事实上，有很多方法可以输出来创建动态效果，如：UI设计师，经常做一些界面交互动画，如刷新、加载、微动态效果等。常见的资源输出包括png序列图和gif图，其次是动画时间节点难以控制，着陆恢复程度差。

如何解决这个问题？

bodymovin和Lottie，将AE动画转换为json原创动画文件，跨平台适配！JSON(Javascript Object Notation的缩写)将您的图片和动画转换为代码。JSON动画的优点是比GIF小很多，支持完全透明(不需要BG)，可以跨平台适应。

几年前，Airbnb的人创建了一个名为Lottie的工具，使用JSON文件使小动画制作非常简单。Lottie适用于iOS、Android和React Native的开源库可以实时渲染动画。如果你还没试过，一定要给它一个机会。
 

接下来，我们需要安装bodymovin插件

资源链接地址：复制此内容后，打开百度网盘app，操作更方便。

链接：https://pan.baidu.com/s/14yawhlwdbvwHKNhA（PS：假如资源失效，加QQ：435946716获取最新链接。)

提取码：81sv

方法一：

1.将zxp文件复制到桌面，将zxp文件拖到extensionmanger软件或zxpinstaller，如下图所示

2.在顶部菜单栏和窗口打开AE软件>可以在扩展下找到

方法二：

1.将zxp后缀改为zip，解压，然后将文件夹复制到以下位置：

Win : C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

Mac : 资源库//资源库/Application Support/Adobe/CEP/extensions

MAC如何找到extensions文件夹？

打开Finder，Shift+Commad+G，去文件夹，输入:~/Library/Application Support/Adobe/，然后找到CEP/extensions文件夹，如果没有，手动创建一个新的文件夹

Win系统：双击操作Add Keys.reg

Mac系统：Mac系统：

以下代码在终端运行时可以返回(访问)>前往>实用工具>终端 或者 应用程序>实用工具>终端)

defaults write com.adobe.CSXS.5 PlayerDebugMode 1

defaults write com.adobe.CSXS.6 PlayerDebugMode 1

defaults write com.adobe.CSXS.7 PlayerDebugMode 1

defaults write com.adobe.CSXS.8 PlayerDebugMode 1

defaults write com.adobe.CSXS.9 PlayerDebugMode 1

2.打开AE，在顶部菜单，窗口扩展，你可以看到插件

动画资源如何输出json代码？执行动画文件的以下步骤

1)准备好动画文件，然后从窗口-扩展-打开bodymovin插件

2)json文件预览，打开插件，点击previewew-browse-选择导出的json

动画资源交接

设计师只需将此文件交给工程师即可完成交接。与文章开头提到的一些png序列或GIF相比，json文件具有明显的优势，可以大大提高动画还原度，节约开发成本。

总结

以上是本次分享的关于此外，任何工具插件都是帮助我们设计的，json也不是万能的。它不支持表达式和3D动画。与工程师沟通是王道。作为一名合格的UI设计师，我们也应该学会抵制无聊的动态效果（界面中的大多数动画形式都可以很好地实现，使您的动态效果完美地实现）