比Lottie还好用！腾讯新晋免费动效设计神器 PAG
在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端 APP 上是业界不断探索和解决的问题。图 1 传统动画实现流程图当前最好的动画设计软件是 Adobe After Effects（简称 AE），从 AE 动画制作到终端 APP 呈现，传统的实现方式如图 1 所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。近几年，业界诞生了像 Lottie、SVGA 这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在 AE 支持能力有限、动画性能难以保证、配套工具支持有限的问题。PAG 解决的问题PAG（Portable Animated Graphics）是腾讯 PCG 发布器中台自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 的流程图如图 2 所示，设计师在 AE 上设计出动画后，可以通过导出插件导出 pag 文件，同时 PAG 提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过 PAG SDK 加载渲染 pag 动画。图 2 PAG 动画工作流流程图与 Lottie、SVGA 相比，PAG 增加支持了服务端。除此之外，如图 3 所示，PAG 动画方案在导出动画文件大小、AE 特性支持和可编辑性方面具有较大的优势。图 3 PAG 和 Lottie 对比图PAG 支持的 AE 特性能力1. 矢量特性能力的支持和 Lottie、SVGA 实现不同的是，PAG 不依赖平台端渲染接口，可以实现各平台的渲染一致性。PAG 与 Lottie、SVGA 的矢量能力支持如附表 1《AE 特性能力支持》所示。2. BMP 预合成–全 AE 特性支持无论是 PAG 还是 Lottie、SVGA，所支持的 AE 特性仅仅是 AE 众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG 新增了 BMP 预合成的导出方式，支持导出所有 AE 特性，适用于不可编辑的场景。其原理如图 4 所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。图 4 BMP 预合成原理图针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如图 5 所示。图 6 PAG 矢量和 BMP 预合成混合导出PAG 导出插件1. 不支持 AE 特性提示针对导出动画和 AE 设计动画存在偏差的问题，PAG 导出插件增加了使用了不支持 AE 特性提醒功能，如下图 7 所示。图 7 PAG 导出面板在预览界面，同样有不支持特性的提示，如图 8 所示。图 8 PAG 导出面板预览窗口在使用 AE 设计动画的过程中，设计师可以方便快捷的提前查看使用了那些不支持直接导出的 AE 特性，换种实现方式或者导出成 BMP 预合成，有效的解决了设计动画和导出动画存在偏差的问题。2. BMP 预合成一键设置在 AE 动画设计的过程中，PAG 导出面板提供了一键设置 BMP 预合成的方法，如下图 9 所示。需要提示的是，一旦设置了 BMP 预合成，该合成中的文本和图片将不能再被用户编辑。图 9 BMP 预合成设置由于 BMP 预合成可能会影响到可替换图片的数量，PAG 同时会实时更新可替换图片的数量给设计以提示。3. 图片填充模式设置在用 pag 设置的素材中，经常会遇到用户填充的图片与默认占位图尺寸不一致的情况，在导出面板中 PAG 增加图片填充的四个规则，如图 10 所示：图 10 可替换图片填充设置其中：不缩放：画面不缩放，从左上角位置开始裁剪黑边：在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式拉伸：不保持宽高比填充，会发生失变形裁剪：在保持高宽比的情况下缩放到完全填满可用的屏幕大小具体效果如图 11 所示。图 11 图片填充效果图桌面预览工具 PAGViewer1. 效果预览PAGViewer 支持桌面端预览 PAG 文件动画效果，如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片，且支持设计师本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频，如果 PAG 文件内置了音频文件，支持播放音频效果。具体效果如图 12 所示。图 12 PAG 效果预览2. 性能检测在 pag 动画实际使用的过程中，PAG 经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳，需要进行返工优化，同样的问题在使用 Lottie 方案时候也会存在。除了效果预览，PAGViewer 还增加了性能展示面板，可以很方便的看到 pag 动画的基本信息，如时长、帧率、尺寸、bmp 预合成的数量，图层总数等，还有量化的性能指标，定量的评估 pag 文件的性能，如图 13 所示，方便设计师进行针对性的优化，而不需要等到上线前才会暴露性能问题。具体效果如图 13 所示。图 13 PAG 性能展示面板PAG 的应用场景目前 PAG 方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用。总结下来，PAG 目前主要使用在以下几大场景：1. UI 动画图 15 UI 动画场景设计师设计出动画文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。2. 贴纸动画图 16 贴纸动画场景3. 照片/视频模板图 17 照片/视频模板场景PAG 支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个 PAG 动画设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。仍然基于图片替换原理，PAG 也支持将占位图替换为视频，实现视频模板功能。4. 智能剪辑图 18 智能剪辑场景智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，可以从多个 PAG 文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接 AI 的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。关于 PAG 更多的信息，欢迎访问： https://pag.io/更多腾讯ISUX开发的神器：欢迎关注作者微信公众号：「腾讯ISUX」原作者：优设@ ISUX
酷炫动效怎么做？试试这3款宝藏神器（已打包）
导言随着“58 同城超级福利日”视频的上线，精致的界面、丝滑的动效展示给整个项目带来了更好的视觉观赏性与生动性。也让越来越多的设计师意识到单一的图形展示已无法满足一些特殊场景的情感化设计表达。本文结合了“58 同城超级福利日”项目案例，用几个简单的插件与脚本，带你实现炫酷的动效。注：视频可选用超清模式观看更清晰。案例解析1. 预设动画AE 软件内置了动画效果，包含了很多文字动画和特效，这些集成封装好的效果可以直接提升动画制作效率。同时还有一些第三方的插件或脚本也有制作好的集成效果，我们只需把效果拖拽放到制作对象的图层上即可完成。比如下图示例，“超级福利日”字体出场效果，包含了透明度、模糊度、缩放的变化，就是使用了 Mister Horse 脚本中的一个进场动画效果实现。具体操作方法，选中图层后，打开插件面板找到对应效果点击添加即可，通常每个效果会包含三种形式：In (进场)、Out (出场)、Both (进出场)，可以根据需要进行添加。如果不满意还可以点击插件面板的 Edit 选项，再选择 Remove 即可移除。2. 视频转场好的转场一方面能够让视频过度更加自然，甚至用户都察觉不到，另一方面还可以产生酷炫的节奏感。同样在 Ae 中也内置了一些转场效果，但是现在看来这些大多效果略显 PPT 风，显得过于老旧。而我们自己制作一个酷炫的转场又会耗费巨大的精力，简单有效的办法就是使用一些集成好的转场过渡素材，还可以对转场素材进行修改以达到我们满意的效果。如下，使用了故障效果的转场。下面来演示一下怎么利用 Mister Horse 脚本来给视频添加过渡效果。3. 3D 手势旋转模型导入 AE视频中手机旋转切换活动的效果，若单独在 AE 或 C4D 中都无法实现效果与文件大小的最优。AE 中直接使用 3D 效果，手机在旋转的过程中会出现页面与手机不贴合、脱离等情况。若直接在 C4D 中制作多个旋转效果，则会导致视频的整体文件偏大，影响视频加载时间。最终我们采取了一个折中的形式，先在 C4D 中将旋转的 3D 场景进行运动轨迹制作。将手机旋转序列与摄像机文件导入到 AE 中。旋转的动效进行复制，即可轻松实现多个切换效果也不会影响文件大小。页面与手机贴合的问题可以在 AE 中在进行细致地调整。插件与脚本好的 AE 插件&脚本会为你的动效设计添砖加瓦，节省大量的时间成本。动态设计师在日常的工作中都会依赖一些插件&脚本。下面为大家介绍一下本次文中使用的插件&脚本。不管你是高手还是菜鸟，以下几款插件都能让你的动效能力突飞猛进。1. Mister Hors 马先生马先生是一款能够快在 AE 软件中直接快速预览项目面板中的各个素材，不需要双击一个一个繁琐的预览，可以预览视频、图片、音频或合成的第一帧等一切素材，这款插件又出自疯狂的马头人，他出过很多精品的 AE 资源。官网地址： https://misterhorse.com/2. Glitch Transitions 脚本Glitch Transitions 脚本是一款带有音效的故障过渡转场，包含 11 个独特类别的 500 个预设，轻松调整视频之间的剪辑！在几秒钟内设计和轻松编辑城市和徽标类别的过渡 – 即使您是 After Effects 的初学者！这些类别中的每个预设都有独特的颜色和效果控制器——您将能够更改颜色、打开和关闭不同的故障效果、调整元素大小等等。3. Text Animator 一键添加文字动画和标题动画脚本扩展Text Animator 是一款用于设置各种文本和标题动画的预设扩展工具。一键添加文字动画效果可以节省很多时间和金钱！1200 个预设双击快速添加到文本层，淡入淡出文字特效，弹跳文字动画，虚焦模糊文字动画等多种文字动画效果，可对时间、效果进行调整控制，可与任何语言、任何字体一起使用。最后以上为我们在这次项目的案例解析及运用到的视频制作的插件，插件已打包到附件，希望能对大家在日常设计工作中有所帮助或从中获得更多启发。欢迎关注「58UXD」的微信公众号： 文件名 如何下载使用 文件大小 提取码 下载来源 AE插件 586.28MB 8866 点此复制 登录下载 原作者：优设@ 58UXD
还在用AE做动效嘛？来试试这6款新晋的动效设计工具吧！
很多同学做动画或者动效的时候，始终会首选 AE 这样的大厂出品的工具来做，不过很多使用场景并不需要这样，有很多新型的动画/动效类的工具可以帮你同样达成效果，但是更加方便。今天推荐6款新工具，希望能够帮到你。Jitter---使用 Jitter 来制作动画，会发现动画的制作会变得简单很多，而且可访问性更强。作为一款动画设计工具，它可以超快地帮你制作文字效果，使用预设动画立马搞定常见的效果，可以针对动画完全自定义设计，最终导出的时候可以选择 Gif 也能是视频，当然最方便的地方在于，这款工具是内嵌到浏览器当中的！你无需要单独安装。Rive ---Rive 是一个全新的动画制作工具/平台，它兼顾了当下的设计写作需求，以及对于动画性能的要求。一方面，不同状态不同职能的人可以在 Rive 上协同创建动画，另一方面 Rive 针对所有主流平台进行了优化，它完全开源，所以确保了动画在各个平台上都有足够良好的性能。Rive当前支持Web，iOS，Android，Flutter和C ++，对于个人用户而言，Rive 是完全免费的，多人协同需要付费，具体可以参看他们的官网。Float---Float 是一款新型的动画工具，它可以把静态的图片转化为效果出众的动画，让你以更富有艺术性的方式来呈现你的设计或者图片。使用的方式也很简单，就是把图片上传到 Float 当中，接下来你就可以下载有趣的视频效果了。这是一款付费工具。Fabula---Fabula 是一款 iOS 和 Mac 平台的超强的动画设计工具，它能够非常便捷地调整动画的曲线和轨迹，实时预览，并且能够生成可用的 Swift 代码片段，相当强大。Animation Desk---Animation Desk 是一个面向初学者的动画工具，如果你是专业的动画设计师，那么你能玩得更溜。这个工具本身内置了大量的效果和功能，也可以输出主流的各种格式。Drawer---这是一个素质极高的 Lottie 和 SVG 插画的大合集，Drawer 提供的服务是高度可定制化的，你可以轻松为不同的设计项目提供有趣又自由的动画。原作者：优设@ 陈子木
做好直接用！动效神器 Lottie 基础入门教学
疫情期间，在线生活迎来爆发 ，视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。短视频行业的日活用户规模较平日增加 16.7%，日人均使用时长较平日增加 9.3%。长视频成为很多网友在家消磨时间的方式。腾讯视频独播剧《三生三世枕上书》和芒果TV独播剧《下一站是幸福》，更是让平台日活分别增加 22% 和 26%。可以说，视频行业的利好趋势，基本上不受疫情影响。短期内疫情会带来较大增幅，但是疫情过去之后还会保持自己的增长节奏。这几年也积累了一些关于视频编辑和相关产品的经验。今天来介绍一款可以将 AE（Adobe Effect）文件导出 json 格式的工具，名叫 lottie。什么是lottie第一次接触它是在 3 年前，做视频社交的时候，需要做视频编辑功能，后来因为产品方向的变革，没有使用成功，但第一次的接触让阁主认识到这个软件的存在。最近又在做视频模板相关的需求，做一个可编辑的视频模板，用户只需要在模板填充内容，就可以使用已有的酷炫视频资源，于是又接触到 Lottie。当时遇到一个什么样的问题呢，设计师可以用 AE（Adobe Effect）设计出各种酷炫的视频效果，但开发真的要将设计师所做的效果显现出来并适配各个系统和各种大小的屏幕，会耗费很大的工程量，成本比较大，为了尽量缩小开发成本，于是引用了 lottie。lottie 最大的好处，就是可以将做好的 AE 文件，直接导出 json 文件，让开发直接运用，基本上实现了 0 成本的开发量，真是太棒了，大大减少了设计师和开发之间的沟通成本。怎么安装1. 安装Adobe Effect，最好是安装英文版本的lottie 是由 Airbnb 团队研发出来的，因为是国外的公司，所以汉化版本，或多或少会出现各种兼容的问题。但别担心，各个设计软件的界面长得都差不多，基本能猜到各个图标是干什么的，以及相应的操作提示是什么意思，哪怕有一两个单词不认识，网上翻一下也就都懂了，界面英文不会太难。2.下载文件并安装Lottie安装文件链接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取码：6V4g备用下载链接：https://share.weiyun.com/5dFxjC8安装文件也是英文版本，解压后有 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」就大功告成了相关注意事项如果出现如下图的现象，插件卡在某个图片上，导不出来，可以尝试以下几个方法：在使用 bodymovin 的时候将电脑的语言系统也换成英文，如果不习惯，不用的时候再换回来中文。系统语言有时候也会影响导出的成功率，阁主用的是正版 AE 2020 会遇见语言问题，用 2017 英文版就不会，也跟 AE 软件本身版本相关。导出 json 的路径如果含有空格，也可能导致不能导出，直接导出到桌面是最直接的。太复杂的动画可能导出会有问题，简单的遮罩是支持的，建议不要用太复杂的逻辑做动效。最后，总结一下，为了跟上时代的潮流，拓展自己的技能，可以尝试下视频相关的设计需求。而 Lottie 是其中能帮助团队节省开发效率，让设计师专心设计动效掌握主动权的工具。Lottie安装文件链接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取码：6V4g备用下载链接：https://share.weiyun.com/5dFxjC8更多关于 Lottie 的教程：欢迎关注作者的微信公众号：「Sophia的玲珑阁」作者： Sophia的玲珑阁
比阿里犸良还强大！Lottie动效设计完全指南
之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。往期回顾：《比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）》《比阿里犸良还强大！Lottie动效设计完全指南（导入篇）》动效导出类型一般情况下我们导出的动效可以分为三种类型。1. 纯矢量图形动效此类动效常用于图标、加载、启动页等。2. 包含位图的基本动效此类动效为了表现一定的视觉效果，会用到丰富的渐变和图层样式等效果，因为 AE 无法直接输出，所以需要使用位图的形式输出。3. 使用特殊效果的动效前两类虽然输出的文件形式不一样，但是都是使用基本的位移、大小、旋转、透明度的基本动效属性，可以通过代码直接输出。但是如果试用了 AE 中的特殊效果或者第三方插件的话，是无法直接输出这些效果的。动效导出方法纯矢量动效导出纯矢量动效导出相对简单，只需在导出时勾选字体图形化和演示模式两个选项，导出以后会生成一个 json 和 html 文件。分别供开发人员使用和预览动效。但是矢量动效导出目前有一个最大的问题就是渐变色导出会变为无彩色。官方说是因为编码和语言的问题，所以中文版 AE 会出错。目前有相关的修复方法，但是相对麻烦。工作中尽量规避使用矢量渐变色。关于渐变导出出错的修复方法，Windows 和 MacOS 需要进行不同操作。详细请看以下步骤。windows系统修复渐变问题将AE程序语言设置为英文方法一：在以下路径找到 application.xml 文件，用记事本打开 application.xml，按键盘的 CTRL+F 键搜索 zh_CN 替换为 en_US，并保存文件，重启 AE 即可语言配置文件路径：C:Program FilesAdobeAdobe After Effects CC 2018Support FilesAMT但如果 AE 是从网上下载的中文版本，可能会提示当前账号只支持中文版 AE，修改后的 AE 无法正常打开。此时可以尝试方法二。方法二：卸载 AE，然后在 creative cloud 中点击右上角菜单进入「首选项-creatice cloud-应用程序语言-设置为英文」，再通过 creative cloud 重新安装 AE。修改非unicode程序的语言为英文通过「控制面板-时钟和区域-更改日期、时间或数字格式-管理–更改系统区域设置-选择英语（美国）」确定，然后重启电脑。步骤 2 的修改可能导致部分程序出错，建议使用完毕后再将程序语言改为中文。MacOS修复渐变问题MacOS 相对简单，只需将 AE 修改为英文版即可。将 AE 程序语言设置为英文。在「在访达-应用程序-选择ae的程序包-点击右键选择现显示包内容」，在 contens 文件夹下找到 resources，选择 resources 的子文件。在 resources 文件夹中找到 zh_cn 和 zh_tw，将 zh_cn 和 zh_tw 这两个文件夹拖出 resources 文件，就可实现 AE 的英文切换，重新拖回就实现了中文切换。如果修改语言后，AE 无法打开，请参考上方，windosw 系统下通过 creative cloud 重装英文版 AE 。需要注意的是 bodymovin 也需要使用最新版本，旧版本可能不支持。含有位图的动效导出当动效中含有位图时，导出的动效文件就会多出一个 imags 文件夹，用于存放图片资源。导出之前可以在 bodymovin 的设置选项内可以进行相应的设置。可以通过设置项来压缩图片资源，也可以导出图片后再用压缩工具压缩。将图片转为 base64 编码并放进 JSON 文件里。这样就不用导出 images 文件夹了。但是图片转为 base64 后体积会增加，并且目前只有最新版的 web 和安卓端支持带 base64 的 JSON 文件的播放，iOS 以后才会加入。这里额外需要注意的是，images 文件夹的名称和内部图片名称不可随意更改，不然 json 文件就无法调用资源，导致图片资源加载出错。我们日常导出动效资源的时候默认生成的图片资源命名都是 ima_0 这种格式的。但是在实际使用中会调用很多个 json 文件，如果每次生成的图片名称都一样会导致加载错乱，所以需要提前规避。一种方法是让开发人员去规避，另一方面就是我们在设计之初就做好命名。如果导入素材之前就已经命名好了就无需调整了，只需在 bodymovin 的「设置-图片资源设置里勾选保留图片名称」。导出的图片资源即可按照命名导出。如果需要在 AE 内部修改，务必要在项目中修改素材名称，在合成里修改的只是图层名称，这样是不生效的。特殊效果的动效导出含有特殊效果的动效是无法直接导出的，所以只能用笨办法，将动效渲染为序列帧。然后再导入 AE 按照帧动画的方式输出。以一个粒子动效为例，首先我们将动效渲染为序列帧，然后隔一帧删除一帧或者多帧，以此来减少图片资源。在保证动效流畅的情况下，尽可能的减少图片资源。以优化存储和性能。在合成设置里将帧率变为原来的 1/2，因为删除了一半素材，仍然使用原来的帧率会导致动效速度加快。所以需要减少帧率以保持速度和原本一致。选中所有图层，将图层的轨道向左移动到最小，然后「右键-关键帧辅助-序列图层」，即可让图层一帧一帧播放。这里需要注意的是，首先选中最上方图层，然后按住 shift 键，再次点击最下方图层。用这样的方式全选图层以后，再序列化图层。动效的播放顺序才是正常的，否则可能会倒放。关于 Lottie 动效的介绍，以及设计输出中可能会遇到的问题。到这里就告一段落了。相信看完这三篇文章，无论是对初次接触的设计师推动团队使用，还是新手设计师提高设计效率都会有一定帮助。欢迎关注作者的微信公众号：「懿凡设计」作者： 懿凡设计
比阿里犸良还强大！Lottie动效设计完全指南（导入篇）
上一篇文章《比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）》已经系统地为大家讲解了 Lottie 动效的基本知识，相信很多同学都跃跃欲试了。而在我们使用 AE 制作动效的过程中，往往会遇到很多问题，第一个大问题就是动效素材的导入。本文将以一个实际动效案例的导入流程为例，帮助大家了解高效导入设计文件的方法。以上为本次演示的动效案例。导入文件之前我们首先要分析操作对象的特点，有哪些部分是要做动效的，哪些部分是静止的。需要运动的图层或组要单独分开，保持静止的图层可以合并。如果涉及对称结构，可以在 AE 中只做一边，预合成以后使用翻转即可。从PS导入AE将动效文件整理好就可以导入 AE 了，当我们将 psd 文件拖入 AE 中会有三个提示选项：1. 素材当我们已经导入了 psd 文件，需要从原 psd 补充素材的时候可以选择此选项，但是每次只能选择一个图层或者将所有图层合并为一个图层导入。优点是能让图层保持在 ps 中的位置，缺点是当有多个图层需要添加时需要多次导入。2. 合成选择此选项，所有图层都会按照画板大小导入，所以会导致很多图层有透明区域。优点是对于可以复用的元素（如小鸡仔的翅膀）可以采用翻转的方式快速复制，无需移动即可变化到对称位置。缺点是会增大文件尺寸。使用 Lottie 输出动效时不建议此方式，会增加资源。3. 合成-保持图层大小选择此项，优点是图层会裁切掉所有的透明区域，能够保证文件尺寸最小。缺点是翻转以后需要通过位移才能让图层和对称元素保持相同位置。可以通过先建立预合成，再一键翻转的方式，避免移动操作。使用 Lottie 制作动效时，推荐采用此方式。从AI导入AE从 AI 中导入 AE 相对要麻烦一些。首先我们需要将 AI 文件导入 AE 中，选中 AI 图层，然后「右键-创建-从矢量图层创建形状」。AI 文件就转换为可以在 AE 中编辑的矢量图形，但是如果我们直接将 AI 文件直接拖入 AE 中，这样会导致所有形状都在一个图层里，如下图所示。在AI中拆分图层所以我们需要在导入 AE 之前，先将 AI 文件拆分成多个图层。首先还是和 PS 一样将各部分按照需要进行拆分，先不用命名。然后选中最上方图层，选择「选项卡菜单-释放到图层（顺序）」，再选中除最上方图层外的所有图层，按住鼠标并下拉。这样所有的图层就拆分开了。最后再删除掉最上方空图层即可。完成以上步骤再对拆分开的图层进行命名。之所以没有让大家一开始就命名，是因为操作的过程中发现，释放图层以后命名好的图层名就改变了。使用插件在AE中拆分图层刚才提到的，导入的 AI 文件不分层，其实可以通过 Explode Shape Layers 插件解决。只需在 AE 中安装即可解决我们导入 AI 文件过程中的问题。1. 形状一键拆分通过该插件可以一键将 AI 图层转换为矢量形状，相对于「右键-创建-从矢量图层创建形状」要更加简单高效。转化为矢量形状后，点击第一个按钮，即可将图层拆分为单个形状。2. 形状一键组合使用一键拆分功能会将图层拆分成一个一个图形，但是很多时候我们不需要拆分的那么细。比如案例中的小鸡仔，有的部分是不动的，我们希望把它合并成一个图层。这个时候点击第二个按钮即可一键组合形状。3. 删除空图层有时候拆分 AI 图层后会出现空图层，此时选择第四个按钮即可选中这些图层，便于删除。4. 批量选择修改填充/描边属性使用最后两个功能可以快速选中形状层并快速修改属性，不常用。AE与AI无缝衔接以上说的方法都是单纯的在 AI 或者 AE 中处理素材的方法，但是我们实际工作中，经常会需要增加或者调整素材。最后介绍一款大杀器，可以无缝衔接 AI 与 AE ，不仅可以将 AI 中的元素一键导入到 AE 中，还可以将 AE 中的文件导入 AI。Overlord 具有全面而强大的，能够满足我们导入文件的各种需要：导出所选内容：AI导出到AE，或者AE导出到AI；导入所选内容：AI/AE选中内容后，在AE/AI中选择导入，即可导入所选内容；导出选项：分层导入所选元素、记录形状数据、保持中心点在形状中心，默认是在合成的中心、导出内容到画布中心，默认是保持原位置；快速切换 AE/AI 窗口；在 AI 中新建一个与 AE 合成相同尺寸的画布；导入色板到 AE 中（需配合 Ray Dynamic color2 插件）；将参考线导入 AE。日常使用过程中我们只需在导出选项中，选择分层导入所选元素，即可快速将所选内容快速原位复制到 AE 合成中（需要 AI 画布与 AE 合成大小相同）。当我们需要将几个部分导出为一个图层时，只需关闭分层导出，再将几个元素选中以后，点击导出即可。综合对比以上几种方式，Overlord 对我们日常导入和编辑素材来说更加方便快捷，当然不同的方式也有不同的应用场景。大家按需使用。Sketch和Figma导入AE目前越来越多的设计师通过 Sketch 和 Figma 来设计文件了。Google 团队开发了一款插件 AEUX，可以让这两个软件和 AE 无缝打通。详情可阅读：《谷歌设计团队发布了一款动效神器，让 UI 和动效无缝打通！》插件安装1. 插件下载下载链接：https://pan.baidu.com/s/1CL9LO3gA17cSBBqaIZflJQ 提取码：tmue备用下载链接：https://share.weiyun.com/5895PQ82. Explode Shape Layers安装说明将「AE脚本」文件夹复制到相应 AE 目录下即可，如下：..Support Files/Scripts/ScriptUI Panels该脚本将会出现在 AE 的「Window」菜单下。2. Overlord安装说明将 overload 文件夹分别复制到：C:Program Files（x86）Common FilesAdobeCEPextensionsC:Users用户名AppDataRoamingAdobeCEPextensionsC:Users用户名AppDataRoamingBattleAxe以上路径最后面文件夹如果没有就自己手动创建。打开 AE，在拓展里打开脚本随便输入注册码。打开 AI，在拓展里打开脚本，开始使用，这个脚本也需要在 AI 打开配合使用。使用 AE 过程中的文件导入，就讲解到这里。下一篇将带大家了解使用 AE 导出 Lottie 文件时需要注意的问题，欢迎持续关注。欢迎关注作者的微信公众号：「懿凡设计」作者： 懿凡设计
想用 Lottie 做动画？先收下这份常见错误和解决方法总结
Lottie 是 Airbnb 推出的一种 SVG 动画解决方案，它可以跨平台播放，并解决了动画落地难的问题。当设计师做完动画只需使用 bodymovin 将动画导出成文件再传给前端，前端就能非常快速地引入文件和播放动画。对于 Lottie 的初级使用经验，已经有很多分享，所以这篇就不再做赘述。但是实际在使用 AE+Lottie 制作动画的时候往往会碰到各种问题，所以今天我就结合我做的礼物动效案例来和大家分享一下使用这个方案制作动画时常见的错误和解决方法。使用 AE+Lottie 的方案制作 SVG 动画，要领就是尽量脱离插件和辅助效器，以最质朴的方式制作 SVG 动画。由于动画在不同的播放端所支持的功能有略微的不同（具体可见下图），所以在制作的时候我们就要根据最终动画的承载端所支持的功能去设计动画的方案。△ http://airbnb.io/Lottie/#/supported-featuresImage title动画demo页面一片空白，动画未成功加载出来导出动画无法显示是刚开始使用 Lottie 的设计师经常遇到的问题。出现这样的情况我们右键网页，选择「调试」（chrome）或者「检查模式」（edge）来查看网页的源码和 console 中报错的提示内容。如果你完全看不懂播放端的报错提示，可以请前端小哥哥来帮你解读一下。这个报错的提示能够大致知道为什么无法播放，大多情况如下。案例1： 使用第三方动画素材并导出成SVG动画这里我使用了 RTFX 插件其中的一个爆炸素材来进行说明。在导出动画后，demo 页面空无一物。然后我们来看一下 console 中的报错提示：提示结果时由于 numkeys 无法生成动画。那么我们回来查看动画文件当中发现在最外层合成的时间重映射下包含一个表达式：T=thisLayer;if((T.marker.numKeys>1)&&(numKeys>3)){sIn=key(2).time-key(1).time;sOut=key(4).time-key(3).time;eIn=T.marker.key(1).time;eOut=T.marker.key(2).time;if(time这是一段调整重映射速率的代码，假设我不需要调整速度，所以我直接删除这段表达式，再来看看里面的子合成是否会报错。结果图片能显示但是浏览器依然报错了。这回是「Cannot read property ‘layer’ of undefined 」这个错误。这个错误非常常见，它出现往往意味着你的动画图层中运用了一些不支持的效果器或者表达式。所以想要直接从第三方的素材包导入素材往往会出现各种错误，因为这些插件为了让使用者能充分地自定义风格和颜色，往往运用了很多自带的效果器和表达式。如果你想要使用这些素材，那么就得删除那些不支持的表达式、不支持的插件，同时你还必须深入查看动画文档的结构，并检查图层中是否运用了合并路径或者是图层混合模式等等。这些插件和表达式删除后，如何通过 SVG 动画支持的方法去重构这些效果又是一个问题。由此得知套用第三方的素材需要调整很多内容，还不如自己做。建议还不算很了解 SVG 动画时，不要使用第三方的素材。案例2： 使用Joysticks ‘n Sliders显示报错，无法显示目前 bodymovin 支持 duik、Joysticks ‘n Sliders、rubberhose 等主流的骨骼绑定插件的大部分功能。但是在使用这些插件制作人物动画或者骨骼动画时需要在导出时修改 bodymovin 的设置。因为这些插件生成的合成结构会包含 guides 图层，或者一些隐藏的图层，同时表达式又指向这些 guides 图层，所以在导出的时候需要根据文档的结构勾选 hidden 和 guides 两个选项来导出这些图层。这样动画大部分情况下就可以正常加载播放。除了之前的 Lottie 功能支持表外， 你还可以在这个页面找到 bodymovin 目前支持的 AE 的功能：https://github.com/airbnb/Lottie-web/wiki。demo页面的动画与AE中的不同在解决了第一类完全无法加载动画的问题后，我们进入第二类问题，那就是导出的动画和 AE 中显示的效果不一致。在这一类中我只列举了我遇到的问题，如果你有遇到问题且自己解决了，欢迎在评论区留下评论，以让更多人知道如何解决它。下面我们来看看具体有哪些问题。案例1： 渐变无法顺利导出这个情况我想大多人都遇到过，包括很多其他的分享中也有提到。原因是因为在非英语编码下，插件无法执行获取渐变数据的代码。解决方案如下：根据 bodymovin 作者 hernan 的介绍，AE 中的渐变信息是存储在 AEP 文件当中，所以在你导出渐变的时候务必先保存文件。另外由于编码和语言的问题，渐变还是会导出不成功，接着往下看解决方法。Mac 系统：将 AE 的程序语言改成英语；将动画文件中的「渐变填充1」改为「Gradient Fill 1 」；保存工程，即可顺利导出渐变信息。Windows 系统：除了上面的操作外，需要在 1 和 2 的步骤中更改系统的「非unicode程序的语言」。方法如下：控制面板>时钟和区域>更改日期、时间或数字格式>管理>非unicode程序的语言>更改系统区域设置>选择英语（美国），然后重启电脑。（注：此更改会导致系统中其他的部分软件出现乱码现象，所以在导出完成后需要再次改回原来的中文。）案例2： 自带效果器无法导出从上文的链接中，我们知道目前 bodymovin 仅仅支持 Drop Shadow、Fill、Pro Levels or Levels（Individual Controls）、Tint、Tritone、Stroke（partially）这几个 AE 的内置插件，所以可以说绝大部分效果都无法被支持，所以自带的效果器的效果自然无法在播放端显示。我以echo这个内置插件做了一个参考效果，对比就能看得出两者差别。既然默认的插件不支持，那么我们就得通过其他的手段来复刻这个效果。那么我们可以复制多个形状图层，并在 positon 中使用表达式 valueAtTime() 去模拟 echo 这个拖尾的效果。案例3： 素材缺失导致无法显示使用 bodymovin 导出动画后你会获得一个 json 的文件。那么在默认的导出设置中，位图等信息都是通过二次渲染并将渲染后的图片放在 json 文件的同级目录中的 images 文件夹中，所以如果有一些动画必须要使用位图，那么有两种选择。第一就是将附带的 images 文件夹一同给到前端；第二种就是在导出设置中 assets>include in json，选中这个选项。那么 bodymovin 会在导出的时候将位图信息转成字节码并保存在 json 文件当中。这样当前端播放的时候就会自动解码图片，但是有的时候字节码占的空间比 jpeg 更大。所以在位图素材不是很大的情况下第二种方案更好，如果在一个工程中位图有很多，那么建议使用第一种方案。另外，将矢量文件导入 AE 后记得转换成形状，这样在导出后就不会丢失矢量素材信息。案例4： wiggle等表达式效果不一虽然 AE 中使用 JavaScript 作为表达式的语言，但是实际上它和网页支持的 JavaScript 有些许不同。根据 hernan 所述，表达式的转换在导出时会进行评估，所以并不是所有表达式都可以在播放端完美的运行，wiggle 函数就是一个典型例子。在动画中，我对 postion 添加了 wiggle(5,50)，但是动画在网页中显示的时候就如鬼畜一般，频率和偏移量都不对。这是由于目前没有办法还原 AE 当中的 wiggle 表达式。要解决这个问题，我们只需要在导出的时候将 wiggle 表达式烘焙成关键帧即可。随着 bodymovin 的更新迭代，目前大部分常用的动画制作表达式都慢慢被支持，但是如果你的动画文件不需要在前端做任何形式的交互，那么建议是将表达式烘焙成关键帧，以减少播放端的计算压力。案例5： 路径动画在播放端闪烁或者变形异常首先要说明的是路径动画顺滑的前提是每个路径变化关键帧锚点数量相同，锚点的起始位置和锚点走向相同。Lottie 在渲染 SVG 动画时它的帧率是超过 60 帧的，而往往我们制作动画时帧率会放到 24 或者 30 帧，甚至更低。那么 Lottie 在播放动画的时候就会根据你的关键帧数据自动去计算这些多余的补帧。由于上方的动画在 AE 当中本身就是逐帧，所以形状的变形过程你是看不到的，但是在播放端播放时由于帧率变高，这些变形过程就能被眼睛看到。同时由于制作这些路径变形动画没按正确的方法制作，所以就会在播放端看到变化异常或者播放画面抽动闪动的现象。要解决这个问题大致有两个方法：将路径的关键帧类型改成 Toggle hold keyframe，这样前端播放就不会计算中间的数据。在前端用 JavaScript 为动画添加「anim.setSubframe(false);」，这样前端的播放就会遵循AE当中的帧率来播放动画。以上就是常见的几类错误和解决方法的归纳。希望对正在使用 Lottie 方案制作动画的小伙伴有帮助。最后放一些我们工作室做的比较复杂的 SVG 动画，并附上下载地址，希望大家喜欢。△ 通用特效△ 玉米火箭动画△ 火箭动画 △ 胡萝卜飞机动画△ 超级火箭动画 作者： 蛋卷直播实验室
比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）
动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展和动效输出方式的优化。因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数学题一样，让你把解题思路教给别人，你可能就没那么顺畅了。一方面取决于你的表述能力，而更重要的是对方的理解能力。过去所广泛采用的通过动效标注输出给开发的方式，都存在还原度的问题。很多时候还原度达到 80% 可能都算比较好的了。而今天要说到的 Lottie 不仅可以 100% 还原动效，而且无需动效标注。直接通过 AE 输出动效文件给开发。开发人员直接调用，然后完美还原。Lottie是什么？Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据，其工作流程如下：是不是听起来很心动？其实 Lottie 已经火了一两年了，很多人应该也看了一些介绍。希望工作项目中经常涉及到动效设计，但是还在用老方法的同学。可以尝试使用 Lottie 帮助动效落地，提升团队工作效率和个人影响力。Lottie有什么用？Lottie 可以应用在 UI 设计的很多场景中。以下举出几个常用例子。1. 动态启动页2. 动态图标/按钮3. 空页面4. 加载/下拉刷新5. Banner/弹框6. 表情/礼物/动态贴纸以上仅列举了部分常用案例，其实 Lottie 的应用场景远不止这些。在 APP 的多个模块中都可以运用，那么我们要如何将 Lottie 运用在自己的工作项目中呢？那就要了解 Lottie 的原理了。Lottie的原理是什么？前面已经提过 Lottie 是 Airbnb 开源的一个动画渲染库。我们可以理解为它是一个多功能的视频播放器，开发人员需要将这个播放器部署到相应的环境中。然后设计人员提供视频（动效文件）给开发人员，让开发人员按照要求播放视频文件，即可完成动效的应用。Lottie 动画的播放控制，除了常规的控制，还支持进度播放、帧播放。以一个动态按钮的切换为例，方便大家理解。△ 用 Swift 制作一个漂亮的汉堡按钮过渡动画上图所示为一个菜单/关闭按钮的动态切换。假设该按钮动效一共10帧，整个按钮切换分为两部分，第一部分：从菜单切换到关闭（1-10帧）；第二部分：从关闭切换到菜单（10-1）。我们可以让开发通过以下控制方式，完成我们想要的效果。按钮动效默认显示第1帧（菜单状态），点击按钮以后开始播放动效，动效播放到第10帧的时候停止，并停在第10帧（关闭状态）。当按钮为关闭状态（第10帧）时，点击按钮以后动效从第10帧倒放到第1帧（关闭状态），并停在第1帧（菜单状态）。通过以上方式就完成了对一个动效按钮的控制。而日常工作中我们可以灵活地运用多种控制方式。首先动效的触发，可以是一次交互事件，比如点击、滑动；也可以是监听到了广播，比如网络异常等。而触发以后的动效控制也多种多样，可以从开始播放到结束，也可以进行倒放；可以循环播放某一段动效；也可以从某一帧播放到另一帧，或者某一个时间点播放到另一个时间点；更多的控制方式需要大家在工作中慢慢挖掘。Lottie支持的AE属性Lottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。上图为 Lottie 支持的主要 AE 属性，此处有删减掉部分不常用的属性。可以打开以下链接查看完整版http://airbnb.io/lottie/#/supported-features需要注意的是文档中虽然说支持渐变，但是会出错，所以大家在使用矢量图形时，请勿使用渐变效果。关于渐变效果的修复后续文章会提到，官网以后也会修复相关问题，但是没有确切时间。通过上图我们可以了解到，Lottie 支持的 AE 属性基本包含以下几类：基础的形状比如圆形、矩形、星形等，也可以支持钢笔工具绘制的矢量形状和从 AI 中导入的矢量图形。支持位移、大小缩放、透明度、旋转、修剪路径、蒙版、遮罩这些基础动画属性。支持图层间建立父子级关系（只支持图层与图层之间建立，当图层的属性之间建立父子关系会失效，比如 A 图层可以和 B 图层建立父子关系，但是 A 图层的位移属性和 B 图层的位移属性单独建立父子关系则不生效）。支持速度贝塞尔插值，可以搭配 Flow 插件生成各种缓动效果。支持导入图片。支持时间拉伸和时间重映射来通知时间和速度。AE插件安装与使用前面已经提到 Lottie 是通过 AE 插件 bodymovie 导出 json 文件作为动画数据。接下来就为大家讲解插件的安装与使用方法。下载bodymovie插件官方英文插件地址：https://aescripts.com/bodymovin/（文末提供中文汉化版下载地址和详细安装教程）自动安装方法下载zxp格式安装器，下载地址：https://aescripts.com/learn/zxp-installer/，安装成功后，双击步骤 1 中下载的插件即可完成安装。手动安装方法如果自动安装失败，可尝试手动安装。首先修改 ZXP 文件后缀名为 ZIP，然后解压缩文件，得到文件夹，将文件夹复制到以下目录。WINDOWS：C:Program Files (x86)Common FilesAdobeCEPextensions orC:AppDataRoamingAdobeCEPextensionsMAC：/Library/Application Support/Adobe/CEP/extensions/bodymovin您可以打开终端并键入：$ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application Support/Adobe/CEP/extensions/bodymovin然后键入：$ ls /Library/Application Support/Adobe/CEP/extensions/bodymovin以确保它被正确复制类型。安装后Windows：转到编辑>首选项>常规>并选中「允许脚本写入文件和访问网络」。Mac：转到Adobe After Effects>首选项>常规>并选中「允许脚本写入文件和访问网络」。安装完成后即可在窗口>扩展>bodymovin（Window> Extensions> bodymovin）中找到 bodymovin 插件。插件主界面如图所示。在主界面可以选择需要导出的合成、导出设置、导出文件夹，并且可以预览动效。每次导出时都需要进行设置。标红区域为必选选项。字体图形化可以将字体转化为路径，不勾选会因为应用的平台没有相应字体导致文字加载出错；勾选演示模式后会生成 html 文件，打开该文件即可预览动效。当含有图片资源时可以根据需要选择勾选对应的选项。保存好设置后，点击渲染即可生成动效文件给开发。当只有矢量图层时，开发只需要使用 json 文件即可。当含有图片文件时需要将 json 文件和图片文件夹一并给到开发人员使用。需要注意的是不能随意修改文件夹名称和内部文件名。如果需要修改图片名称，应该同步修改 json 内部代码。相关修改方法，后续文章将会详解。动效预览为了测试 json 文件是否能在对应平台显示正常，Lottie 提供了预览平台。将导出的 json 文件上传到网站即可预览效果，也可以下载相应 APP 扫码或者导入 json 文件预览。官方社区，可以预览动效和查看其他设计师公开的动效案例（自己上传的预览动效不会被公开）：https://lottiefiles.com/iOS 在 app store 搜索 Lottie 即可下载预览软件，安卓需要在 google play 下载安装。考虑到部分朋友无法使用 google play， 文末提供下载。推动落地相信大家看完都有跃跃欲试的想法。但是要实际应用在工作项目中就需要各位设计师去推动了。其中可能会面临一些阻力，比如开发人员的能力水平以及个人的沟通方式等等问题。但是对于正确的事，只要我们坚持去做就会有结果的。首先对于 gif 动画而言，Lottie 更加轻量，且性能更好，并且不易失真；对于开发人员自己写动效来说，一方面 Lottie 减少了大量动效标注的时间，并且可以 100% 还原动效，对于开发人员来说无需再手动写动效了。一次部署，终身轻松。相信相关人员了解以后都会去支持的。为了方便开发人员使用，下面列出几个使用网站，如果开发人员不知道如何部署和控制动效，直接把链接扔给他们就行了。Lottie官方介绍和开发文档：http://airbnb.io/lottie/#/READMEYork_魚的lottie介绍和动效控制方法详解：https://www.jianshu.com/p/01f6bb509d54下载链接文件下载链接：https://share.weiyun.com/5DpXrKm 密码：iuaruk备用下载链接：https://share.weiyun.com/5m2Dinf关于 Lottie 的介绍就到这里，后续将会持续更新 Lottie 动效设计过程中涉及的各种问题和方法技巧。欢迎关注作者的微信公众号：「懿凡设计」作者： 懿凡设计
阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效
阿里作为中国互联网企业的标杆，不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业，在各个专业领域，给专业人员提供了优质的工具与服务。对设计师而言，无论是每年一度的 UCAN大会，还是 Kitchen、语雀、Ant Design 等设计开发工具，都给广大设计师带来很大的便利。而最近，阿里又推出了一款基于 Lottie 的动效设计平台 ── 犸良。能够快速生成设计师想要的动态效果，并交付给开发，极大地提高了设计效率和设计还原度。犸良是什么？它是一个积累了很多通用动效素材的平台，让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意，你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术，让曾经令人苦恼的安装包大小和性能问题一并解决。△ 官网：https://design.alipay.com/emotion犸良的应用场景犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台，一站式完成动效创意制作和投放。丰富的动效素材能够满足多种场景需要。犸良怎么用？方式一：基于模版直接制作（适用于设计师进行动态banner制作）选择模版从动画仓库选择动画进行当前动画的替换通过替换图片或修改颜色来自定义动画自定义模板文字内容选择模板背景图片完成编辑选择是否带背景（banner模版默认带背景）导出成功下载 json方式二：自定义画布制作（适用于设计师进行模板覆盖不到的动效应用场景）使用犸良一分钟做出来的效果，大家感受下：体验感受综合体验了一下犸良，相对于鹿班人工智能随意撸图。犸良其实是一款基于人工的动效模板网站。所有的动态效果都是设计师提前做好的。基于 Lottie 的特性，将可编辑的属性进行模块化。说到这里有些设计师可能有疑问了，Lottie 究竟是什么？在优设已经有相关文章介绍的比较全面了，这里就不赘述了，阅读链接：http://www.uisdc.com/tag/lottie/。简言之 Lottie 就是一个快速将 AE 中设计的动效快速调出，并且开发可以直接调用的动效库。Lottie 的原理是将矢量图形和动态效果通过代码实现，复杂的图形导出图片资源。最终生成 json 文件+图片资源。犸良所做的就是，将 json 里的颜色属性提取出来，用户可以从外部修改。同样只需要替换图片资源，就可以让用户自己设计的图形根据 json 写好的运动方式来展示。如果你把一只移动的猪替换成猫了，那么你看到的效果就是一只移动的猫。而它的文字编辑功能，我觉得就比较神奇了。因为 Lottie 貌似不能从外部修改字体，应该是阿里自己写的。如果有知道的同学也欢迎解惑。因为我们在实际工作中经常遇到这样的问题，就是如果动效包含文本了，需要适配国际化，就没法从外部修改语言。如果能解决这个问题，将会减少很多麻烦。从现有的素材来看，其主要应用场景还是电商和运营方面。相信未来会增加更多的素材和应用场景。希望以后能够开放出让设计师可以将自己做的动效分享出来供大家使用，或者提供优质付费内容也是不错的选择。就个人的工作经验来看，Lottie 还是有丰富的应用场景的。比如可以做动态图标、动态闪屏页、表情贴纸、直播礼物、空白页、动态banner……其实 Lottie 官方社区也有很多的动效资源，都是来自全世界的设计师上传的，大家可以去下载参考，如果要商用，可能需要联系作者。△ 附上链接：https://lottiefiles.com/popular本文资料，很多都是来自语雀的分享。再次感谢相关人员的辛勤付出。大家可以在此处查看犸良的完整介绍：https://www.yuque.com/dapolloali/news/ui43vg。再次附上官网：https://design.alipay.com/emotion因为犸良是基于 Lottie 的工具，所以有相关基础的设计师很容易上手。还不了解的同学也可以在各大设计网站搜索到。欢迎关注作者的微信公众号：「懿凡设计」作者： 懿凡设计
如何让动效完美还原？送你两个超厉害的免费插件！
作为视觉设计师你是否会遇到这样的问题，当需要做一个 loading 或者其他动效的时候，总会或多或少的出现一些问题，如何使用更轻量高效的 Sketch 直接将矢量图形转到 AE 制作动效，如何不再受 GIF 导出的失真问题困扰，如何让开发完美还原我们的动效设计稿等，如果你也存在这些疑问，那以下介绍的2款插件就可以完美的解决这些问题。AEUXAEUX 是由 Google 团队推出的，运用在 Sketch 和 AE 的一组高效插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 AE 里解决图形分组和分层的问题，减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。以下是我做的一个简单小案例，通过此次案例将介绍怎么更好的使用这个插件：首先在 Sketch 内将图层进行分组，在多图层的情况下，需要在前期进行动效构思，根据构思在 Sketch 里对图层进行分组，所做的分组将会是你在 AE 里的合成分组。分好组后该如何导入才能让两者图层统一？方法一：直接复制选中图层安装好插件后，打开 AEUX，选择你将导入到 AE 里的图层，点击 Send selection to Ae，同时在AE里打开安装的 AEUX插件，在 BUILD COMP 区域出现了从 Sketch 导入的图层数量，勾选 Precomp groups，点击将自动加载入 AE 合成里。方法二：导出json文件从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件，打开 AE 的 AEUX 面板勾选中 Precomp groups，将导出的 json 拖入到 BUILD COMP 区域，或者点击「曲别针」icon打开 json 文件。这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。避坑指南如果在 sketch 内，分组图层不在同一组内，导入 AE 后会出现变形和位移的情况。如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时，导入 AE 后将出现投影消失，渐变消失，形状变形的情况，在遇到这种情况时，会通过导出图片的方式处理。导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups，多图层导入的情况下，组内的图层都会生成在 AE 中的同一个合成中。Sketch的AEUX面板其他功能介绍 1. Detach symbols这是一个解除 symbol 的功能，在 sketch 内如果没有解除 symbol，导入到 AE 里将出现图形位移和变形的情况。2. Flatten shapesAEUX 支持布尔运算，但是在一个组中混合不同的运算符（如添加然后减去）对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。3. Images to symbolsSketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界，复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。AE的AEUX面板其他功能介绍1. Come size multiplier：切换倍数可以设置 sketch 画板的倍数合成。2. Auto build artboards：自动构建合成导入前勾选此功能，在 sketch 的 AEUX面板中复制图层后，在 AE 里不需要任何操作，它会自动复制图层导入到创建合成中。3. Convert to precomp：创建合成同时选中单一图层，可以将他们建立一个新的合成。4. Un-Precomp group：解除合成分组点击可以解除合成的分组，变成单一的一个一个的图层5. Toggle Visibility：可以一键隐藏和显示所有的父级图层6. Delete group layers：删除父级图层虽然现在 AEUX 有些上面所讲的功能不能支持，但是在一步步完善，希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率，减少不必要的操作步骤。Bodymovin在动效制作好后，通常我们会导出 mov 然后导入 PS 里生成 gif 格式，但是 gif 会出现质量过低的情况，比如渐变分层，边缘有毛边等情况，所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题，而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放，在制作动效时导出 json 文件直接给到开发，可以帮助提高实现动效效率，同时提高动效质量。1. 它还有很多的优点它可以支持 Android、iOS平台；导出的文件体积小，方便开发使用；实现效果佳，可以支持渐变等效果。2. 在使用中有几点注意在使用前期，这种方法是否适合你现在所做的动效，lottie 是针对矢量动画开发的，不太适合图片过多的情况，图片过多会增加文件负荷，所以最好是将图片转化为路径动画。在 AE 里导入到 Lottie 的图层不能识别矢量渐变。不能支持外置插件的效果，比如粒子、光效等。需要与前端开发沟通，他们是否愿意使用。导出给开发的文件中需要有完整视频参考，开发可以通过完整视频知道 loading 位置和效果，同时如果出现 json 导出错误的情况，开发可以查看，遇到不一样的地方可以询问设计师。开发完成后需要走查，看是否与你预期一致。3. 所需软件ZXP installerLottieFiles（移动版）插件：bodymovin下面是一组之前做的页面加载loading效果，开发小哥哥反馈：实现挺高效。4. 步骤下载ZXP installer：https://aescripts.com/learn/zxp-installer/下载bodymovin：https://github.com/airbnb/lottie-web下载之后，点开刚下载的 ZXP，点开顶部 file-open，打开 bodymovin插件。当出现以下界面时代表已经安装成功。意外情况：在用 ZXP 安装 bodymovin插件的时候出现以下提示。原因是没有通过 Adobe Creative Cloud 下载 AE，需要重新通过 Adobe Creative Cloud 下载。打开AE，After Effect CC – 首选项 – 常规，勾选允许脚本写入文件和访问网络。 打开窗口 – 扩展查看是否添加成功。调出 Bodymovin 面板，选择需要导出的合成。点击你要保存的 json文件地址，点击 Render。点击 Brown 载入刚导出的 json文件，检查动效是否有误。这时候就可以把 json 文件给到开发，如果 AE 合成中有图片，需要把图片放在文件夹内一起提供给开发，同时也会给到一个 gif文件，如果实现有不一样的地方，开发可以询问设计师。如果想在移动端上浏览可以打开网址：https://www.lottiefiles.com/，下载安装移动端客户端（ios/Android）注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。打开手机里下载的 Lottie App，扫描右下角的二维码就完成了。有问题欢迎在评论里留言，也可以添加作者个人微信：lm605054483 询问。作者： 罗大曼