动画 性能 序列 今天给大家推荐一款未来很有可能会成为主流的动画解决方案 —— PAG。一、常见动效落地方案1. Lottie它算是市面上比较普遍的一种动效落地方式，它可以制作很多种类的矢量动画以及图片动画，它的缓动曲线会占用很多内存，在各平台效果支持上也不是特别的稳定，而且 Lottie 所支持的 AE 属性对设计师来说有一定的限制。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 2. SVGA与 Lottie 相比性能和稳定性会更好一些，因为 SVGA 是通过记录我们每个图层每个时间上的动画状态，因此 SVGA 也可以输出序列帧动画，但是它的内存消耗会比 Lottie 高，并且 SVGA 支持的 AE 特性也比 Lottie 少一些。3. Apng 和 Webp这两种动效落地方案目前在原生端可以通过一些代码框架支持，在 Web 端 Apng 和 Webp 格式存在一定的兼容性问题，目前在主流浏览器上是可以支持的。二、动效落地神器——PAG1. PAG 是什么PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。设计师在 AE 上设计出动画后，可以通过导出插件导出 Pag 文件，同时可以在桌面端预览工具中实时预览效果，还可以通过桌面端进行性能检测。PAG 可以支持 Android、iOS、web、mac OS、Windows 和 Linux，涵盖了业界常用的终端平台，支持 AE 动画实时渲染、运行时编辑。Lottie 和 SVGA 的设计目标是解决 UI 动画场景，PAG 的诞生的原因是因为 Lottie 无法满足视频编辑场景里的动画需求，后续又兼顾了 UI 动画在内的各种场景。2. 完善的动画工作流通常设计师输出动效给开发都是直接 AE 导出就给开发了，很少去关注动效的性能问题，并且每次想要尝试不同素材动画效果时，需要在 AE 中调试输出后在去看效果，导致设计成本浪费。采用 PAG 进行动效设计的话，我们在 AE 中调试好输出动效后，可以直接在 PAG 桌面端进行查看，在桌面端我们可以快速替换动效中的图片素材或文案来查看效果，同时可以通过性能面板查看当前动效的性能，方便设计师进行针对性优化。3. 性能强文件小PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源，在解码速度上比 Lottie 所使用的 JSON 文本数据快几十倍，在性能方面，PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。而在文件大小上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，相同动画内容可以比同类型方案平均减少 50% 左右的文件大小。4. AE 特性全支持PAG 动画制作有两种模式，分别为“矢量特性输出”和“BMP 预合成输出”，先来说下“矢量特性输出”：我们可以理解为用矢量素材和图片素材通过 AE 特性进行动效制作，PAG 的 AE 特性的支持是多于 Lottie 和 SVGA 的，且基本上涵盖了所有的 AE 特性，矢量特性输出性能会比 BMP 预合成输出性能更好。再说下“BMP 预合成输出”：我们可以理解为序列帧动画输出，也就意味着通过 BMP 方式输出我们可以使用 AE 中所有的特性，甚至是 AE 插件效果和视频素材，虽然“ BMP 预合成输出”可以支持所有 AE 特性，但是和 SVGA 中输出序列帧一样，“BMP 预合成输出”性能消耗和动效文件大小也会更大，所以大家在使用时要合理把控，PAG 支持了矢量和 BMP 预合成混合导出，从而实现在支持 AE 所有特性的同时，又保持运行时的可编辑性。这里我们再把开头的产品对比横向加入 PAG，可以很直观地感受到 PAG 相比其他产品的优势所在：5. 目前已使用 PAG 的产品下面这些产品中都应用到了 PAG 这款动效落地方案，包括我们非常熟悉的微信、QQ、王者、腾讯视频等。小结目前市面上的动效解决方案各有优劣，Apng 的出现感觉确实很棒，它解决了我们在其他动效方案中所遇见的问题，让设计效率得到了提升，但如果是 PAG，则可以通过“ BMP 预合成导出”方式一键导出，你不需要再去把一些特殊效果进行序列帧输出导入的过程，PAG 会帮你输出这些特殊效果，并做压缩和优化。三、PAG 的实际应用1. 序列帧动画目前 3D 类动画是一个流行的趋势，通常我们都采用的 AE 来制作一些 UI 中的视觉动画效果。如果我们要制作一些特别的效果，比如用三维软件制作一些 3D 的交互视觉动画，以 C4D 为例，我们可以将制作好的 C4D 动画导出为序列帧，放进 AE 中以“ BMP 预合成输出”我们就可以得到一个三维效果的交互视觉动画，而且 PAG 输出的序列帧动画相比 SVGA 性能优化的更好。用过 SVGA 的同学，一定尝试过序列帧来输出动效，通过序列帧虽然能给我们带来更炫的视觉效果，同时它也会带来更大的文件体积和显存效果，通过下图同一序列帧动画文件输出对比：PAG 显存消耗比 SVGA 小 40 倍，PAG 文件大小比 SVGA 小 2 倍，相比 SVGA 序列帧输出，显然 PAG 在序列帧输出的优化上做的更好。2. 礼物打赏动画礼物打赏类动画是比较社交类产品中最常见的视觉动画，礼物动画比较注重整体的氛围感和视觉效果，因此会用到 AE 第三方插件、脚本等丰富画面视觉效果。以 SVGA 为例，通常一些特殊视觉效果需要我们做进行序列帧的方式处理，采用 PAG 输出我们可以在需要输出的预合成名字后面加“_bmp”，通过“ BMP 预合成输出”直接导出动画，PAG 会帮你输出这些特殊效果，并做压缩和优化，提升动画输出效率。3. 悬浮球和图标动画悬浮球运营位也是产品中运营活动的引流入口，将悬浮球采用动态化的设计，可以提升趣味性和视觉吸引力，图标动画也是非常常见的动画表现形式，比如：Tab bar 图标，礼物打赏图标等。4. 匹配和弹幕漂屏动画PAG 也可以制作匹配和飘屏类动画效果，设计师将动画输出给开发，开发可以调用相应方法替换动画中的的图层文件和文本内容，比如：用户匹配成功时的用户头像和名字，以及弹幕飘屏中的用户头像、头像框和用户名字等。5. Banner 动画Banner 类运营动画，相信大家肯定看到过支付宝一些运营 Banner 动画，类似这样的动画我们也可以使用 PAG 进行设计制作后输出给运营的同事进行后台配置，相比静态 Banner，动态 Banner 更加具有趣味性，动态元素更吸引用户注意。6. 徽章动画徽章动画是社交类产品中很常见的视觉动画，使用动态形式表现徽章能更好的体现出尊贵感，在 PAG 中我们可以直接通过轨道遮罩制作扫光效果会简单很多，同时 PAG 还支持 AE 混合模式，我们可以通过混合模式制作一些图层效果。写在最后其实我很早就关注 PAG 这个动画解决方案了，PAG 出来没多久我就去尝试使用了，算是 PAG 比较早的一批用户吧，目前来看 PAG 相比目前市面上的动画解决方案来说确实很不错，无论从 AE 的特性支持，以及序列帧动画输出的压缩和优化都比市面上的其他解决方案更好，自动检测动效文件错误这个功能，对于经验不丰富的设计师来说很有帮助。PAG 会在输出时告知你动效文件可能存在的一些问题，性能检测可以让设计师可以提前预判动画所存在的性能风险，从而对动画进行合理的调整，避免因动效性能导致的产品稳定性问题，目前 PAG 团队还在持续迭代优化中，期待后续更多优秀的功能出现。PAG 原生端和 Web 端 1 月 14 日正式开源，目前可以下载使用，对 PAG 感兴趣的设计师朋友，可以去官网： https://pag.io 了解更多信息。附录——PAG使用指南1. 快速安装 PAG以 MacOS 系统为例，PAG 的安装个人认为对新手用户是非常友好的，整个安装的过程跟着提示确认就行，相比其他的动画方案安装要简单很多。在官网下载 PAG 安装包；安装 PAGViewer 软件；打开 PAGViewer，PAGViewer 将自动检测是否需要安装/更新 AE 导出插件，按提示安装即可（记得安装前先关闭 AE）如果没有自动检测提示安装点击菜单栏 "PAGViewer" -> "安装 AE 插件"2. PAG 插件配置在"After Effects CC" -> "首选项" -> "PAGConfig..."可以打开 PAG 配置面板，配置面板中分为“通用”和“ BMP 预合成”。 “通用”可以理解为使用 PAG 所支持的 AE 特性制作的动效输出，“ BMP 预合成”则是在动效中采用了特殊效果比如AE 插件或脚本制作的特效。通用：导出场景：设计师可以根据使用场景进行设置，我通常用的”通用“模式导出版本控制：这里有三个选项，stable：稳定版，表示导出稳定版本的 PAG 文件，这类 PAG 文件通常可以被线上已经发布的 app 支持。发布到线上的 PAG 常用此选项。beta：最新版，表示导出最新版本的 PAG 文件，这类 PAG 文件可能无法被线上已经发布的 app 支持。测试 PAG 新特性时常用此选项。custom：自定义导出为指定的 SDK 版本能支持的能力，需搭配 TagLevel 使用，具体 TagLevel 的值可以从指定版本 SDK 里的 PAGFile.MaxSupportedTagLevel() 获取。TAG Level：只有当导出版本控制选项取值为 custom 时，TAGLevel 栏才有效，否则无法输入。取值范围为 44 至 1023.具体设置到什么值可以咨询客户端开发人员，通常根据线上客户端 SDK 所支持的最大 TagLevel 确定。位图压缩质量：用来控制位图和 BMP 预合成的压缩质量，取值范围（0-100），越高图片越清晰但是文件越大，默认 80。位图像素密度：用于控制位图在文件中存储的最大像素密度导出图层名字：这个功能默认打开就行导出字体：打开后将会导出动画中使用字体的字体包单独调节图像尺寸：打开后如果导出的素材中包含图片或 BMP 预合成，AE 导出插件将在导出过程中弹出“素材压缩面板“，设计师可以对不同的素材图片进行单独的压缩BMP 预合成：BMP 预合成后缀：在需要输出的预合成后面加入后缀名后，将会以“ BMP 预合成”形式输出，默认后缀是“_bmp”，不分大小写，大家也可以自定义一个后缀。图像质量：用来控制位图和 BMP 预合成的压缩质量，取值范围（0-100），越高图片越清晰但是文件越大，默认 80。导出尺寸上限：用于控制导出 BMP 预合成的最大分辨率（短边）。过大可能会显著增加 PAG 文件尺寸；过小会影响播放的清晰度。默认 720关键帧间隔：用于控制导出 BMP 预合成的关键帧间距。取 0 表示只有第一帧为关键帧；其它正数表示关键帧间距，默认 60，关键帧间距影响播放 seek 时的解码效率。取值过小会增大导出的 PAG 文件尺寸导出版本列表：导出 BMP 预合成时允许单个文件包含多个分辨率版本的截图序列，程序在实际使用时会动态使用最合适的分辨率以降低性能损耗。配置此列表能控制具体要导出哪些分辨率和帧率的截图序列版本，可以通过“增加版本”/“删除选中”来增减列表存储格式：可选“视频序列帧”和“位图序列帧”两种导出的存储格式，视频存储格式会更小，在含有硬件解码的平台上性能也更好。位图存储格式文件更大，在只有软件解码的平台上或者非常小的尺寸时比视频解码略微更快。默认值是 "视频序列帧"3. PAG 设计输出方式PAG 输出动画有两种模式“矢量预合成输出”和“ BMP 预合成输出”。“矢量预合成输出”就是通过矢量图形和位图素材利用 PAG 所支持的 AE 特性制作的动效，这种模式输出的优势在于性能好文件体积小，同时可以在桌面端编辑图片预览不同素材下的动画效果，缺点是无法使用一些特殊效果，比如 AE 的第三方插件 “ BMP 预合成输出”就是序列帧的输出形式，因此可以支持 AE 中所有的特殊效果包括第三方插件和脚本效果等，但它的缺点是性能差文件体积大，同时无法在桌面端编辑替换素材。4. 自动检测动效文件错误这是非常贴心的一个设计，在输出 PAG 动效时，插件会自动检测当前动效中出现的一些问题，提前告知设计师当前动效存在的一些风险，以便设计师即使做出调整，比如：位图数量太多、图层数量太多等，之前有不少设计朋友问过我 SVGA 输出时不知道出了什么问题，在 PAG 中插件会自动检测提示你可能出现的问题。5. 性能检测面板这个功能对于设计师来说是一个很好的功能，很多设计朋友可能更多的关注的是动效的视觉效果，缺忽视了性能的问题，因为通常动效落地方案没有这个功能（SVGA 可以在线查看内存消耗），告诉你性能有问题的一般是开发拿过去测试后发现来告诉你的，但是性能确实还是比较重要的一个事项，因为它可能会直接影响产品的稳定性，有了性能检测面板，设计师可以提前预测到你所产出的动效性能是否合理，在性能面板中可以看到动画时长、播放帧率、显存大小、动画尺寸等，性能面板也给出了性能的参考值，超过这个值会用红色感叹号提示你。6. 快速编辑预览动画这个功能适用于“矢量预合成输出”的动效，“ BMP 预合成输出”不支持图片编辑，设计师可以在文本编辑区编辑文本信息，在图片编辑区直接替换当前动效中所使用的位图素材，可以快速验证不同位图素材和文本信息的效果，不用在到 AE 里在去折腾了提升设计效率。7. 支持音频输出PAG 是可以支持音频输出的，这对于礼物动画设计的设计师来说是好事，通常需求方都希望比较贵的礼物能带一些 BGM 更有氛围，采用 PAG 的话就可以制作一些带音效的礼物啦，可以在桌面端 PAG 文件结构：getRootLayer：PreComposeLayer -> composition:VectorComposition -> audioBytes 的值，来判断 Pag 文件中音频输入是否导出成功，为 {} 时导出成功，为 null 时导出失败或无音频。小结PAG 无论是安装还是 AE 特性支持的都要优于现有的动画方案，两种输出方式可以根据动画效果进行合理选择。自动检测和性能检测能让设计师提前预测可能出现的错误，快速编辑预览帮我们快速尝试不同素材的效果，提高设计效率；支持音频输出对礼物设计来说是件好事。 关于 PAG 的使用介绍我这里只做一些简要的概述，更详细的使用说明大家可以在 PAG 官网中进行查看本篇来源：优设网原文地址：https://www.uisdc.com/pag-2
礼物 动画 序列 首先想说下为啥要写这篇文章，最近接到个项目任务，制作直播间礼物赠送视觉效果，由于之前没有接触过此类设计，因此在多方打听，并在网上到处探索后发现 SVGA 是个不错的选择，在与开发同学沟通并尝试了另外几种格式输出文件后，我们最终敲定了用 SVGA。在网上搜索了很多相关资料学习，发现网上关于 SVGA 的资料相当少，而且很大部分还是介绍关于开发的，关于设计制作的少的可怜，这也是我打算写这篇内容的的原因，我觉得或许应该有这么一篇文章，帮助到一些正在做这个事儿的设计同学，如果有什么表达有问题的地方欢迎大家指正…让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、礼物动效输出方法A：导出关键帧动画制作礼物动效缺点：需要把图片带到安装包中，增大了安装包体积B：使用属性动画缺点：开发代价较大，每一套礼物动画基本都不一样，开发人员需要去细细调参，花在业务上编码的时间会变得非常有限，从代码复用率极低C：输出 GIF 文件缺点：输出效果差，并且资源占用高D：使用 SVGA，SVGA 支持位图，并且输出后直接封装打包好的，直接给开发 SVGA 文件就 OK，并且 SVGA 更贴合直播类应该场景，SVGA 所提供的动态文本、动态图像功能都是其它库所不能提供的，在实现炫酷动画的基础上，性能表现也比较棒。SVGA 是开源工具可以跨平台使用，支持 Android、iOS、React Native、Web、微信小程序，但是在微信小程序上表现会差一些。二、什么是 SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。SVGA 不同于 Lottie，Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现，而 SVGA 则将这些逻辑免去。也因此，SVGA 可以同时支持 Flash。SVGA 做的事情，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。Player 会负责将这些信息还原至画布上。关于Lottie：Lottie 动效设计完全指南：渐变修复之前的文章已经介绍了 Lottie 是什么，以及如何导入/导出设计文件，那么今天就为大家讲解如何修复渐变。阅读文章 > 三、AE 基础属性制作输出 SVGA笔者常用的动效制作软件是 After Effects，因此主要讲如何通过 AE 制作导出 SGAV 动效，利用 AE 制作基础属性动画，基础属性动画包括（位移、缩放、旋转、透明度）。第一步：从 sketch 或者 PS 中将礼物和礼物效果元素切图导出，根据个人需可以将礼物拆分成几块分别导出，方便 AE 中制作动态效果。第二步：将导出的切图素材导入 AE 中，利用 AE 制作基础属性动画，制作完成后结果如下第三步：将背景隐藏在窗口-扩展中找到 SVGAConverter_A第四步：用 SVGAConverter_AE 插件导出 SVGA 文件，输出 SVGA 时记得把背景调成透明背景，输出后如下通过下图可以看到 SVGA 输出格式后文件大小仅为 145KB，如果是序列帧的话文件大小高达 10 几 M四、AE 预设效果制作输出 SVGA接触过 SVGA 的同学应该都知道，SVGA 支持位图、矢量和一些基础属性动画，很多时候我们制作礼物特效的时候，都是用自己做好的位图素材导入 AE 进行一些基础属性的动画制作，这次我将利用序列帧位图制作出一些更炫的礼物特效。第一步：在 AE 中用预设效果制作出自己满意的礼物特效第二步：将制作的特效动画导出序列帧，然后在将序列帧从新导回 AE 中，新建预合成将每一帧拼接起来，这样做的目的是因为 SVGA 无法识别 AE 的表达式和效果预设，所以我们将特效转为序列帧后在重新放进 AE，序列帧是位图所以 SVGA 可以识别并导出特效。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。五、AE 插件制作输出 SVGA这次我用 AK 大佬的插件 saber 为大家做案例，saber 是一款很不错的光效制作插件，也比较容易上手，视觉表现力也非常棒，本篇文章主要是将 SVGA，所以就不给大家具体说明 saber 如果做礼物特效了。第一步：根据礼物的轮廓利用 saber 插件制作出火焰燃烧效果。第二步：和刚才所说的预设效果特效动画一样，我们通过 AE 将特效动画导出 PNG 序列帧，然后在将序列帧导回 AE，并将每一帧拼接起来，这里有个小技巧给大家说下，用过 saber 的同学都知道 saber 的用法是利用 AE 的图层样式“屏幕”将光效合成在图里，其实 saber 也可以导出透明背景的 PNG 的，方法很简单，将 saber 当前图层复制一层，然后对复制出来的副本进行用亮度遮罩。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。总结最后聊一下关于用其他软件制作的礼物动画，根据上面所说的几种方法可以发现，我们想要在 SVGA 中想要得到更好的效果，就是将制作的特效输出为序列帧后在 AE 中重新拼接起来，换一种说法就是我们可以不仅限于 AE 来制作，也可以使用 C4D 或者其他设计软件来做，只需要我们将最终效果已序列帧的形式进行输出即可。并且我们也可以利用位图、基础属性和插件相结合来做，值得注意的是如果视觉效果做的太过复杂会导致文件过大，同时也会产生性能方面的问题，在制作的过程中大家还时要把握好一个度。附件有 AE 的 SVGA 安装包大家可以下载参考资料：SVGA： http://svga.io/designer.htmlhttps://juejin.im/entry/59f1648f5188254115700ee6https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbfhttps://blog.csdn.net/gutaocslg/article/details/79908414 文件名 如何下载使用 文件大小 提取码 下载来源 SVGA安装包17.07MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/svga-motion-design
文件 效果 序列 大家好，我是小六。今天给大家分享在可视化设计中，最常用的动效落地方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将小动效在页面中展示出来。希望可以带给大家更多帮助！前言最近在做项目中遇到一些问题，有些效果开发实现出来跟实际相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别。还会有些情况是因为项目排期问题开发落地有一定成本，希望能快速落地。还有的开发直接说搞不了等等。借这次整理一下动效落地过程中遇到的坑，同事展开聊一下设计师对接前端做动效落地的一些最常用的方法，最后会把文中提到的插件软件整理打包分享给大家。常见的开发对接方式1. GIF2. PNG 序列3. APNG4. Lottie5. SVGA6. MP4GIFGif 是现有市面上应用最广泛的动效格式了，最早起始于 1987 年 由 CompuServe 公司引入。谨此纪念 Steve Wilhite：关于 GiF 和创始人你不知道的 9 件事2022 年 3 月 14 日，GIF 动图的发明者 Steve Wilhite 因新冠并发症去世，享年 74 岁。阅读文章 > 优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。缺点：颜色仅支持 8 位 256 颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有白边。输出：GIF 文件有多种输出方法这里给大家罗列比较常用的，大家按需使用。1. 通过 ae 导出 png 序列或者 mov 视频 拖入 ps 导出2. Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 gif）3. AEscripts GifGun 是一款可以直接在 AE 里一键创建输出 GIF 动画格式脚本GIF 压缩的方法可以看这篇：如何正确压缩GIF格式文件？来看京东设计师的总结！本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。阅读文章 > PNG 序列由 PNG 图片组成的序列帧。优点：兼容性非常好、效果还原高、颜色丰富。缺点：文件比较大，动效比较复杂的话输出 png 序列可能好几百张，会影响浏览器性能。输出：可 ae 等动效软件直接输出。APNGAPNG 是一个基于 PNG 的位图动画格式，它的动图后缀依然是.png。优点：颜色丰富，支持 1600 万种颜色，支持渐变透明，无损压缩。缺点：文件过大，兼容性差受浏览器、系统版本等限制。在 web 端对于主流的浏览器 Firefox、Safari、Chrome 都能够兼容。输出：1. 通过 iSparta 软件导出。操作步骤是将 png 序列拽到 iSparta 软件中点击开始即可导出 apng，此软件一共可以导出三种格式，APNG/GIF/WEBP2. AE BX-WebpApngExporter 插件LottieLottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用 AE 做完动画后，使用 Lottie 提供的 Bodymovin 插件将导出成 JSON 格式，就可以直接运用在 Web 上，无需其他额外操作。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。输出：使用: AE 菜单栏窗口 – 扩展 — Bodymovin — 导出.json文件设置选项里了选择输出一个 HTML 的本地文件，可打开进行预览bodymovie 插件下载地址： https://github.com/bigxixi/bodymovin_cnbodymovin 需要这个安装器才能安装，推荐 zxp 安装器下载地址 https://zxpinstaller.com/SVGASVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。优点：便捷 SDK 开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多输出：ae 选择 菜单 > 窗口 > 扩展 > SVGAConverterMP4MP4 是一种常用的视频格式，也通常运用于直接对接开发。优点：兼容性好，文件能够快速输出，文件小。缺点：视频格式项目中过多的话影响性能，效果会有压缩。输出：Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 MP4），ae 中菜单-合成-添加到 Adobe Media Encoder 队列，直接可以输出 MP4 文件。最后以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。如何让动效又快又好落地？我分析了这5种格式的优缺点！动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。阅读文章 > 欢迎关注作者微信公众号：「小六可视化设计」 文件名 如何下载使用 文件大小 提取码 下载来源 动效插件打包347Mnd53 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/motion-program
动画 格式 序列 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。序列帧GIFLottieAPNGSVGA序列帧刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。导出方法：AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。GIFGIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。界面设计中的小元素可以使用这个格式，比如运营按钮动画、点赞图标动画等，资源不会太大。像我之前负责的新年许愿活动，因为是从 0 到 1 的产品，开发还没有支持 Lottie，所以许愿按钮动画输出 GIF 给开发实现，压缩后资源 300KB。虽然动图放大周围有锯齿，但是在手机上是看不到的。导出方法有三种：1. AE 导出 MOV 格式，再用 PS 转换成 GIF。（注意：可能是因为动画时间太长、文件太大，导出经常失败，所以我很少用这种方式)2. AE 安装 Gifgun 插件，直接导出。3. AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 GIF 输出。（注意：如果导出 GIF 图片有问题，需要勾选压缩质量，填写小于 100 的值就可以解决了）如果 GIF 文件太大，可以使用无损压缩软件：PPDuck。LottieLottie 是一个用于 Android、iOS、Web、Windows 的动画库，用于解析使用 bodymovin 导出为 json 文件的 AE 动画。动画通过代码实现，是矢量的。动画库资源会增加安装包的大小，客户端会有推动成本，不过 WPS Office 有在使用，资源大小和稳定性目前来说是可以的。比阿里犸良还强大！Lottie动效设计完全指南之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。阅读文章 > 不支持 AE 效果器直接添加的效果，比如高斯模糊、内发光、投影。支持用图片导入 AE 做出的动效，比如金山知识库官网的头图，就是使用 Lottie 方式实现，资源小，动图也很清晰。支持颜色渐变，但是导出 json 容易出问题。比如之前设计的会员卡片动效，渐变颜色导出后变成了黑白渐变。这时候只需要将所有渐变图层名称按顺序改为 Gradient fill 1、Gradient fill 2、…，就可以解决了。导出方法：AE 安装 bodymovin 插件，直接导出。（注意：要选择保存路径，导出按钮才能点击。点击设置图标，选择 Standard 和 Demo，才能导出 json 文件和 demo 预览效果）APNGAPNG 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。金山协作的表情包使用的也是这种格式动图。和 GIF 对比，它的优势在于动图边缘光滑，不会有锯齿和颗粒感。导出方法：AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 APNG 输出。SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于直播礼物场景，适合炫酷的礼物动效。因为礼物效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件+img 文件夹。支持 AE 自带基础动画：位移、缩放、不透明度等，但是不支持图层渐变（Lottie 支持渐变）和 AE 自带及外部插件的效果控件特效，所以 UI 动效 Lottie 比较通用，不容易出错。总结讲了那么多动效落地方案，那么在实际工作中我们该如何选择使用呢？资源大小对比质量对比使用场景对比Lottie：基本适合所有 UI 动图，比如图标动效、加载动效、插图动效、运营按钮动效等，优先使用GIF：移动端小元素动图可以使用，比如点赞动效（大尺寸透明背景动图不建议使用，锯齿严重）APNG：表情包、小元素动图（比 GIF 质量好）SVGA：直播礼物炫酷动效序列帧：资源太大，不建议使用以上就是我的业务动效落地经验总结，大家有需要这些导出插件的可以找我。腾讯出品！AE 动效设计必备指南（附超多神器和技巧）动效是用户体验的重要组成部分，也是产品调性的重要体现。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design
张大湿
在路上
飞翔的企鹅
