私人书签导航 - 动效设计
type: channel
link: https://me.bizihu.com/index.php/tag/动效设计/
items: 比Lottie还好用！腾讯新晋免费动效设计神器 PAG
items: 酷炫动效怎么做？试试这3款宝藏神器（已打包）
items: 还在用AE做动效嘛？来试试这6款新晋的动效设计工具吧！
items: 做好直接用！动效神器 Lottie 基础入门教学
items: 比阿里犸良还强大！Lottie动效设计完全指南
items: 比阿里犸良还强大！Lottie动效设计完全指南（导入篇）
items: 想用 Lottie 做动画？先收下这份常见错误和解决方法总结
items: 比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）
items: 阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效
items: 如何让动效完美还原？送你两个超厉害的免费插件！

比Lottie还好用！腾讯新晋免费动效设计神器 PAG
type: item
date: 2022-01-07T01:00:21+08:00
description: 在终端 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 方案时候也会存在。除了效果预览，PAGV…

酷炫动效怎么做？试试这3款宝藏神器（已打包）
type: item
date: 2021-10-23T04:40:47+08:00
description: 导言随着“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款新晋的动效设计工具吧！
type: item
date: 2021-03-31T00:24:22+08:00
description: 很多同学做动画或者动效的时候，始终会首选 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 基础入门教学
type: item
date: 2020-02-27T00:10:58+08:00
description: 疫情期间，在线生活迎来爆发 ，视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。短视频行业的日活用户规模较平日增加 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动效设计完全指南
type: item
date: 2019-08-18T18:40:51+08:00
description: 之前的文章已经介绍了 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 内部修改，务必要在项目中修改素材名称，在合成里修改的只是图层名称，这样是不生效的。特殊效果的动效导出含有特殊效果的动效是无法直接导出的，所以只能用笨办法，将动效渲染为序列帧…

比阿里犸良还强大！Lottie动效设计完全指南（导入篇）
type: item
date: 2019-07-25T17:03:02+08:00
description: 上一篇文章《比阿里犸良还强大！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 对我们日常导入和编辑素材来说更加方便快捷，当然不同的方式也有不同的应用场…

想用 Lottie 做动画？先收下这份常见错误和解决方法总结
type: item
date: 2019-07-17T16:10:51+08:00
description: 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 文件当中，所以在你导出渐变的时候务必先保存文件。另…

比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）
type: item
date: 2019-07-15T23:37:06+08:00
description: 动效设计，是 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 图层的位移属性单独建立父子关系则不生效）。支持速度贝塞尔插值，…

阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效
type: item
date: 2019-07-08T00:47:10+08:00
description: 阿里作为中国互联网企业的标杆，不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业，在各个专业领域，给专业人员提供了优质的工具与服务。对设计师而言，无论是每年一度的 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 的工具，所以有相关基础的设计师很容易上手。还不了解的同学也可以在各大设计网站搜索到。欢迎关注作者的微信公众号：「懿凡设计」作者： 懿凡设计

如何让动效完美还原？送你两个超厉害的免费插件！
type: item
date: 2019-03-16T21:57:18+08:00
description: 作为视觉设计师你是否会遇到这样的问题，当需要做一个 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平台；导出的文…